Table of Contents
Introduction: For Dice Roller Tool using Javascript
Welcome to the world of dice rolling! In this tutorial, we’ll leverage the power of JavaScript to build a simple yet engaging Dice Roller App. By the end of this tutorial, you’ll have a fully functional web-based dice roller tool that generates random dice rolls at the click of a button.
Rolling dice is a fundamental part of many games and applications. Building a Dice Roller Tool using JavaScript not only introduces you to core programming concepts but also adds a fun element to your coding journey. In this tutorial, we’ll walk through the steps to create your own Dice Roller Tool from scratch.
Steps to Create a Dice Roller Tool:
Please follow these steps to Create a Dice Roller Tool using Javascript –
Step 1: Setting up the Project:
Start by creating a new folder and assembling three essential files: index.html, style.css, and script.js. The HTML file will establish the project’s structure, the CSS file will add style, and the JavaScript file will breathe life into the dice roller. This structure forms the foundation for our dice roller.
Step 2: Coding the HTML Structure:
In the index.html file, add the provided HTML code. In our case, the layout consists of a title, a dice display, a ‘Roll’ button, and a history list. The history list will exhibit the results of the dice rolls. The structure establishes the groundwork for the dice roller.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dice Roll Simulator</title>
</head>
<body>
<div class="app-wrapper">
<h1 class="app-title">Dice Roller App</h1>
<div class="dice-container">⚄</div>
<button class="roll-button">Roll</button>
<ul class="history-list"> </ul>
</div>
</body>
</html>Step 3: Styling with CSS:
Next, copy the CSS code into the style.css file. The styles provided will render an attractive interface, enhancing the user experience. Customize the layout using styles that align with your preferences. These styles are instrumental in creating an engaging and user-friendly design.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
ul {
list-style: none;
}
body {
background: #000000;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #434343, #000000);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #434343, #000000);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
display: flex;
align-items: center;
justify-content: center;
margin-top: 100px;
}
.app-wrapper {
width: 400px;
background: #3E5151;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #DECBA4, #3E5151);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #DECBA4, #3E5151);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: black;
text-align: center;
padding: 20px;
border-radius: 10px;
color: black;
}
.app-title {
font-size: 32px;
font-weight: 600;
}
.dice-container {
font-size: 100px;
margin: -20px 0;
}
.dice-rolling-animation {
animation: rolling 1s forwards;
}
@keyframes rolling {
0% {
transform: rotateZ(0) rotateY(0);
}
100% {
transform: rotateZ(720deg) rotateY(720deg);
}
}
.roll-button {
padding: 8px 20px;
font-size: 18px;
border-radius: 10px;
border: none;
font-weight: 500;
margin-bottom: 20px;
color: white;
background-color: black;
cursor: pointer;
}
.roll-button:active {
transform: scale(0.95);
}
.history-item {
display: flex;
justify-content: space-between;
align-items: center;
background: #E6DADA;
margin: 15px 0;
padding: 0 10px;
border-radius: 10px;
outline: none;
border: none;
cursor: pointer;
}
.history-item span {
font-size: 30px;
}Step 4: Adding Functionality with JavaScript:
Now, insert the JavaScript code into the script.js file. This JavaScript file encompasses the logic for rolling the dice and displaying the outcomes. It utilizes event listeners and DOM manipulation to create an animated roll and showcase the rolled dice face. Moreover, it maintains a history of dice rolls dynamically.
const rollButtonElement = document.querySelector(".roll-button");
const diceElement = document.querySelector(".dice-container");
const rollHistoryElement = document.querySelector(".history-list")
let count = 1;
rollButtonElement.addEventListener("click", () => {
diceElement.classList.add("dice-rolling-animation");
setTimeout(() => {
diceElement.classList.remove("dice-rolling-animation");
rollDiceFunction();
}, 1000);
})
function rollDiceFunction() {
const rollResult = Math.ceil(Math.random() * 6);
const diceFace = getDiceFaceFunction(rollResult);
diceElement.innerHTML = diceFace;
const liElement = document.createElement("li");
liElement.classList.add("history-item");
liElement.innerHTML = `Roll ${count}: <span>${diceFace}</span>`;
rollHistoryElement.appendChild(liElement);
count++;
}
function getDiceFaceFunction(rollResult) {
switch (rollResult) {
case 1:
return "⚀";
case 2:
return "⚁";
case 3:
return "⚂";
case 4:
return "⚃";
case 5:
return "⚄";
case 6:
return "⚅";
}
}Rolling the Dice
Once everything is set up, you can roll the dice by clicking the “Roll” button. The app will simulate the rolling animation and display the rolled number on the dice face. Additionally, each roll will be recorded in the history list below.
Conclusion & Final Words:
Congratulations! You’ve successfully crafted a Dice Roller Tool using JavaScript, opening doors to an array of possibilities for your projects. Don’t hesitate to experiment with the code and tailor it to suit your preferences or specific project needs.
Enjoy rolling the dice and exploring the intricacies of JavaScript while creating engaging and interactive applications! Remember, practice and experimentation are key to mastering programming concepts. Embrace the process, explore diverse functionalities, and watch your coding prowess flourish.
For your benefit, the total source code of this instructional exercise is accessible for download by clicking the Download Code button. Moreover, experience a live exhibit of these Dice Roller Tool using Javascript by getting to the View Live button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in HTML & CSS, we recommend recreating other useful website elements such as Card Design, Registration Forms, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
