Introduction:
Dice games have been a source of entertainment for centuries, and now you can bring the excitement of rolling dice to the digital world. In this tutorial, we’ll create a simple web app that simulates rolling dice using HTML, CSS, and JavaScript. This project will not only help you learn the basics of web development but also provide a fun and interactive experience for users.
Things You Will Learn:
By the end of this tutorial, you will have a better understanding of the following:
- HTML structure for building user interfaces.
- CSS styling to make your web app visually appealing.
- JavaScript for adding functionality to your app.
- How to handle user interactions with event listeners.
- Simulating dice rolling using intervals
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading a blog post you can check out the video down below. Also, subscribe to my YouTube channel where I post new tutorials every alternate day.
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 3 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. And Finally, Javascript adds functionality to our project. The files used are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Multiple Dice Roller</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Multiple Dice Roller</h1>
<div class="inputs">
<div class="input-con">
<input type="number" id="numDice" min="1" value="1" />
<label for="numDice">Number of Dice</label>
</div>
<div class="input-con">
<input type="number" id="numSides" min="2" value="6" />
<label for="numSides">Number Of Sides</label>
</div>
</div>
<button id="startStopButton">Roll Dice</button>
<div id="output"></div>
<div id="total"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #39b55c;
}
.container {
width: min(90%, 500px);
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 5em 3em;
border-radius: 0.5em;
}
h1 {
text-align: center;
}
.inputs {
display: grid;
grid-template-columns: 1fr 1fr;
}
.input-con {
text-align: center;
}
.input-con input {
font-size: 1em;
font-weight: 600;
display: block;
width: 80px;
padding: 1em;
border: 1px solid #000000;
border-radius: 0.5em;
margin: 2em auto 0.5em auto;
}
.input-con label {
font-weight: 500;
}
.container button {
display: block;
background-color: #39b55c;
padding: 1em 2em;
border: none;
outline: none;
margin: 2em auto;
border-radius: 0.5em;
font-size: 1em;
cursor: pointer;
}
#output,
#total {
text-align: center;
}
#total {
font-size: 1.4em;
font-weight: 600;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Initialize variables for dice rolling
//Indicates if dice are currently rolling
let rolling = false;
//Stores the interval ID for rolling updates
let intervalId;
//Get references to HTML elements
const numDiceInput = document.getElementById("numDice");
const numSidesInput = document.getElementById("numSides");
const startStopButton = document.getElementById("startStopButton");
const outputDiv = document.getElementById("output");
const totalDiv = document.getElementById("total");
//Event listener for "Roll Dice" button
startStopButton.addEventListener("click", () => {
if (rolling) {
//If dice are rolling, stop the rolling and update the button text
clearInterval(intervalId);
startStopButton.textContent = "Roll Dice";
rolling = false;
} else {
//If dice are not rolling, start rolling and update the button text
startRollingDice();
startStopButton.textContent = "Stop Rolling";
rolling = true;
}
});
//Function to start rolling the dice
function startRollingDice() {
const numDice = parseInt(numDiceInput.value);
const numSides = parseInt(numSidesInput.value);
//Set up an interval to simulate dice rolls
intervalId = setInterval(() => {
//Stores individual dice roll results
const results = [];
//Stores total of all dice rolls
let total = 0;
//Simulate rolling each die and calculate the total
for (let i = 0; i < numDice; i++) {
const roll = Math.floor(Math.random() * numSides) + 1;
results.push(`Die ${i + 1}: ${roll}`);
total += roll;
}
//Display the results and total
outputDiv.textContent = results.join(",");
totalDiv.textContent = `Total: ${total}`;
}, 100);
}
Conclusion:
In this tutorial, we’ve created a simple dice roller web app using HTML, CSS, and JavaScript. You’ve learned how to structure your project, style it with CSS, and add interactive functionality to it with JavaScript. By following this tutorial, you can create your own web apps and games, providing an engaging experience for users. Feel free to expand on this project, add more features, and make it your own. Happy coding!
