Add files via upload

Shiza8980 · Aug 2, 2023 · d37a261 · d37a261
1 parent 4005f9f
commit d37a261
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 0 deletions.
diff --git a/images/dice1.png b/images/dice1.png
diff --git a/images/dice2.png b/images/dice2.png
diff --git a/images/dice3.png b/images/dice3.png
diff --git a/images/dice4.png b/images/dice4.png
diff --git a/images/dice5.png b/images/dice5.png
diff --git a/images/dice6.png b/images/dice6.png
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html> 
+<html lang="en" dir="ltr"> 
+
+<head> 
+  <meta charset="utf-8"> 
+  <title>The Dice Game</title> 
+  <link rel="stylesheet" href="styles.css"> 
+  <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet"> 
+
+</head> 
+
+<body> 
+
+  <div class="container"> 
+    <h1 id="resultText">Refresh Me!</h1>
+
+    <div class="dice"> 
+      <p>Player 1</p> 
+      <img class="img1" src="images/dice6.png"> 
+    </div> 
+
+    <div class="dice"> 
+      <p>Player 2</p> 
+      <img class="img2" src="images/dice6.png"> 
+    </div> 
+
+  </div> 
+
+<footer> 
+  www 🎲 Shiza 🎲 com 
+</footer> 
+<script src="index.js"></script> 
+
+</html>
+
diff --git a/index.js b/index.js
@@ -0,0 +1,46 @@
+
+    // Function to get a random number between min (inclusive) and max (inclusive)
+function getRandomDice() { 
+  var randomNum = Math.floor(Math.random() * 6) + 1; 
+  return "./images/dice" + randomNum + ".png"; 
+} 
+
+var dice1 = document.querySelector(".img1"); 
+var dice2 = document.querySelector(".img2"); 
+
+dice1.src = getRandomDice(); 
+dice2.src = getRandomDice(); 
+
+// Function to get the dice number from the dice image URL
+function getDiceNumberFromURL(url) {
+  const regex = /dice(\d+)\.png/;
+  const match = url.match(regex);
+  if (match) {
+    return parseInt(match[1]);
+  }
+  return null;
+}
+
+// Function to determine the winner or draw
+function determineWinner() {
+  const dice1Value = getDiceNumberFromURL(dice1.src);
+  const dice2Value = getDiceNumberFromURL(dice2.src);
+
+  if (dice1Value > dice2Value) {
+    return "Player 1 Wins!🚩";
+  } else if (dice2Value > dice1Value) {
+    return "🚩Player 2 Wins!";
+  } else {
+    return "Draw!";
+  }
+}
+
+// Event listener to roll dice when the page is loaded (refreshed)
+window.addEventListener('load', function() {
+  dice1.src = getRandomDice();
+  dice2.src = getRandomDice();
+
+  // Determine the winner and update the <h1> with the winner message
+  winnerMessage = determineWinner();
+  document.getElementById('resultText').innerHTML = winnerMessage;
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,41 @@
+.container { 
+    width: 70%; 
+    margin: auto; 
+    text-align: center; 
+  } 
+
+  .dice { 
+    text-align: center; 
+    display: inline-block; 
+
+  } 
+
+  body { 
+    background-color: #393E46; 
+  } 
+
+  h1 { 
+    margin: 30px; 
+    font-family: 'Lobster', cursive; 
+    text-shadow: 5px 0 #232931; 
+    font-size: 6rem; 
+    color: #4ECCA3; 
+  } 
+
+  p { 
+    font-size: 2rem; 
+    color: #4ECCA3; 
+    font-family: 'Indie Flower', cursive; 
+  } 
+
+  img { 
+    width: 60%; 
+  } 
+
+  footer { 
+    margin-top: 5%; 
+    color: #EEEEEE; 
+    text-align: center; 
+    font-family: 'Indie Flower', cursive; 
+
+  }