- A computer
- A code editor preferably Sublime text
- A web browser to visualize your code
We need to first create the HTML code, which is the framework of anything we want to build. There is a container div that houses all the other HTML code. This is a form of wrapper. The next thing is to create the dice divs. This is where the rolled numbers will be displayed.
We need to create a button that will trigger the dice to be rolled. The button tag caters for this. There is also an h2 tag that will display the result of the number rolled.
You can see the visual representation of the HTML code we just wrote. It is not looking good, so let’s beautify it with CSS.
We added a series of CSS properties and values to the HTML classes and ids to make the dice game more appealing to the end-user.
The container housing all the elements were given a display value of flex and its content given a value of space-around. This is to ensure the space is evenly distributed between the dice sides and the roll dice button.
The main tag was also turned to flex and aligned in the center of the container.
The h2 tag that will display the result also got some properties to enhance it. The text is aligned center, and positional properties such as top, left, and transform were attached to it.
The next thing we look at is how the dice sides look. The background color of Cyan was added, and a border, padding, and margin were added too. The roll dice button got its adjustment too.You can see how the code is rendered in the web browser now. It is now looking good.
We created a DOMContentLoaded event listener for the window and put all our functions inside it. This fires all the functions when the initial HTML document has been completely loaded and parsed. It doesn’t wait for the CSS stylesheets to load.
The first variable was declared using the const keyword inside the DOMContentLoaded event listener.
We went ahead to create the dice function. Several variables were declared inside the dice function.
- const firstSide = document.getElementById(‘side1’); – This selects the side1 div in the html page.
- const secondSide = document.getElementById(‘side2’); – This selects the side2 div in the html page.
- const result = document.getElementById(‘result’); – This selects the result div in the html page.
The next thing is selecting the numbers that will be generated on each of the dice sides. We use the Math.random function. The Math.random function returns a floating-point number in the range of 0 to less than 1. Since the rolled number ranges from 0 to 6, we then multiply it by 6 and add 1 to it. This means we will have a floating number in the range of 0 to 6. This floating number needs to be rounded up, and that is why Math.floor function was employed. Math.floor is used to wrap the Math.random function. This rounds the floating number downward to the nearest integer. This means 6.5 will be rendered as 6.
The next thing is to declare a total variable. It adds the result of side 1 and side 2.
The contents side1 and side2 were then set to the variables firstSide and secondSide. These were made possible with the use of innerHTML.
We then set the return div to display the rolled number total and some texts.
There may be a situation where the user got a similar number on both sides. This is why we used the if statement. If the result in side1 is strictly equal to that if side2, then the user got a freeroll.
That wraps up the dice function.
The next thing is telling the code what to do and how to act.
button.addEventListener(‘click’, dice); tells the Roll dice button to run the dice function whenever it is clicked.
You can check the code out on Codepen