styliii/index.html

## 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>

## popcode.json
{"enabledLibraries":["jquery"]}

## 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()!
var total = 0;
var wins = 0;
var losses = 0;
var pct = 0;

// 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
    var num;
    num = Math.random() * 6;
    return Math.floor(num) + 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(outcome){
    if (outcome) {
      $('.outcome').text('Double Victory!');
    } else {
        $('.outcome').text('No Dice');
    }
    $('#total').text(total);
    $('#wins').text(wins);
    $('#losses').text(losses);

    if (wins > 0) {
        $('#pct').text(Math.floor(wins / total * 100));
    } else {
            $('#pct').text(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 die1, die2;
    die1 = randomDiceNumber();
    die2 = randomDiceNumber();
    // b) use jQuery to put those dice numbers on the webpage
    $('#first-die').text(die1);
    $('#second-die').text(die2);
    total += 1;

    // c) check the outcome to see if the dice match and
    //    save it in a variable called 'outcome'
    var outcome = false;

    if (die1 === die2) {
      outcome = true;
      wins += 1;
    } else {
      losses += 1;
    }

    // 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
$('#roll-dice').click(function() {
    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

showOutcome();

## 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()!
	var total = 0;
	var wins = 0;
	var losses = 0;
	var pct = 0;

	// 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
	var num;
	num = Math.random() * 6;
	return Math.floor(num) + 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(outcome){
	if (outcome) {
	$('.outcome').text('Double Victory!');
	} else {
	$('.outcome').text('No Dice');
	}
	$('#total').text(total);
	$('#wins').text(wins);
	$('#losses').text(losses);

	if (wins > 0) {
	$('#pct').text(Math.floor(wins / total * 100));
	} else {
	$('#pct').text(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 die1, die2;
	die1 = randomDiceNumber();
	die2 = randomDiceNumber();
	// b) use jQuery to put those dice numbers on the webpage
	$('#first-die').text(die1);
	$('#second-die').text(die2);
	total += 1;

	// c) check the outcome to see if the dice match and
	// save it in a variable called 'outcome'
	var outcome = false;

	if (die1 === die2) {
	outcome = true;
	wins += 1;
	} else {
	losses += 1;
	}

	// 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
	$('#roll-dice').click(function() {
	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

	showOutcome();
	.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;
	}