JavaScript Dice

This is a basic program that showcases how a javascript code works in collaboration to an html.

This can be used to teach kids about the basics of programming.

First Things First

First start with a basic notepad file.

Rename the file to make it html.

Open it with notepad. You can use better editors like notepad ++

Also keep the file open in a browser to see how is it behaving.

First Few Lines

Make an html tag body tag and script tag one inside the other.

Make a table with 3 rows and 3 columns. Write something in it to make it visible.

Main Part

Make divs to play as placeholders which will be used to place the dots for the dice.

Also make a button which calls a particular function which will contain the code for rolling the dice.

Error Handling

As you make the button, error will appear as you have not created the function.

Go ahead and make a blank function with the same name as given in the button inside the script tag.

Randomness

Make a random number generator which will cycle between 1 to 6 so as to make the dice look real.

Clean Up Code

Fill the divs with blanks first so that the dice does not look scrambled.

Fill the Dice

As per the logic of the dots fill the function with conditions so as to properly fill the dots.

Also make an image that looks like a dot. Save it in the same folder as the code.

Finishing

Your code is almost ready now.

You can see that the table gets resized as you click the button.

You need to set the size of the rows and columns so that the table gets solidified and does not change shape.

You also need to make the dots at the middle of the table cells. Set the alignment for that.

Lastly what you can do is change the border to 0 to make the dice more realistic.

You are done. Enjoy your first javascript code. Full code is available in the next step.

Code

<html>
<body>
<table border=0>
	<tr height=20>
		<td width=20 align=center><div id="cell11"></div></td>
		<td width=20 align=center><div id="cell12"></div></td>
		<td width=20 align=center><div id="cell13"></div></td>
	</tr>
	<tr height=20>
		<td width=20 align=center><div id="cell21"></div></td>
		<td width=20 align=center><div id="cell22"></div></td>
		<td width=20 align=center><div id="cell23"></div></td>
	</tr>
	<tr height=20>
		<td width=20 align=center><div id="cell31"></div></td>
		<td width=20 align=center><div id="cell32"></div></td>
		<td width=20 align=center><div id="cell33"></div></td>
	</tr>
</table>
<button onclick=calculate()>Roll</button>
<script>
function calculate(){
let x = Math.floor((Math.random() * 6) + 1);

document.getElementById("cell11").innerHTML = "";
document.getElementById("cell12").innerHTML = "";
document.getElementById("cell13").innerHTML = "";
document.getElementById("cell21").innerHTML = "";
document.getElementById("cell22").innerHTML = "";
document.getElementById("cell23").innerHTML = "";
document.getElementById("cell31").innerHTML = "";
document.getElementById("cell32").innerHTML = "";
document.getElementById("cell33").innerHTML = "";

if (x==2 || x==3 || x==4 || x==5 || x==6){
document.getElementById("cell11").innerHTML = "<img src=dice.png>";
}

if (x==4 || x==5 || x==6){
document.getElementById("cell13").innerHTML = "<img src=dice.png>";
}

if (x==6){
document.getElementById("cell21").innerHTML = "<img src=dice.png>";
}

if (x==1 || x==3 || x==5){
document.getElementById("cell22").innerHTML = "<img src=dice.png>";
}

if (x==6){
document.getElementById("cell23").innerHTML = "<img src=dice.png>";
}

if (x==4 || x==5 || x==6){
document.getElementById("cell31").innerHTML = "<img src=dice.png>";
}

if (x==2 || x==3 || x==4 || x==5 || x==6){
document.getElementById("cell33").innerHTML = "<img src=dice.png>";
}

}
</script>

</body>
</html>