## 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: ``` Dice-Roll-Simulator/ ├── 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: 1. **Clone the repository**: ```bash git clone https://github.com/abhishekgurjar-in/Dice-Roll-Simulator.git ``` 2. **Open the project directory**: ```bash cd Dice-Roll-Simulator ``` 3. **Run the project**: - You can either run it on a local server or simply open the `index.html` file in a web browser. ## Usage 1. **Open the website** in a web browser. 2. **Click the "Roll Dice" button** to simulate a dice roll. 3. **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 Dice Roll Simulator

Dice Roll Simulator

⚄

``` ### 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: ```css body { 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: ```javascript const buttonEl = document.getElementById("roll-button"); 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}: ${getDiceFace(historyList[i])}`; 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](https://abhishekgurjar-in.github.io/Dice-Roll-Simulator/). ## 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** - [GitHub Profile](https://github.com/abhishekgurjar-in)

dicerollsimulator

Build a Dice Roll Simulator Website

Join Our Newsletter. No Spam, Only the good stuff.