update roll dice simulator

sahandghavidel · sahandghavidel · commit 6d61e9ce23b3 · 2023-03-29T13:19:23.000+07:00
diff --git a/projects/dice-roll-simulator/index.html b/projects/dice-roll-simulator/index.html
@@ -1,18 +1,20 @@
 <!DOCTYPE html>
-<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>
     <h1>Dice Roll Simulator</h1>
-    <div id="dice" class="dice">⚀</div>
+    <div class="dice" id="dice">&#9860;</div>
     <button id="roll-button">Roll Dice</button>
     <ul id="roll-history">
-      <li>Roll 1: <span>&#9856;</span></li>
-      <li>Roll 2: <span>&#9856;</span></li>
+      <!-- <li>Roll 1: <span>&#9856;</span></li>
+      <li>Roll 2: <span>&#9860;</span></li> -->
     </ul>
-
-    <script src="dice-roll.js"></script>
+    <script src="index.js"></script>
   </body>
 </html>
diff --git a/projects/dice-roll-simulator/index.js b/projects/dice-roll-simulator/index.js
@@ -1,50 +1,53 @@
-const diceElement = document.getElementById("dice");
-const rollButton = document.getElementById("roll-button");
-const rollHistory = document.getElementById("roll-history");
+const buttonEl = document.getElementById("roll-button");
+
+const diceEl = document.getElementById("dice");
+
+const rollHistoryEl = document.getElementById("roll-history");
+
 let historyList = [];
 
 function rollDice() {
   const rollResult = Math.floor(Math.random() * 6) + 1;
   const diceFace = getDiceFace(rollResult);
-  diceElement.textContent = diceFace;
+  diceEl.innerHTML = diceFace;
   historyList.push(rollResult);
   updateRollHistory();
 }
 
+function updateRollHistory() {
+  rollHistoryEl.innerHTML = "";
+  for (let i = 0; i < historyList.length; i++) {
+    const listItem = document.createElement("li");
+    listItem.innerHTML = `Roll ${i + 1}: <span>${getDiceFace(
+      historyList[i]
+    )}</span>`;
+    rollHistoryEl.appendChild(listItem);
+  }
+}
+
 function getDiceFace(rollResult) {
   switch (rollResult) {
     case 1:
-      return "⚀";
+      return "&#9856;";
     case 2:
-      return "⚁";
+      return "&#9857;";
     case 3:
-      return "⚂";
+      return "&#9858;";
     case 4:
-      return "⚃";
+      return "&#9859;";
     case 5:
-      return "⚄";
+      return "&#9860;";
     case 6:
-      return "⚅";
+      return "&#9861;";
     default:
       return "";
   }
 }
 
-function updateRollHistory() {
-  rollHistory.innerHTML = "";
-  for (let i = 0; i < historyList.length; i++) {
-    const listItem = document.createElement("li");
-    listItem.innerHTML = `Roll ${i + 1}: <span>${getDiceFace(
-      historyList[i]
-    )}</span>`;
-    rollHistory.appendChild(listItem);
-  }
-}
-
-rollButton.addEventListener("click", () => {
-  diceElement.classList.add("roll-animation");
+buttonEl.addEventListener("click", () => {
+  diceEl.classList.add("roll-animation");
   setTimeout(() => {
-    diceElement.classList.remove("roll-animation");
+    diceEl.classList.remove("roll-animation");
     rollDice();
   }, 1000);
 });
diff --git a/projects/dice-roll-simulator/style.css b/projects/dice-roll-simulator/style.css
@@ -24,6 +24,7 @@ h1 {
   0% {
     transform: rotateY(0deg) rotateX(0deg);
   }
+
   100% {
     transform: rotateY(720deg) rotateX(720deg);
   }
@@ -33,9 +34,8 @@ button {
   background-color: #47a5c4;
   color: white;
   font-size: 1.5rem;
-  border: none;
   padding: 1rem 2rem;
-  margin: 5px;
+  border: none;
   border-radius: 1rem;
   cursor: pointer;
   transition: background-color 0.3s ease;
@@ -48,9 +48,8 @@ button:hover {
 ul {
   list-style: none;
   padding: 0;
-  margin: 2rem;
   max-width: 600px;
-  margin: 0 auto;
+  margin: 2rem auto;
 }
 
 li {

-Original file line number
+Diff line change
@@ @@ -1,18 +1,20 @@ @@
+>
 -<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 Simulatortitle>
     <link rel="stylesheet" href="style.css" />
   head>
   <body>
     <h1>Dice Roll Simulatorh1>
 -    <div id="dice" class="dice">⚀div>
 +    <div class="dice" id="dice">⚄div>
     <button id="roll-button">Roll Dicebutton>
     <ul id="roll-history">
 -      <li>Roll 1: <span>⚀span>li>
 -      <li>Roll 2: <span>&#9856;span>li>
 +      <!-- <li>Roll 1: ⚀
 +      Roll 2: &#9860;> -->
     ul>
+-
 -    <script src="dice-roll.js">script>
 +    <script src="index.js">script>
   body>
 html>