Merge pull request #18 from kaustubhudavant-hash/dice_rolling_simulation

devmalik7 · web-flow · commit 6693e3635547 · 2025-10-07T01:18:56.000+05:30
Dice rolling simulator implemented.
diff --git a/Javascript/Dice Rolling Simulator/Dice.mp4 b/Javascript/Dice Rolling Simulator/Dice.mp4
diff --git a/Javascript/Dice Rolling Simulator/README.md b/Javascript/Dice Rolling Simulator/README.md
@@ -0,0 +1,9 @@
+# Project Title
+
+## Introduction
+This is a Dice Rolling Simulator which you can use while playing board games when physical dice is unavailable.
+
+## Steps to run the code:
+1. Download the given code.
+2. If you are in Visual Studio Code, you can use the Go-live extension to deploy this webpage locally.
+3. Now, you are ready to use this on that local device.
diff --git a/Javascript/Dice Rolling Simulator/index.html b/Javascript/Dice Rolling Simulator/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .dice {
+            text-align: center;
+            margin: auto;
+        }
+        .main {
+            max-width: 400px;
+        }
+        #rolling-dice {
+            width: 200px;
+        }
+        #rolling-dice video {
+            width: 200px;
+        } 
+        #button {
+            width: 200px;
+            cursor: pointer;
+        }
+        #output-text {
+            width: 200px;
+            color: red;
+        }
+        footer {
+            position: fixed;
+            bottom: 0;
+        }
+    </style>
+
+</head>
+<body>
+    <div>
+        <h1>Dice Rolling Simulator</h1>
+        <div class="dice">
+
+        </div>
+        <div class="main">
+            <input type="button" value="Roll" id="button">
+            <br>
+            <div id="rolling-dice">
+                <video 
+  src="./Dice.mp4" loop
+  type="video/mp4" muted autoplay
+></video>
+            </div>
+            
+            <h2>Output: <span id="output-text"></span></h2>
+        </div>
+        
+    </div>
+
+<footer>Developed by Contributor Kaustubh</footer>
+
+<script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Javascript/Dice Rolling Simulator/script.js b/Javascript/Dice Rolling Simulator/script.js
@@ -0,0 +1,33 @@
+// input element displaying button is referenced in the 'button' variable.
+const button = document.querySelector('#button');
+// video element displaying animation is referenced in the 'animation' variable.
+const animation = document.getElementById('rolling-dice');
+// span element displaying the output is referenced in the 'output' variable.
+const output = document.getElementById('output-text');
+
+// function 'getRandomIntegerInclusive' generates a number between 1 to 6.
+function getRandomIntegerInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// When 'Roll' button is clicked then below action is carried out.
+button.addEventListener('click', function() {
+// video containing rolling-dice animation is hidden.
+    animation.style.visibility = 'hidden';
+    // adding a slight delay for effective visual effect.
+    setTimeout(() => {
+        // we will generate a random number by calling 'getRandomIntegerInclusive' function.    
+        let randomInteger = getRandomIntegerInclusive(1, 6);
+        console.log(randomInteger);
+        // Now, displaying the output number in the span element 
+        output.textContent = randomInteger;
+    
+        // Now, displaying the dice rolling animation again.
+        if(output.textContent != "") {
+            animation.style.visibility = 'visible';
+        }
+    }, 500);
+
+});
