From 77d28581f3892d6e6eb1f31d3824c0269eeeeb15 Mon Sep 17 00:00:00 2001
From: rekha0suthar <rekha0suthar@gmail.com>
Date: Mon, 22 Jul 2024 10:20:58 +0530
Subject: [PATCH] images not showing when clicking on stop button issue fixed

---
 script.js | 147 ++++++++++++++++++++++++++----------------------------
 style.css | 108 ++++++++++++++++++++++-----------------
 2 files changed, 133 insertions(+), 122 deletions(-)

diff --git a/script.js b/script.js
index 9383819..7153bc4 100644
--- a/script.js
+++ b/script.js
@@ -1,96 +1,93 @@
+let value1 = document.getElementById('value1');
+let value2 = document.getElementById('value2');
+let value3 = document.getElementById('value3');
 
+let inpSpeed = document.getElementById('inpSpeed');
+let btnStop = document.getElementById('btnStop');
+let btnStart = document.getElementById('btnStart');
+let imgCar = document.getElementById('imgCar');
 
-let value1 = document.getElementById('value1')
-let value2 = document.getElementById('value2')
-let value3 = document.getElementById('value3')
-
-let inpSpeed = document.getElementById('inpSpeed')
-let btnStop = document.getElementById('btnStop')
-let btnStart = document.getElementById('btnStart')
-let imgCar = document.getElementById('imgCar')
-
-
-
-let values = [
-    '😃', '😇', '😋', '😂', '😎', '😭', '😡'
-]
+let values = ['😃', '😇', '😋', '😂', '😎', '😭', '😡'];
 
 function getRandomValue() {
-    
-    return values[Math.floor(Math.random() * 7)]
+  return values[Math.floor(Math.random() * 7)];
 }
 
 let animationId;
 
 //by default also shuffle starts
-let speed = getComputedStyle(document.documentElement)
-    .getPropertyValue('--speed')
+let speed = getComputedStyle(document.documentElement).getPropertyValue(
+  '--speed'
+);
 
 animationId = setInterval(() => {
-        
-    value1.innerText = getRandomValue()
-    value2.innerText = getRandomValue()
-    value3.innerText = getRandomValue()
-
-}, 1000 / speed )
+  value1.innerText = getRandomValue();
+  value2.innerText = getRandomValue();
+  value3.innerText = getRandomValue();
+}, 1000 / speed);
 //by default also shuffle ends
 
 function updateAnimation(newSpeed) {
-    if (animationId) clearInterval(animationId)
+  if (animationId) clearInterval(animationId);
 
-    animationId = setInterval(() => {
-        
-        value1.innerText = getRandomValue()
-        value2.innerText = getRandomValue()
-        value3.innerText = getRandomValue()
-        
-    
-    }, 1000 / newSpeed)
+  animationId = setInterval(() => {
+    value1.innerText = getRandomValue();
+    value2.innerText = getRandomValue();
+    value3.innerText = getRandomValue();
+  }, 1000 / newSpeed);
 }
 
 inpSpeed.onchange = function (ev) {
-
-    //if updated speed is 0 , stop
-    if((parseInt(ev.target.value))===0){
-        promiseObj()
-        inpSpeed.disabled = false; 
-    }
-    else{
-         // document.documentElement => this is ":root" of css
-    document.documentElement.style.setProperty('--speed',ev.target.value )
-        updateAnimation(ev.target.value)
+  //if updated speed is 0 , stop
+  if (parseInt(ev.target.value) === 0) {
+    promiseObj();
+    inpSpeed.disabled = false;
+  } else {
+    // document.documentElement => this is ":root" of css
+    document.documentElement.style.setProperty('--speed', ev.target.value);
+    updateAnimation(ev.target.value);
     // speed = getComputedStyle(document.documentElement)
     //     .getPropertyValue('--speed') OR
-        speed = ev.target.value ;
+    speed = ev.target.value;
+  }
+};
+
+btnStop.onclick = function () {
+  promiseObj().then(() => {
+    if (
+      value1.innerText === value2.innerText &&
+      value1.innerText === value3.innerText
+    ) {
+      setTimeout(function () {
+        alert('Winner');
+      }, 200);
+    } else {
+      setTimeout(function () {
+        alert('Better Luck Next Time');
+      }, 200);
     }
-    
-}
-
-btnStop.onclick = function(){
-    promiseObj().then(()=>{
-if(value1.innerText ===value2.innerText && value1.innerText ===value3.innerText){
-                    setTimeout(function(){alert('Winner')},200)
-         }
-         else{
-            setTimeout(function(){alert('Better Luck Next Time')},200)
-         }
-    })
-}
-var promiseObj = ()=>{
-
-    return  new Promise((resolve , reject)=>{
-        document.documentElement.style.setProperty('--speed',0)
-        inpSpeed.disabled = true; 
-        updateAnimation(0)
-        clearInterval(animationId)
-        resolve();
-    })
-
-}
-
-
-btnStart.onclick = function (){
-    inpSpeed.disabled = false; 
-    document.documentElement.style.setProperty('--speed',speed)
-    updateAnimation(speed)
-}
+    let stopSpins = document.querySelectorAll('.slot');
+    stopSpins.forEach(function (stopSpin) {
+      stopSpin.classList.add('slot-stop');
+    });
+  });
+};
+var promiseObj = () => {
+  return new Promise((resolve, reject) => {
+    document.documentElement.style.setProperty('--speed', 0);
+    inpSpeed.disabled = true;
+    updateAnimation(0);
+    clearInterval(animationId);
+    resolve();
+  });
+};
+
+btnStart.onclick = function () {
+  inpSpeed.disabled = false;
+  document.documentElement.style.setProperty('--speed', speed);
+  updateAnimation(speed);
+  let stopSpins = document.querySelectorAll('.slot');
+  stopSpins.forEach(function (stopSpin) {
+    stopSpin.classList.remove('slot-stop');
+  });
+};
diff --git a/style.css b/style.css
index c310b08..6c6794c 100644
--- a/style.css
+++ b/style.css
@@ -1,68 +1,82 @@
-body{
-background-color: black;
+body {
+  background-color: black;
 }
 
 :root {
-    --speed: 5;
+  --speed: 5;
 }
 .machine {
-    background-color: peru;
-    border: dashed brown 3px;
-    height: 300px;
-    width: 900px;
-    margin-top: 100px;
-    z-index: 5;
-    display: flex;
-    margin-left:auto;
-    margin-right:auto; 
+  background-color: peru;
+  border: dashed brown 3px;
+  height: 300px;
+  width: 900px;
+  margin-top: 100px;
+  z-index: 5;
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 #inpSpeed {
-    font-size: 30pt;
-    margin:0px 50px;
-    width:200px; 
+  font-size: 30pt;
+  margin: 0px 50px;
+  width: 200px;
 }
 
 .slot {
-    height: 250px;
-    width: 250px;
-    margin: 20px;
-    overflow: hidden;
-    z-index: 1;
-    background-color: beige;
-    border: solid darkblue 2px;
-    text-align: center;
-    font-size: 100pt;
-    line-height: 250px;
+  height: 250px;
+  width: 250px;
+  margin: 20px;
+  overflow: hidden;
+  z-index: 1;
+  background-color: beige;
+  border: solid darkblue 2px;
+  text-align: center;
+  font-size: 100pt;
+  line-height: 250px;
 }
 
 .slot > .value {
-    z-index: 3;
-    animation-name: slotspin;
-    animation-iteration-count: infinite; 
-    animation-duration: calc(1s / var(--speed));
+  z-index: 3;
+  animation-name: slotspin;
+  animation-iteration-count: infinite;
+  animation-duration: calc(1s / var(--speed));
 }
 
 @keyframes slotspin {
-    0% {
-        transform: translateY(-200px);
-    }
-    100% {
-        transform: translateY(200px)
-    }
+  0% {
+    transform: translateY(-200px);
+  }
+
+  100% {
+    transform: translateY(200px);
+  }
+}
+
+.slot-stop > .value {
+  z-index: 3;
+  animation-name: slotstopspin;
+  animation-iteration-count: infinite;
+  animation-duration: calc(1s / var(--speed));
 }
 
-.btn{
-    background-color:brown;
-    font-size: 30pt;
-    cursor: pointer;
-    font-style:ariel;
-    margin-right:50px;
-    border-radius: 8px;
-    padding:4px 40px;
+@keyframes slotstopspin {
+  50% {
+    transform: translateY(0px);
+  }
 }
 
-.speednbtn{
-    text-align: center;
-    margin-top:150px;
-}
\ No newline at end of file
+.btn {
+  background-color: brown;
+  font-size: 30pt;
+  cursor: pointer;
+  font-style: ariel;
+  margin-right: 50px;
+  border-radius: 8px;
+  padding: 4px 40px;
+}
+
+.speednbtn {
+  text-align: center;
+  margin-top: 150px;
+}