Introduction
Hello, fellow developers! Today, I’m excited to share a project I recently completed: a Dice Roll Simulator. This project is a fun and interactive way to simulate the rolling of a dice, making it a great way to practice JavaScript, especially in the areas of DOM manipulation and event handling. Whether you’re looking to build something playful or need a simple dice roll feature for a game, this project is a perfect start.
Project Overview
The Dice Roll Simulator allows users to simulate the roll of a six-sided dice with a simple click of a button. The result is displayed in a visually appealing way, mimicking the appearance of a real dice. This project is perfect for developers who want to enhance their skills in building interactive web applications while working with animations and event listeners.
Features
Dice Roll Simulation: Users can roll a virtual dice by clicking a button, and the result is displayed instantly.
Roll History: The application keeps a record of all previous rolls, allowing users to see the outcomes of their past rolls.
Animation: The dice roll is accompanied by a smooth rotation animation to add realism to the simulation.
Responsive Design: The interface is designed to work well across different devices and screen sizes.
Technologies Used
HTML: Used for structuring the content on the webpage.
CSS: Applied for styling the webpage and adding animations.
JavaScript: Implemented for handling the dice roll logic, updating the DOM, and managing animations.
Project Structure
Here’s a quick look at the project structure:
├── index.html
├── style.css
└── script.js
index.html: Contains the HTML structure of the webpage.
style.css: Holds the CSS styles, including animation and responsive design rules.
script.js: Manages the dynamic aspects of the page using JavaScript.
Installation
To get started with the project, follow these steps:
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Dice-Roll-Simulator.git
Open the project directory:
cd Dice-Roll-Simulator
Run the project:
You can either run it on a local server or simply open the index.html file in a web browser.
Usage
Open the website in a web browser.
Click the “Roll Dice” button to simulate a dice roll.
View the result on the dice and check the roll history displayed below.
Code Explanation
HTML
The index.html file contains the structure of the webpage, including the dice display, the roll button, and the roll history list. Below is a snippet of the HTML code:
<html lang=“en”>
<head>
<meta charset=“UTF-8” />
<meta http-equiv=“X-UA-Compatible” content=“IE=edge” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<title>Dice Roll Simulator</title>
<script src=“script.js” defer></script>
<link rel=“stylesheet” href=“style.css” />
</head>
<body>
<h1>Dice Roll Simulator</h1>
<div class=“dice” id=“dice”>⚄</div>
<button id=“roll-button”>Roll Dice</button>
<div class=“roll-list”>
<ul id=“roll-history”></ul>
</div>
<div class=“footer”>
<p>Made With ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
CSS
The style.css file contains styles that ensure the webpage is visually appealing and includes animations for the dice roll. Here are some key styles:
font-family: “Open Sans”, sans-serif;
text-align: center;
margin: 0;
}
h1 {
font-size: 3rem;
margin-top: 2rem;
}
.dice {
font-size: 7rem;
margin: 5px;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.roll-animation {
animation-name: roll;
}
@keyframes roll {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
100% {
transform: rotateY(720deg) rotateX(720deg);
}
}
button {
background-color: #47a5c4;
color: white;
font-size: 1.5rem;
padding: 1rem 2rem;
border: none;
border-radius: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2e8baf;
}
.roll-list {
min-height: 270px;
}
ul {
list-style: none;
padding: 0;
max-width: 600px;
margin: 2rem auto;
}
li {
font-size: 1.5rem;
padding: 0.5rem;
margin: 0.5rem;
background-color: #f2f2f2;
border-radius: 0.5rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
}
li span {
font-size: 3rem;
margin-right: 1rem;
}
.footer {
margin: 50px;
}
JavaScript
The script.js file manages the dice roll logic, updates the roll history, and handles the dice roll animation. Below is a snippet of the JavaScript code:
const diceEl = document.getElementById(“dice“);
const rollHistoryEl = document.getElementById(“roll-history“);
let historyList = [];
function rollDice() {
const rollResult = Math.floor(Math.random() * 6) + 1;
const diceFace = getDiceFace(rollResult);
diceEl.innerHTML = diceFace;
historyList.push(rollResult);
updateRollHistory();
}
function updateRollHistory() {
rollHistoryEl.innerHTML = “”;
for (let i = 0; i < historyList.length; i++) {
const listItem = document.createElement(“li“);
listItem.innerHTML = `Roll ${i + 1}: <span>${getDiceFace(historyList[i])}</span>`;
rollHistoryEl.appendChild(listItem);
}
}
function getDiceFace(rollResult) {
switch (rollResult) {
case 1:
return “⚀“;
case 2:
return “⚁“;
case 3:
return “⚂“;
case 4:
return “⚃“;
case 5:
return “⚄“;
case 6:
return “⚅“;
default:
return “”;
}
}
buttonEl.addEventListener(“click“, () => {
diceEl.classList.add(“roll-animation“);
setTimeout(() => {
diceEl.classList.remove(“roll-animation“);
rollDice();
}, 1000);
});
Live Demo
You can check out the live demo of the Dice Roll Simulator here.
Conclusion
Building this Dice Roll Simulator was a fun and rewarding experience that allowed me to experiment with JavaScript animations and DOM manipulation. I hope this project inspires you to create your own interactive applications. Feel free to explore the code, customize it, and use it in your own projects. Happy coding!
Credits
This project was inspired by the need for a simple and interactive dice roll tool.
Author
Abhishek Gurjar
