Snake game page's color theme is changed to enhance the page's beauty

Games/Master_Typing/README.md

@@ -5,7 +5,7 @@
 <br>
 
 ## **Description 📃** 
-- this game is build to improve your muscle memory by giving random keys to click within 1 min it is build on basic web tech stacks such as html , css , js and bootstrap
+- this game is build to improve your muscle memory by giving random keys to click within 1 min. It is built on basic web tech stacks such as html , css , js and bootstrap
 
 ## **functionalities 🎮** 
 - random key generation
@@ -36,3 +36,5 @@
 <!-- add your working video over here -->
 
  [Video](https://i.imgur.com/w56sUaV.mp4)
+ <!--after some changes in button functionality-->
+ [Video] (https://imgur.com/a/uxx8hlM)

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;
@@ -111,6 +123,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

@@ -24,7 +24,7 @@ body {
 .title {
   color: mintcream;
   text-transform: uppercase;
-  margin-top: 3em;
+  margin-top: 10em;
   margin-bottom: 3em;
   font-size: 1em;
   letter-spacing: 0.3em;
@@ -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 {

Games/Snake_Game/index.html

@@ -19,7 +19,9 @@
         font-size: 30px;
         padding: 5px;
         border: none;
-        background: #0c4522;
+
+        background: #2d0e00; 
+
 
       "
     >

Games/Snake_Game/style.css

@@ -14,94 +14,85 @@
 }
 
 button{
-    color: darkgreen;
-    border: 2px solid green;
-    background: none;
+    background-color: #ffcd6e;
+    border: 2px solid white;
+
 }
 
 
 button {
-    /* position: absolute; */
-    /* top: 5rem; */
-    /* left: 42rem; */
+    position: absolute;
+    top: 6rem;
+    left: 27rem;
     padding: 0.5rem 1rem;
     font-size: 2rem;
-    font-family: math;
-    border-radius: 0.6rem;
-}
 
-.instructions{
-     border-radius: 1rem;
-    position: absolute;
-    font-size: 30px;
-    left: 10px;
-    top: 75px;
-    width: fit-content;
     font-family: math;
-    color: darkgreen;
-    border: 2px solid green;
-    background: none;
-    padding: 0.5rem 1rem;
-   }
+    border-radius: 0.6rem;
 
+}
 
+/*Changed color*/
 button:hover {
     cursor: pointer;
     filter: drop-shadow(2px, 2px, 2px black);
-    background-color: black;
+    background-color: #8b491c;
     color: white;
     transition: .8s ease;
-    box-shadow: 5px 5px 5px rgb(75, 75, 239);
+    box-shadow: 5px 5px 5px #fffbaa;
 }
 
 #scoreBox{
     border-radius: 1rem;
     border: 2px solid #9E9E9E;
-    /* position: absolute; */
+    position: absolute;
     font-size: 30px;
-    /* right: 40px; */
-    /* top: 75px; */
+    right: 40px;
+    top: 75px;
     font-family: math;
-    padding: 8px 12px;
+    padding: 3px 12px;
 }
 
 #HiScore{
     border-radius: 1rem;
-    /* position: absolute; */
+    position: absolute;
     font-size: 30px;
-    /* right: 25px; */
+    right: 25px;
     border: 2px solid #9E9E9E;
-    /* top: 125px; */
+    top: 125px;
     font-family: math;
-    padding: 8px 12px;
+    padding: 3px 12px;
 }
-
+/*Changed color*/
 #board{
-    position: absolute;
-    top: 23%;
-    border-radius: 1.5rem;
-    background: #0c4522;
+    margin-top: 4%;
+    border-radius: 1rem;
+    background: #CD853F;
     width: 75vmin;
     height: 75vmin;
     border: 2px solid black;
     display: grid;
+    border-radius: 50px;
     grid-template-rows: repeat(18, 1fr);
     grid-template-columns: repeat(18, 1fr);
 }
+/*Changed color*/
 .head{
-    background:red;
-    transform: scale(1.02);
-    border: 2px solid purple;
-    border-radius: 4px;
+    background:#ffcd6e;
+    transform: scale(1.5);
+    border: 4px solid white;
+    border-radius:45%;
 }
-
+/*Changed color*/
 .snake{
-    background: red !important; 
+    background:#fffbaa !important; 
     border-radius:45%;
+      border: 1px solid white;
+
 }
-
+/*Changed color*/
 .food{
-    background: brown;
+    background: #8b491c;
     border: none;
     border-radius:8px;
 }
@@ -126,19 +117,4 @@ a{
     position: relative;
     font-size: 30px;
 
-}
-.scores{
-    display: flex;
-    width: 70vw;
-    position: absolute;
-    top: 4rem;
-    justify-content: space-evenly;
-}
-body{
-    height: 100%;
-    overflow-y: hidden;
-}
-
-.fas{
-    margin-left: 20px;
-}
+}