Button functionality has been changed

-renamed  the "Restart" button to "Reset" for clarity.
-ensured that the letter won't popup until the "Start" button is pressed.
-stopped the popup of the letter when the "Reset" button is pressed.
-enhance the functionality of both buttons to make it clear when the game starts and when it's reset.
-updated the hover and active effect of the button to change the color  during this events

Games/Master_Typing/index.html

@@ -85,10 +85,12 @@ <h1 class="title">Hands on the keyboard 👀</h1>
 
       <!-- for start and restart button -->
       <div class="btn">
-        <button class="button" onclick="startTimer()">Start</button>
-        <button class="button" onclick="restartTimer()">Restart</button>
+        <button class="button start-button" onclick="startTimer()">Start</button>
+        <button class="button reset-button" onclick="restartTimer()">Reset</button>
       </div>
+
     </div>
+
 
     <!-- For audio section  -->
     <audio id="keySound">

Games/Master_Typing/script.js

@@ -18,10 +18,18 @@ function getRandomKey() {
   return keys[getRandomNumber(0, keys.length - 1)];
 }
 
+let lastPopUpkey=null;
 function targetRandomKey() {
   const key = document.getElementById(getRandomKey());
   key.classList.add("selected");
-  let start = Date.now();
+  lastPopUpkey=key;
+
+}
+// Function to unselect the last popped-up key
+function unselectLastPopUpKey() {
+  if (lastPopUpkey) {
+    lastPopUpkey.classList.remove("selected");
+  }
 }
 
 function getTimestamp() {
@@ -70,7 +78,7 @@ document.addEventListener("keyup", (event) => {
   // }
 });
 
-targetRandomKey();
+
 
 // ---------------------For the Timer--------------------------------
 
@@ -79,8 +87,12 @@ var intervalId;
 var secondsLeft = 60;
 
 function startTimer() {
+
+  const startButton = document.querySelector("button:nth-of-type(1)");
+
+  targetRandomKey();
   // Disable the start button
-  document.querySelector("button:nth-of-type(1)").disabled = true;
+ startButton.disabled = true;
 
   // Reset the counts entries
   totalEntry = 0;
@@ -105,6 +117,7 @@ function restartTimer() {
   clearInterval(intervalId);
   secondsLeft = 60;
   timerElement.textContent = "00:00";
+   unselectLastPopUpKey();
 
   // Enable the start button
   document.querySelector("button:nth-of-type(1)").disabled = false;

Games/Master_Typing/style.css

@@ -267,6 +267,7 @@ font-size: 18px;
 
 .button:focus {
 box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+
 }
 
 .button:hover {
@@ -278,6 +279,22 @@ transform: translateY(-2px);
 box-shadow: #D6D6E7 0 3px 7px inset;
 transform: translateY(2px);
 }
+.start-button:hover{
+  background-color: #D2FDAE ;
+}
+.start-button:active{
+  background-color: #29BF2E   ;
+
+}
+
+.reset-button:hover{
+  background-color: #DE5B4E;
+}
+.reset-button:active{
+  background-color: #F0420F ;
+
+}
+
 
  /* CSS for the popup and backdrop */
  .popup-overlay {