Make Your First Chrome App
Roll 2 Dice
It's Fun to Learn by Actually Making Something !
Get Mister iCan's Roll the Dice
Make a simple app to roll 2 dice. You need to use HTML and Javascript to create a web page that you will use as the interactive portion of your Chrome App. The HTML will have a "roll" button and locations by ID for placing results from the script.
- Start with Java script Random Numbers: W3 Schools Link
- Make this work for a single dice that generates a random number from 1 to 6.
- Modify the script and html so that you get two random numbers and a total every time you click the button.
- Modify the dice image so that you have one each of highlighted numbers ( one through six) and name them accordingly. Alter the size to a width of 250 pixels. Save the images as png files. You can use the Chrome App PIXLR if you need a free image editor.
- Use an Append to place the dice images (see example below)
- Find a way to clear the ID (location) where the image gets placed.
- Finish the app
Script for html header to place an image:
<script type="text/javascript">
function insert1()
{
var src = document.getElementById("dice1image");
var img = document.createElement("img");
img.src = "dice1.png";
src.appendChild(img);
}
</script>
- use an if statement and call insert1( ) in the function inside your exiting script in the body. Later, you will have 12 if statements .... 6 for dice1 and 6 for dice2.
- Set up an ID where you want HTML and Javascript to place the image for both dice1 and dice2.
- Your images will append (add a new one) every time you click your button. You will want to "erase" the old one before you append the new one. Place this line right before the first if statement to clear old images from the ID location before appending the next image.
document.getElementById("dice1image").innerHTML = "";
- Note that image files and your html file should be located in the same file folder called DiceApp so that your page will have the correct file path to find and then load your dice images.
- Copy, paste, and modify your insert1( ) function so that you have a different function to load images for all 6 possible rolls for both dice. You will have 12 functions. I numbered mine 1 through 12 where 7 through 12 referred to the 6 possible outcomes for dice2.
- Test your solution as a web page. Add your own CSS styles. Then proceed through the links below to build and test your first app.