Rolling diceCreate a rolling dice using HTML, CSS and JavaScript

Are you looking for a fun way to simulate dice rolls for games or decision-making? I’ve created a simple, interactive tool using HTML, CSS, and JavaScript that lets you roll a dice with the click of a button. It’s a quick and engaging way to bring a touch of randomness to your activities!

How Does This Tool Enhance Your Dice Rolling Experience?

Easy to Use: Roll the dice with just one click.
Random and Realistic: Simulates real dice rolls for accurate results.
Clear Visuals: Shows the dice face for easy understanding.
Fun and Handy: Great for games or quick decisions anytime.
Works Anywhere: Use it on any device without needing a physical dice.

Technical Stack

HTML: Creates the basic structure of the dice rolling tool.
CSS: Adds colors, styles, and makes the tool visually appealing.
JavaScript: Powers the dice roll feature and handles button clicks.

Code Architecture Breakdown

HTML Code-:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rolling Dice</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Roll the Dice</h1>
        <div class="dice" id="dice">1</div>
        <button id="rollBtn">Roll Dice</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Code-:

/* General Styles */
body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(to bottom right, #4f75fe, #00fecb);
    color: #333;
}

.container {
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #007BFF;
}

/* Dice Styles */
.dice {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    font-weight: bold;
    border: 3px solid #000;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    margin: 20px auto;
    transition: transform 0.3s ease, background-color 0.3s;
}

.dice:hover {
    background-color: #f9f9f9;
}

/* Button Styles */
button {
    padding: 10px 30px;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

button:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

JavaScript Code-:

// Function to roll the dice
function rollDice() {
  const dice = document.getElementById("dice");
  const randomNumber = Math.floor(Math.random() * 6) + 1;

  // Update dice value with animation
  dice.style.transform = "rotate(0deg)";
  setTimeout(() => {
    dice.textContent = randomNumber;
    dice.style.transform = "rotate(360deg)";
  }, 50);
}

// Attach event listener to the button
document.getElementById("rollBtn").addEventListener("click", rollDice);

Result

Examples in Real Life

Board Games: Use this tool to replace physical dice in games like Monopoly or Ludo.
Decision-Making: Roll the dice to make quick decisions, like choosing what to eat or where to go.
Fun Activities: Add excitement to party games or simple group activities with a digital dice.