A free weekend as a developer and nothing else to do apart from code. I need a time-out from the screen and into the real world. Yahtzee it is. After a 30 minutes search, I found out the die was missing. So I spent my break coding a Dice app, as a good developer I might add.

The Idea

The main idea is to have a responsive, well-styled app with visual dice rolling. As simple as that. If you are familiar with Javascript, CSS, and HTML, it should be a 30 minutes ride for you.

The components are just two:

• A card that contains the animation area and a button for rolling the die.
• The rest of the body is just a paragraph explaining what the app does.

The project layout is shown below.

HTML

Inside the Html, we are going to link the stylesheet and the javascript files. Above the body.

// Above the body tag
<link rel="stylesheet" href="style.css">

//At the foot of the body tag
<script src="index.js"></script>

We then create the card div inside the body and the rest of the body.

At this point, you should go online and search for free images of dice to use in the app. As you download or design the images, keep track of their names. Make sure you have six images for each side of the die. Add these images to a folder inside your project.

The CSS is your playground. Style to your liking

Javascript

We need to access the DOM( Document Object Model) and assign values to the button and image tags to manipulate them. Next, we create a dictionary with the numerals 1 through 6 with the numerals as the keys and names of the images corresponding to the numbers as values.

Our main idea is to shuffle the numerals which represent the faces of the die and show the random number. To do that, we need an array of the numerals. To create the roll animation, we will shuffle the array and show each image that corresponds to the numeral in the array until the last element in the array is our 'roll'.

And that ladies and gentlemen, marks the end of our tutorial. I hope that all was clear. English being my third language, I am aware that I may not be as proficient as your regular blogger.

Asante Sana for Reading my first Blog!!