Build a dice simulator using jQuery.
This entire project should be built using jsbin and only work in the HTML section. When you are done, save your project and send the unique URL to your instructor.
Inside the <body>, add a <div id='die'> element.
Then, inside the <head>, add <style> tags and the CSS styles below
<style>
#die {
height: 100px;
width: 100px;
background-color: lightgray; /* feel free to change this */
position: relative;
}
</style>Inside the <head>, copy-paste the HTML <script> tag to import jQuery.
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>After the </body>, add opening and closing <script> tags.
Inside the script tags, use jQuery to create a single dot in the middle of the #die element:
$('<div>')
.css("height", 15)
.css("width", 15)
.css("background-color", "black")
.css("position", "absolute")
.css('top', 50)
.css('left', 50)
.appendTo("#die");Turn your code from TODO 3 into a function that can make a dot in ANY LOCATION. What parameters should this function have? What will change each time you create a new dot?
Name this function makeDot.
Note: rather than using the parameters to set the positions of the dot, use the parameters and subtract 10 from each of them. This will center things better. This is not required for full credit, however.
Use the code below to generate a random number between 1 and 6 each time the program runs:
var randomNum = Math.ceil(Math.random() * 6)Use if statements to create the correct number of dots based on the random number. Use the image and code below for guidance.
You only need to program in the case of six dots. For the rest, simply copy in this code (be sure to replace dieID with your actual die id):
if (randomNum === 1) {
makeDot(50, 50, dieID); // middle middle
}
else if (randomNum === 2) {
makeDot(25, 25, dieID); // top left
makeDot(75, 75, dieID); // bottom right
}
else if (randomNum === 3) {
makeDot(25, 25, dieID); // top left
makeDot(75, 75, dieID); // bottom right
makeDot(50, 50, dieID); // middle middle
}
else if (randomNum === 4) {
makeDot(75, 75, dieID); // bottom right
makeDot(25, 25, dieID); // top left
makeDot(25, 75, dieID); // bottom left
makeDot(75, 25, dieID); // top right
}
else if (randomNum === 5) {
makeDot(50, 50, dieID); // middle middle
makeDot(75, 75, dieID); // bottom right
makeDot(25, 25, dieID); // top left
makeDot(25, 75, dieID); // bottom left
makeDot(75, 25, dieID); // top right
}Using both the image and the code above, you should be able to figure out the case for six dots. Put it in!
Make a function called rollDie and put your all your code from Part 3 (TODOs 5 and 6) into that function. You will also want to add the following line to the beginning of the function:
$('#die').empty();
You will also want to give rollDie a single parameter of dieID in case you attempt the challenge later.
Now, just calling the function will roll the die!
Make your die clickable by registering an event handler function to respond to a "click" event. Use the general structure below:
// Register an event handler function to be called in response to an "event"
$("element").on("eventType", handlerFn);
// Event handler function
function handlerFn() {
}You will need to put your function call to rollDie() in your handler function, of course, or else the handler function won't do anything!
Add a second die that would produce a different result from the first.
HINT: Make your rollDie function take in an element's id so you can specify which die to roll for. Then you'll just need to call the function once for each die you roll!