Skip to content

Instantly share code, notes, and snippets.

@DestinyLuong

DestinyLuong/index.html

Created May 10, 2017 00:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DestinyLuong/09ff0cc7b6688d55122dee0ebafa824e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DestinyLuong/09ff0cc7b6688d55122dee0ebafa824e to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=09ff0cc7b6688d55122dee0ebafa824e
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Dice Simulator</title>
<img id="d" src="https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/1.png">
<img id="dd" src="https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/2.png">
<img id="ddd" src="https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/3.png">
<img id="dddd" src="https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/4.png">
<img id="ddddd"src="https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/5.png">
<img img="dddddd" src="https://raw.githubusercontent.com/ScriptEdcurriculum/diceGameStarterCode/master/images/6.png">
</head>
<body>
<button>ROLL!</button>
<p id ="first"></p>
<p id ="second"></p>
<p id ="third"></p>
<!-- Put your page markup here -->
<button id="reload">Refresh</button>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
/*
Dice Game
Directions: Make a program that randomly displays a number 1 through 6
Instructions:
1. On line 19, Use Math.random() to display a random number between 0 and 1
What do you see printing to the console?
2. Multiply your Math.random() function by 6
What do you see printing to the console?
3. Place your code in a function called Math.floor() to only display whole numbers between 0 and 5
What do you see printing to the console?
4. Add the number 1 to your function call to display a random number between 1 and 6
Is this simulating a 6 sided die properly?
*/
var dice = Math.floor(Math.random() * 6);
// var Mathfloor = dice (Math.floor);
dice = dice + 1;
console.log(dice);
var dicetwo = Math.floor(Math.random() * 6);
dicetwo = dicetwo + 1;
console.log(dicetwo);
// Math.floor(x) {
// var dice = Math.random();
// var Mathfloor = dice (Math.floor);
// console.log(dice);
// }
$("button").click( function() {
$("#first").html(dice);
$("#second").append(dicetwo);
});
$("#reload").click( function() {
location.reload();
});
if (dice === 1) {
$("#third").show("#d");
} else if (dice === 2){
$("#third").show("#dd");
} else if (dice === 3) {
$("#third").show("#ddd");
} else if (dice === 4) {
$("#third").show("#dddd");
} else if (dice === 5) {
$("#third").show("#ddddd");
} else {
$("#third").show("#dddddd");
}
if (dicetwo === 1) {
$("#third").show("#d");
} else if (dicetwo === 2){
$("#third").show("#dd");
} else if (dicetwo === 3) {
$("#third").show("#ddd");
} else if (dicetwo === 4) {
$("#third").show("#dddd");
} else if (dicetwo === 5) {
$("#third").show("#ddddd");
} else {
$("#third").show("#dddddd");
}
//Step 5: Place the result of the dice roll in a click handler so that it appears on the HTML page.
//Bonus steps
// added a second die so that it simulates a user rolling 2 dice at once
Raw
styles.css
img {
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment