From 0aa1999f49b5c403999660e98659fc60ba10e65a Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sun, 7 Dec 2025 17:03:24 +0000 Subject: [PATCH 1/9] alarm clock done --- Sprint-3/alarmclock/alarmclock.js | 33 ++++++++++++++++++++ Sprint-3/alarmclock/style.css | 50 ++++++++++++++++++++++++++++--- 2 files changed, 79 insertions(+), 4 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..d21f0f368 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,6 +1,39 @@ function setAlarm() {} // DO NOT EDIT BELOW HERE +let countdown; + +function setAlarm() { + let seconds = Number(document.getElementById("alarmSet").value); + + function updateDisplay() { + let mins = Math.floor(seconds / 60); + let secs = seconds % 60; + let mm = String(mins).padStart(2, "0"); + let ss = String(secs).padStart(2, "0"); + document.getElementById("timeRemaining").innerText = + "Time Remaining: " + mm + ":" + ss; + } + + updateDisplay(); + clearInterval(countdown); + + countdown = setInterval(function () { + seconds--; + updateDisplay(); + + if (seconds <= 0) { + clearInterval(countdown); + playAlarm(); + } + }, 1000); +} + +function pauseAlarm() { + audio.pause(); + clearInterval(countdown); +} + var audio = new Audio("alarmsound.mp3"); diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..7fb128edc 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,57 @@ +body { + font-family: Arial, sans-serif; + background: #f5f5f5; + margin: 0; + padding: 0; +} + .centre { position: fixed; top: 50%; left: 50%; - -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + background: white; + padding: 30px 40px; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + text-align: center; } -#alarmSet { - margin: 20px; +h1 { + margin-bottom: 20px; + font-size: 24px; + color: #333; } -h1 { +#alarmSet { + margin: 15px 0; + padding: 10px; + width: 120px; + font-size: 16px; text-align: center; + border: 2px solid #ddd; + border-radius: 6px; +} + +button { + padding: 10px 18px; + margin: 5px; + font-size: 15px; + border: none; + border-radius: 6px; + cursor: pointer; +} + +#set { + background: #4caf50; + color: white; +} + +#stop { + background: #e53935; + color: white; +} + +button:hover { + opacity: 0.85; } From 239f3858526ed5bcc42df70154c1742a9b6742b2 Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sat, 13 Dec 2025 13:47:06 +0000 Subject: [PATCH 2/9] alarm clock is done --- Sprint-3/quote-generator/index.html | 5 ++- Sprint-3/quote-generator/style.css | 58 ++++++++++++++++++++++++++++- 2 files changed, 60 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..760d0920d 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,10 +5,11 @@ Title here + -

hello there

-

+

hello there

+

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..663fb9475 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,57 @@ -/** Write your CSS in here **/ +body { + margin: 0; + padding: 0; + height: 100vh; + width: 100vw; + background: #eea73b; /* رنگ نارنجی مثل عکس */ + display: flex; + justify-content: center; + align-items: center; + font-family: "Georgia", serif; +} + +.quote-box { + background: #ffffff; + width: 75%; + max-width: 1200px; + padding: 60px 80px; + box-shadow: 0 0 40px rgba(0, 0, 0, 0.15); + border-radius: 4px; + text-align: left; +} + +.quote-text { + font-size: 2.4rem; + line-height: 1.4; + color: #d6861e; + display: flex; + align-items: flex-start; + gap: 15px; +} + +.quote-text i { + font-size: 3.5rem; + color: #d6861e; +} + +.author { + text-align: right; + margin-top: 20px; + font-size: 1.4rem; + color: #d6861e; +} + +button { + margin-top: 25px; + padding: 12px 24px; + font-size: 1rem; + border: none; + background: #d6861e; + color: #fff; + cursor: pointer; + border-radius: 3px; +} + +button:hover { + opacity: 0.9; +} From 11f36609f1bd6b0f2f52aa6432467c6c599884b9 Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sat, 13 Dec 2025 13:47:52 +0000 Subject: [PATCH 3/9] add more class and CSS --- Sprint-3/alarmclock/index.html | 16 +++++++----- Sprint-3/alarmclock/style.css | 39 ++++++++++++++++++++++++++++++ Sprint-3/quote-generator/quotes.js | 12 +++++++++ Sprint-3/quote-generator/style.css | 2 +- 4 files changed, 62 insertions(+), 7 deletions(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..8f427d29e 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -6,14 +6,18 @@ Title here - -
-

Time Remaining: 00:00

- + +
+

Time Remaining: 00:00

+

Add the seconds you want to wait.

+ - - +
+ + +
+

Tip: press stop to quiet the bell.

diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 7fb128edc..e86091a56 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -5,6 +5,12 @@ body { padding: 0; } +/* Light blue sky look to keep the page calm */ +.app-body { + background: linear-gradient(#d9ecff, #fefefe); + min-height: 100vh; +} + .centre { position: fixed; top: 50%; @@ -17,12 +23,28 @@ body { text-align: center; } +/* Simple border to make the alarm box stand out */ +.alarm-card { + border: 2px solid #a0c4ff; + max-width: 320px; +} + h1 { margin-bottom: 20px; font-size: 24px; color: #333; } +.timer-title { + color: #1a4b84; +} + +.helper-text { + font-size: 14px; + color: #555; + margin-bottom: 10px; +} + #alarmSet { margin: 15px 0; padding: 10px; @@ -33,6 +55,12 @@ h1 { border-radius: 6px; } +.input-label { + display: block; + font-weight: 600; + color: #1a4b84; +} + button { padding: 10px 18px; margin: 5px; @@ -42,6 +70,10 @@ button { cursor: pointer; } +.button-row { + margin-top: 10px; +} + #set { background: #4caf50; color: white; @@ -55,3 +87,10 @@ button { button:hover { opacity: 0.85; } + +/* Tiny footer line to guide students */ +.small-note { + margin-top: 15px; + font-size: 12px; + color: #777; +} diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..e75256ec6 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,15 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + + +function showQuote() { + const q = pickFromArray(quotes); + document.getElementById("quote").innerText = q.quote; + document.getElementById("author").innerText = q.author; +} + +window.onload = function () { + showQuote(); + document.getElementById("new-quote").addEventListener("click", showQuote); +}; diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 663fb9475..b46b1071d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -3,7 +3,7 @@ body { padding: 0; height: 100vh; width: 100vw; - background: #eea73b; /* رنگ نارنجی مثل عکس */ + background: #eea73b; display: flex; justify-content: center; align-items: center; From 90873abcf83cc3770d10e87ef87a5c984834321e Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sat, 13 Dec 2025 14:00:08 +0000 Subject: [PATCH 4/9] Revert "alarm clock done" This reverts commit 0aa1999f49b5c403999660e98659fc60ba10e65a. --- Sprint-3/alarmclock/alarmclock.js | 33 ------------------------------- Sprint-3/alarmclock/style.css | 9 +++++---- 2 files changed, 5 insertions(+), 37 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index d21f0f368..6ca81cd3b 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,39 +1,6 @@ function setAlarm() {} // DO NOT EDIT BELOW HERE -let countdown; - -function setAlarm() { - let seconds = Number(document.getElementById("alarmSet").value); - - function updateDisplay() { - let mins = Math.floor(seconds / 60); - let secs = seconds % 60; - let mm = String(mins).padStart(2, "0"); - let ss = String(secs).padStart(2, "0"); - document.getElementById("timeRemaining").innerText = - "Time Remaining: " + mm + ":" + ss; - } - - updateDisplay(); - clearInterval(countdown); - - countdown = setInterval(function () { - seconds--; - updateDisplay(); - - if (seconds <= 0) { - clearInterval(countdown); - playAlarm(); - } - }, 1000); -} - -function pauseAlarm() { - audio.pause(); - clearInterval(countdown); -} - var audio = new Audio("alarmsound.mp3"); diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index e86091a56..1b849abfe 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -15,6 +15,7 @@ body { position: fixed; top: 50%; left: 50%; + -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: white; padding: 30px 40px; @@ -46,10 +47,10 @@ h1 { } #alarmSet { - margin: 15px 0; - padding: 10px; - width: 120px; - font-size: 16px; + margin: 20px; +} + +h1 { text-align: center; border: 2px solid #ddd; border-radius: 6px; From 287d16cfd7b739ac0ebc0c854f656b7f2ed96e5f Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sat, 13 Dec 2025 14:03:47 +0000 Subject: [PATCH 5/9] Revert "alarm clock done" This reverts commit 0aa1999f49b5c403999660e98659fc60ba10e65a. --- Sprint-3/alarmclock/style.css | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 1b849abfe..c1b41e1ad 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -17,23 +17,6 @@ body { left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - background: white; - padding: 30px 40px; - border-radius: 12px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); - text-align: center; -} - -/* Simple border to make the alarm box stand out */ -.alarm-card { - border: 2px solid #a0c4ff; - max-width: 320px; -} - -h1 { - margin-bottom: 20px; - font-size: 24px; - color: #333; } .timer-title { From 1512d55863272b3dacd6f245ce4fad02ac6ffbfe Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sat, 13 Dec 2025 14:07:36 +0000 Subject: [PATCH 6/9] Revert "add more class and CSS" This reverts commit 11f36609f1bd6b0f2f52aa6432467c6c599884b9. --- Sprint-3/alarmclock/index.html | 16 +++++------- Sprint-3/alarmclock/style.css | 40 +++++++----------------------- Sprint-3/quote-generator/quotes.js | 12 --------- Sprint-3/quote-generator/style.css | 2 +- 4 files changed, 16 insertions(+), 54 deletions(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 8f427d29e..48e2e80d9 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -6,18 +6,14 @@ Title here - -
-

Time Remaining: 00:00

-

Add the seconds you want to wait.

- + +
+

Time Remaining: 00:00

+ -
- - -
-

Tip: press stop to quiet the bell.

+ +
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index c1b41e1ad..5e6780e8f 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -5,28 +5,23 @@ body { padding: 0; } -/* Light blue sky look to keep the page calm */ -.app-body { - background: linear-gradient(#d9ecff, #fefefe); - min-height: 100vh; -} - .centre { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + background: white; + padding: 30px 40px; + border-radius: 12px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + text-align: center; } -.timer-title { - color: #1a4b84; -} - -.helper-text { - font-size: 14px; - color: #555; - margin-bottom: 10px; +h1 { + margin-bottom: 20px; + font-size: 24px; + color: #333; } #alarmSet { @@ -39,12 +34,6 @@ h1 { border-radius: 6px; } -.input-label { - display: block; - font-weight: 600; - color: #1a4b84; -} - button { padding: 10px 18px; margin: 5px; @@ -54,10 +43,6 @@ button { cursor: pointer; } -.button-row { - margin-top: 10px; -} - #set { background: #4caf50; color: white; @@ -71,10 +56,3 @@ button { button:hover { opacity: 0.85; } - -/* Tiny footer line to guide students */ -.small-note { - margin-top: 15px; - font-size: 12px; - color: #777; -} diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index e75256ec6..4a4d04b72 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,15 +491,3 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote - - -function showQuote() { - const q = pickFromArray(quotes); - document.getElementById("quote").innerText = q.quote; - document.getElementById("author").innerText = q.author; -} - -window.onload = function () { - showQuote(); - document.getElementById("new-quote").addEventListener("click", showQuote); -}; diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index b46b1071d..663fb9475 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -3,7 +3,7 @@ body { padding: 0; height: 100vh; width: 100vw; - background: #eea73b; + background: #eea73b; /* رنگ نارنجی مثل عکس */ display: flex; justify-content: center; align-items: center; From 51ab1125bde73cd8b3f98394248a87583993c59b Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sat, 13 Dec 2025 14:08:27 +0000 Subject: [PATCH 7/9] Revert "alarm clock is done" This reverts commit 239f3858526ed5bcc42df70154c1742a9b6742b2. --- Sprint-3/quote-generator/index.html | 5 +-- Sprint-3/quote-generator/style.css | 58 +---------------------------- 2 files changed, 3 insertions(+), 60 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 760d0920d..30b434bcf 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,11 +5,10 @@ Title here - -

hello there

-

+

hello there

+

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 663fb9475..63cedf2d2 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,57 +1 @@ -body { - margin: 0; - padding: 0; - height: 100vh; - width: 100vw; - background: #eea73b; /* رنگ نارنجی مثل عکس */ - display: flex; - justify-content: center; - align-items: center; - font-family: "Georgia", serif; -} - -.quote-box { - background: #ffffff; - width: 75%; - max-width: 1200px; - padding: 60px 80px; - box-shadow: 0 0 40px rgba(0, 0, 0, 0.15); - border-radius: 4px; - text-align: left; -} - -.quote-text { - font-size: 2.4rem; - line-height: 1.4; - color: #d6861e; - display: flex; - align-items: flex-start; - gap: 15px; -} - -.quote-text i { - font-size: 3.5rem; - color: #d6861e; -} - -.author { - text-align: right; - margin-top: 20px; - font-size: 1.4rem; - color: #d6861e; -} - -button { - margin-top: 25px; - padding: 12px 24px; - font-size: 1rem; - border: none; - background: #d6861e; - color: #fff; - cursor: pointer; - border-radius: 3px; -} - -button:hover { - opacity: 0.9; -} +/** Write your CSS in here **/ From 6d5cccc13e3c7adf1d1cef354e1f10666a75d9dd Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sat, 13 Dec 2025 14:14:26 +0000 Subject: [PATCH 8/9] solve the stop button issue --- 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 6ca81cd3b..23f58aede 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,6 +1,33 @@ function setAlarm() {} // DO NOT EDIT BELOW HERE +let countdown; + +function setAlarm() { + let seconds = Number(document.getElementById("alarmSet").value); + + function updateDisplay() { + let mins = Math.floor(seconds / 60); + let secs = seconds % 60; + let mm = String(mins).padStart(2, "0"); + let ss = String(secs).padStart(2, "0"); + document.getElementById("timeRemaining").innerText = + "Time Remaining: " + mm + ":" + ss; + } + + updateDisplay(); + clearInterval(countdown); + + countdown = setInterval(function () { + seconds--; + updateDisplay(); + + if (seconds <= 0) { + clearInterval(countdown); + playAlarm(); + } + }, 1000); +} var audio = new Audio("alarmsound.mp3"); @@ -19,7 +46,10 @@ function playAlarm() { } function pauseAlarm() { + /* Stop the bell and freeze the timer */ + clearInterval(countdown); audio.pause(); + audio.currentTime = 0; } window.onload = setup; From 70d169d99ae6bc528820113d77eaba6df53b0f83 Mon Sep 17 00:00:00 2001 From: Hadi Vahidi Date: Sat, 20 Dec 2025 23:10:18 +0000 Subject: [PATCH 9/9] Improve alarm reset and input handling --- Sprint-3/alarmclock/alarmclock.js | 40 ++++++++++++++++++++++++------- Sprint-3/alarmclock/index.html | 2 +- 2 files changed, 33 insertions(+), 9 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 23f58aede..d467eb5fd 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,10 +1,19 @@ -function setAlarm() {} - -// DO NOT EDIT BELOW HERE let countdown; +function getSecondsFromInput() { + const inputValue = document.getElementById("alarmSet").value; + const seconds = Number(inputValue); + + // Keep only a safe whole number. + if (!Number.isFinite(seconds) || seconds < 0) { + return 0; + } + + return Math.floor(seconds); +} + function setAlarm() { - let seconds = Number(document.getElementById("alarmSet").value); + let seconds = getSecondsFromInput(); function updateDisplay() { let mins = Math.floor(seconds / 60); @@ -15,8 +24,13 @@ function setAlarm() { "Time Remaining: " + mm + ":" + ss; } + // Reset old timer and sound before starting a new one. + pauseAlarm(); updateDisplay(); - clearInterval(countdown); + + if (seconds <= 0) { + return; + } countdown = setInterval(function () { seconds--; @@ -37,7 +51,7 @@ function setup() { }); document.getElementById("stop").addEventListener("click", () => { - pauseAlarm(); + stopAndReset(); }); } @@ -48,8 +62,18 @@ function playAlarm() { function pauseAlarm() { /* Stop the bell and freeze the timer */ clearInterval(countdown); - audio.pause(); - audio.currentTime = 0; + try { + audio.pause(); + audio.currentTime = 0; + } catch (error) { + // Audio can be missing in tests. + } +} + +function stopAndReset() { + pauseAlarm(); + document.getElementById("alarmSet").value = ""; + document.getElementById("timeRemaining").innerText = "Time Remaining: 00:00"; } window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..ff2d3b453 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock app