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.

HTML

<!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">&#9860;</div>
        <button class="rollButton">Roll</button>
        <ul class="rollHistory"> </ul>
    </div>

    <script src="index.js"></script>
</body>

</html>

CSS

@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;
}

JavaScript

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 "&#9856";
        case 2:
            return "&#9857";
        case 3:
            return "&#9858";
        case 4:
            return "&#9859";
        case 5:
            return "&#9860";
        case 6:
            return "&#9861";
    }
}

You have to wait 15 seconds.

Generating Download Link...

Dice Roll Simulator Using HTML, CSS & JavaScript

Preview

Dice Roll Simulator [Source Code]

Post a Comment

Animated Cursor Using HTML, CSS & JavaScript

Question and Answer Section Using HTML, CSS & JavaScript

Contact Form