jackrr · April 3, 2017 01:26
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>Dice Roll Game</title>
    </head>
    <body>
        <h1>Dice Roller</h1>
        <div class="dice" id="first-die"></div>
        <div class="dice" id="second-die"></div>
        <button id="roll-dice">Roll the Dice</button>
        <div class="outcome"></div>
        <p><span id="total"></span> Total</p>
        <p><span id="wins"></span> Won</p>
        <p><span id="losses"></span> Lost</p>
        <p><span id="pct"></span>% Won</p>
  </body>
 </html>
diff --git a/popcode.json b/popcode.json
 {"enabledLibraries":["jquery"]}
diff --git a/script.js b/script.js
 /*
  Make a game that simulates dice rolls
  First, you'll make the dice randomly display
  a number from 1-6.
  Next you'll add some victory conditions.
 */

 // Pro Tip: want to know if your function is working? call it inside console.log()!

 // Step 1. Make the function randomDiceNumber
 // return a random number from 1-6
 function randomDiceNumber() {
    // Generate random number here
    // Hint: You'll need to use Math.random and Math.floor
    return Math.floor((Math.random() *6) + 1);
 }

 // Step 3. Move on to Step 2, then come back here!
 // Write a function showOutcome to put the message
 //  on the page
 function showOutcome(message) {
  $('.outcome').html(message);
 }

 var won = 0;
 var lost = 0;

 // Step 2. Update the function rollDice.
 function rollDice(){
    // a) use randomDiceNumber to get new values for the dice
    //    hint: save them in variables
    var dice1 = randomDiceNumber();
    var dice2 = randomDiceNumber();
    // b) use jQuery to put those dice numbers on the webpage
    $('#first-die').html(dice1);
    $('#second-die').html(dice2);
    // c) check the outcome to see if the dice match and
    //    save it in a variable called 'outcome'
    if (dice1 === dice2) {
        var outcome = "Numbers match. You win!";
        won++;
    } else {
        var outcome = "Numbers don't match. You lose.";
        lost++;
    }
    
    $('#total').html(won+lost);
    $('#wins').html(won);
    $('#losses').html(lost);
    $('#pct').html(Math.round(won / (won+lost) * 100));
    
    // d) display a victory or loss on the webpage
    //     1. Scroll back up and complete Step 3 (define function showOutcome above)
    //     2. Call showOutcome here with the variable outcome
    showOutcome(outcome);
 }


 // Step 4. Add a click handler to the roll button
 // so that new numbers appear on the dice
 // when the button is clicked.
 // Hint: Use the rollDice function
 $('button').click(rollDice);

 // BONUS

 // Add a divs to the page to:
 // a) Display the total number of rolls so far
 // b) Display the number of wins
 // c) Display the number of losses
 // d) Display the percentage of wins out of total rolls
diff --git a/styles.css b/styles.css
 .dice {
    border: 1px solid black;
    background-color: aquamarine;
    display: inline-block;
    border-radius: 8px;
    text-align: center;
    font-size: 24px;
    margin: 10px;
    height: 30px;
    width: 30px;
    padding: 20px;
 }

 #roll-dice {
    display: block;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dice Roll Game</title>
	</head>
	<body>
	<h1>Dice Roller</h1>
	<div class="dice" id="first-die"></div>
	<div class="dice" id="second-die"></div>
	<button id="roll-dice">Roll the Dice</button>
	<div class="outcome"></div>
	<p><span id="total"></span> Total</p>
	<p><span id="wins"></span> Won</p>
	<p><span id="losses"></span> Lost</p>
	<p><span id="pct"></span>% Won</p>
	</body>
	</html>
	/*
	Make a game that simulates dice rolls
	First, you'll make the dice randomly display
	a number from 1-6.
	Next you'll add some victory conditions.
	*/

	// Pro Tip: want to know if your function is working? call it inside console.log()!

	// Step 1. Make the function randomDiceNumber
	// return a random number from 1-6
	function randomDiceNumber() {
	// Generate random number here
	// Hint: You'll need to use Math.random and Math.floor
	return Math.floor((Math.random() *6) + 1);
	}

	// Step 3. Move on to Step 2, then come back here!
	// Write a function showOutcome to put the message
	// on the page
	function showOutcome(message) {
	$('.outcome').html(message);
	}

	var won = 0;
	var lost = 0;

	// Step 2. Update the function rollDice.
	function rollDice(){
	// a) use randomDiceNumber to get new values for the dice
	// hint: save them in variables
	var dice1 = randomDiceNumber();
	var dice2 = randomDiceNumber();
	// b) use jQuery to put those dice numbers on the webpage
	$('#first-die').html(dice1);
	$('#second-die').html(dice2);
	// c) check the outcome to see if the dice match and
	// save it in a variable called 'outcome'
	if (dice1 === dice2) {
	var outcome = "Numbers match. You win!";
	won++;
	} else {
	var outcome = "Numbers don't match. You lose.";
	lost++;
	}

	$('#total').html(won+lost);
	$('#wins').html(won);
	$('#losses').html(lost);
	$('#pct').html(Math.round(won / (won+lost) * 100));

	// d) display a victory or loss on the webpage
	// 1. Scroll back up and complete Step 3 (define function showOutcome above)
	// 2. Call showOutcome here with the variable outcome
	showOutcome(outcome);
	}


	// Step 4. Add a click handler to the roll button
	// so that new numbers appear on the dice
	// when the button is clicked.
	// Hint: Use the rollDice function
	$('button').click(rollDice);

	// BONUS

	// Add a divs to the page to:
	// a) Display the total number of rolls so far
	// b) Display the number of wins
	// c) Display the number of losses
	// d) Display the percentage of wins out of total rolls
	.dice {
	border: 1px solid black;
	background-color: aquamarine;
	display: inline-block;
	border-radius: 8px;
	text-align: center;
	font-size: 24px;
	margin: 10px;
	height: 30px;
	width: 30px;
	padding: 20px;
	}

	#roll-dice {
	display: block;
	}