From 8de5c028a4243f93426214576bf4ca5136725e95 Mon Sep 17 00:00:00 2001
From: Ashika Gupta <ashikagupta1503@gmail.com>
Date: Fri, 17 May 2024 18:27:55 +0530
Subject: [PATCH] added 10 secs alert message

---
 Games/Master_Typing/index.html |  4 +++-
 Games/Master_Typing/script.js  | 16 ++++++++++++++++
 Games/Master_Typing/style.css  | 15 +++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/Games/Master_Typing/index.html b/Games/Master_Typing/index.html
index cec518c504..deecb0a8ed 100644
--- a/Games/Master_Typing/index.html
+++ b/Games/Master_Typing/index.html
@@ -103,8 +103,10 @@ <h1 class="title">Hands on the keyboard 👀</h1>
   </div>
 </div>
 
-<!-- Rest of your HTML code -->
+<!--countdown message-->
+<div id="countdownMessage">Only 10 seconds left!</div>
 
+<script src="path/to/your/javascript/file.js"></script>
 
     <script src="script.js"></script>
   </head>
diff --git a/Games/Master_Typing/script.js b/Games/Master_Typing/script.js
index 4849ec5e4b..96d106d0ba 100644
--- a/Games/Master_Typing/script.js
+++ b/Games/Master_Typing/script.js
@@ -89,6 +89,12 @@ function startTimer() {
   // Update the timer every second
   intervalId = setInterval(function () {
     secondsLeft--;
+
+    // Added code for alert message when 10 seconds are remaining
+    if (secondsLeft === 10) {
+      showCountdownMessage(); // Show custom alert message
+    }
+    
     if (secondsLeft < 0) {
       //call assessment function for review result
       assessment();
@@ -143,3 +149,13 @@ function assessment() {
   timerElement.innerHTML = "00:00";
 }
 
+// Function to show the countdown message
+function showCountdownMessage() {
+  const countdownMessage = document.getElementById("countdownMessage");
+  countdownMessage.style.display = "block";
+
+  // Hide the message after 3 seconds
+  setTimeout(() => {
+    countdownMessage.style.display = "none";
+  }, 3000);
+}
diff --git a/Games/Master_Typing/style.css b/Games/Master_Typing/style.css
index 1b106a1018..c531b093a9 100644
--- a/Games/Master_Typing/style.css
+++ b/Games/Master_Typing/style.css
@@ -303,4 +303,19 @@ transform: translateY(2px);
 
 .popup-overlay.hidden {
   display: none;
+}
+
+/* Custom countdown message styles */
+#countdownMessage {
+  display: none;
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(255, 0, 0, 0.8);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 5px;
+  font-size: 20px;
+  z-index: 1000;
 }
\ No newline at end of file