diff --git a/Games/Master_Typing/README.md b/Games/Master_Typing/README.md
index fe6dbab075..a35a28d628 100644
--- a/Games/Master_Typing/README.md
+++ b/Games/Master_Typing/README.md
@@ -5,7 +5,7 @@
Hands on the keyboard 👀
- Start
- Restart
+ Start
+ Reset
+
+
diff --git a/Games/Master_Typing/script.js b/Games/Master_Typing/script.js
index 96d106d0ba..2188e9b9a2 100644
--- a/Games/Master_Typing/script.js
+++ b/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;
diff --git a/Games/Master_Typing/style.css b/Games/Master_Typing/style.css
index c531b093a9..8d339692f7 100644
--- a/Games/Master_Typing/style.css
+++ b/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 {
diff --git a/Games/Snake_Game/index.html b/Games/Snake_Game/index.html
index ebe39528ef..30a29e3159 100644
--- a/Games/Snake_Game/index.html
+++ b/Games/Snake_Game/index.html
@@ -19,7 +19,9 @@
font-size: 30px;
padding: 5px;
border: none;
- background: #0c4522;
+
+ background: #2d0e00;
+
"
>
diff --git a/Games/Snake_Game/style.css b/Games/Snake_Game/style.css
index b11329bfbe..fed465aa28 100644
--- a/Games/Snake_Game/style.css
+++ b/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;
-}
+}
\ No newline at end of file