Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Dice Roll Simulator" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Dice Roll Simulator" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Dice Roll Simulator [Source Code]
To get the following HTML, CSS & JS code for the Dice Roll Simulator project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
<!DOCTYPE html> <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> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <h1>Dice Roll Simulator</h1> <div class="dice">⚄</div> <button class="rollButton">Roll</button> <ul class="rollHistory"> </ul> </div> <script src="index.js"></script> </body> </html>
@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-color: black; display: flex; align-items: center; justify-content: center; margin-top: 100px; } .wrapper { width: 400px; background-color: greenyellow; color: black; text-align: center; padding: 20px; border-radius: 10px; color: black; } h1 { font-size: 32px; font-weight: 600; } .dice { font-size: 100px; margin: -20px 0; } .dice-rolling { animation: rolling 1s forwards; } @keyframes rolling { 0% { transform: rotateZ(0) rotateY(0); } 100% { transform: rotateZ(720deg) rotateY(720deg); } } .rollButton { padding: 8px 20px; font-size: 18px; border-radius: 10px; border: none; font-weight: 500; margin-bottom: 20px; color: white; background-color: black; cursor: pointer; } .rollButton:active { transform: scale(0.95); } li { display: flex; justify-content: space-between; align-items: center; background-color: white; margin: 15px 0; padding: 0 10px; border-radius: 10px; box-shadow: 0 3px rgba(0, 0, 0, 0.7), -3px -3px 10px rgba(0, 0, 0, 0.3), 3px 0 10px rgba(0, 0, 0, 0.3); cursor: pointer; } span { font-size: 30px; }
const rollButtonEl = document.querySelector(".rollButton"); const diceEl = document.querySelector(".dice"); const rollHistoryEl = document.querySelector(".rollHistory") let count = 1; rollButtonEl.addEventListener("click",()=>{ diceEl.classList.add("dice-rolling"); setTimeout(() => { diceEl.classList.remove("dice-rolling"); rollDice(); }, 1000); }) function rollDice(){ const rollResult = Math.ceil(Math.random()*6); const diceFace = getDiceFace(rollResult); diceEl.innerHTML = diceFace; const liEl = document.createElement("li"); liEl.innerHTML = `Roll ${count}: <span>${diceFace}</span>`; rollHistoryEl.appendChild(liEl); count++; } function getDiceFace(rollResult){ switch(rollResult){ case 1: return "⚀"; case 2: return "⚁"; case 3: return "⚂"; case 4: return "⚃"; case 5: return "⚄"; case 6: return "⚅"; } }