From 0aa234b255977f45038ed7cd20fbbfb7d3f8aa2b Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Tue, 18 Nov 2025 21:15:45 +0000 Subject: [PATCH 1/8] Created the updateDisplay function to update the screen Time Remaining with minutes and seconds. --- Sprint-3/alarmclock/alarmclock.js | 20 +++++++++++++++++++- Sprint-3/alarmclock/index.html | 5 +++-- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..68d88ada8 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,19 @@ -function setAlarm() {} +function setAlarm() { + + +} + +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 @@ -23,3 +38,6 @@ function pauseAlarm() { } window.onload = setup; + + + diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..631003fad 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,9 +4,10 @@ - Title here + Alarm clock app +

Time Remaining: 00:00

@@ -15,6 +16,6 @@

Time Remaining: 00:00

- + From c0ed94240ba487c7deb67854bd9ae04034a2adef Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Tue, 18 Nov 2025 23:39:08 +0000 Subject: [PATCH 2/8] Executed the setAlarm function that we can read the number the user typed, start a countdown from that number, update the display every second and play an alarm when the time reaches zero. --- Sprint-3/alarmclock/alarmclock.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 68d88ada8..645aa37b5 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,7 +1,37 @@ + 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 + } + + }, 1000); // run every one second } +let countdown = null; function updateDisplay(totalSeconds) { console.log("updating display with", totalSeconds); From ec2a9ff780ad2b1abeac8cef8b69072f6dbd6d47 Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Wed, 19 Nov 2025 19:32:28 +0000 Subject: [PATCH 3/8] Reset the alarm to make sure next time starts from the beginning and clearing the interval stops the countdown immediately if user press Stop alarm. --- Sprint-3/alarmclock/alarmclock.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 645aa37b5..9a86e11d7 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -65,6 +65,12 @@ function playAlarm() { function pauseAlarm() { audio.pause(); + audio.currentTime = 0; // reset to start, make sure next time play alarm starts from the beginning. + + if(countdown) { + clearInterval(countdown); // clearing the interval stops the countdown immediately if user press Stop alarm + countdown = null; + } } window.onload = setup; From 83bf7f832f8bde23e3c1bfb93d6a275d51c39c40 Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Wed, 19 Nov 2025 21:20:08 +0000 Subject: [PATCH 4/8] Made the background color change when the alarm clock finishes and reset the background color when Stop Alarm is pressed. --- Sprint-3/alarmclock/alarmclock.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 9a86e11d7..19f995bfe 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -21,10 +21,14 @@ function setAlarm() { 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 @@ -67,6 +71,9 @@ 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; From fad040df37192704fbd3bb3738964eec8b957be8 Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Thu, 20 Nov 2025 21:45:23 +0000 Subject: [PATCH 5/8] Selected a Title and access to the HTML elements using getElementById. --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/quotes.js | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..05395990a 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,7 +3,7 @@ - Title here + Quote Generator diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..e85f5a1d1 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,8 @@ 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"); From 2999e89d4b04787d34acf2ff02c6d7c14f4bb6c9 Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Thu, 20 Nov 2025 22:49:54 +0000 Subject: [PATCH 6/8] Created a function to display a random quote. --- Sprint-3/quote-generator/quotes.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index e85f5a1d1..9661327b1 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -496,3 +496,16 @@ const quotes = [ 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.quote; // display the author's in the HTML +} +// Display quote on page load +showRandomQuote(); From a5c1c4a83b78bb771d8248e6c3b2397c78d5197b Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Fri, 21 Nov 2025 00:05:52 +0000 Subject: [PATCH 7/8] Changed the background color. --- Sprint-3/quote-generator/index.html | 1 + Sprint-3/quote-generator/quotes.js | 5 +++++ Sprint-3/quote-generator/style.css | 12 ++++++++++++ 3 files changed, 18 insertions(+) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 05395990a..17bcdd37e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,6 +4,7 @@ Quote Generator + diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 9661327b1..968a1f59e 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -509,3 +509,8 @@ function showRandomQuote () { } // 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 index 63cedf2d2..688a63799 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,13 @@ /** 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; +} \ No newline at end of file From 173758fd174447e1ea5dc102ca0b40e53d20e736 Mon Sep 17 00:00:00 2001 From: ahmadehsas Date: Fri, 21 Nov 2025 02:03:22 +0000 Subject: [PATCH 8/8] Style the quote, author's text, button to dark mode, and button hover effect. --- Sprint-3/quote-generator/quotes.js | 2 +- Sprint-3/quote-generator/style.css | 40 +++++++++++++++++++++++++++++- 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 968a1f59e..5e016d35b 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -505,7 +505,7 @@ const newQuoteButton = document.getElementById("new-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.quote; // display the author's in the HTML + authorText.innerText = randomQuote.author; // display the author's in the HTML } // Display quote on page load showRandomQuote(); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 688a63799..3dffbd5ab 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -10,4 +10,42 @@ body { justify-content: center; align-items: center; margin: 0; -} \ No newline at end of file +} + +/** 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; +} + +