CodeYourFuture · ahmadehsas · Nov 18, 2025 · Nov 18, 2025 · Nov 19, 2025 · Nov 19, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,53 @@
-function setAlarm() {}
+
+function setAlarm() {
+  const input = document.getElementById("alarmSet") // get the input field
+  let timeLeft = Number(input.value); // convert input value to a number
+
+  // validate the input value
+  if (!Number.isFinite(timeLeft) || timeLeft <= 0) {  // The Number.isFinite() method is a way to test whether a value 
+  // is a finite number value. and also prevents the error if the user types nothing or a negative number.
+    return "input is invalid"; //  input is invalid
+  }
+
+  updateDisplay(timeLeft); // show the starting time immediately
+
+  if (countdown) {
+    clearInterval(countdown)
+    // clear previous countdown if running 
+    // if a countdown is already running stop it before starting a new one.
+  }
+
+  // start countdown
+  countdown = setInterval(() => {
+    timeLeft -= 1; // reduce time by 1 seconds
+    updateDisplay(timeLeft); // update display
+
+    if (timeLeft <= 0) {  // when time reaches 0
+      clearInterval(countdown); // stop the countdown
+      countdown = null; // reset variable
+      playAlarm(); // play the alarm sound
+
+      // change background color when the alarm clock finishes
+      document.body.style.backgroundColor = "red";
+    }
+
+  }, 1000); // run every one second
+
+
+}
+let countdown = null; 
+
+function updateDisplay(totalSeconds) {
+  console.log("updating display with", totalSeconds);
+  const display = document.getElementById("timeRemaining"); // find h1 element
+
+  if (totalSeconds < 0) totalSeconds = 0; //  safety prevent negative time.
+
+  const mins = String(Math.floor(totalSeconds / 60)).padStart(2, "0"); // Math.floor method rounds down and return the larges integer less than or equal to a given number.
+  const secs = String(totalSeconds % 60).padStart(2, "0"); // calculate remaining seconds.
+
+  display.textContent = `Time Remaining: ${mins}:${secs}`; // update h1 text
+}
 
 // DO NOT EDIT BELOW HERE
 
@@ -20,6 +69,18 @@ function playAlarm() {
 
 function pauseAlarm() {
   audio.pause();
+  audio.currentTime = 0; // reset to start, make sure next time play alarm starts from the beginning.
+
+  // reset the background color to original
+  document.body.style.backgroundColor = "";
+
+  if(countdown) {
+    clearInterval(countdown); // clearing the interval stops the countdown immediately if user press Stop alarm
+    countdown = null;
+  }
 }
 
 window.onload = setup;
+
+
+
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,9 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Alarm clock app</title>
   </head>
   <body>
+    <script defer src="alarmclock.js"></script>
     <div class="centre">
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <label for="alarmSet">Set time to:</label>
@@ -15,6 +16,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
     </div>
-    <script src="alarmclock.js"></script>
+
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote Generator</title>
+     <link rel="stylesheet" href="style.css" />
     <script defer src="quotes.js"></script>
   </head>
   <body>

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,26 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+// Access to the HTML elements.
+const quoteText = document.getElementById("quote");
+const authorText = document.getElementById("author");
+const newQuoteButton = document.getElementById("new-quote");
+
+// quoteText.innerText = "Smile Life is beautiful";
+// authorText.innerText = "Ahmad Ehsas";
+
+// Show a random quote
+
+function showRandomQuote () {
+  const randomQuote = pickFromArray(quotes);// pick a random quote from the quote array.
+  quoteText.innerText = randomQuote.quote; // display the quote text in the HTML
+  authorText.innerText = randomQuote.author; // display the author's in the HTML
+}
+// Display quote on page load
+showRandomQuote();
+
+// Make the button work
+// .addEventListener("click", ...) do something when the button is clicked
+// Every time the user clicks the button, a new random quotes appears.
+newQuoteButton.addEventListener("click", showRandomQuote);
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,51 @@
 /** Write your CSS in here **/
+
+body {
+  background-color: #121212;   
+  color: #ffffff;              
+  font-family: Arial, sans-serif; 
+  height: 100vh;               
+  display: flex;               
+  flex-direction: column;      
+  justify-content: center;     
+  align-items: center;         
+  margin: 0;                   
+}
+
+/** style the quote **/
+#quote {
+  font-size: 1.8rem;        
+  max-width: 600px;        
+  text-align: center;       
+  margin-bottom: 10px;      
+}
+
+/** Style the author text **/
+
+#author {
+  font-size: 1.2rem;
+  color: #aaaaaa;           
+  margin-bottom: 20px;
+}
+
+/** style the button dark mode **/
+
+#new-quote {
+  background-color: #1e1e1e;     
+  color: white;                  
+  border: 2px solid #444;        
+  padding: 10px 20px;            
+  border-radius: 5px;            
+  cursor: pointer;              
+  font-size: 1rem;             
+  transition: 0.3s;              
+}
+
+/** button hover effect **/
+
+#new-quote:hover {
+  background-color: #333;     
+  border-color: #777;         
+}
+
+