From ae8ac1f95afee54d4431c6c8e536656547478363 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Mon, 23 Mar 2026 23:30:55 +0000 Subject: [PATCH 1/9] update html title --- Sprint-3/alarmclock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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
From 8cd966d2c69694f71300df0dc4deec436340b648 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Tue, 24 Mar 2026 19:26:25 +0000 Subject: [PATCH 2/9] Implement alarmclock.js --- Sprint-3/alarmclock/alarmclock.js | 33 ++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..99bb70799 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,35 @@ -function setAlarm() {} +let alarmInterval; + +function setAlarm() { + clearInterval(alarmInterval); + let timeRemaining = document.getElementById("alarmSet"); + const display = document.getElementById("timeRemaining"); + //what ever we input is turned into seconds + let totalSeconds = parseInt(timeRemaining.value); + + if (isNaN(totalSeconds) || totalSeconds <= 0) return; + + const formattedTime = (seconds) => { + const mins = Math.floor(seconds / 60) + .toString() + .padStart(2, "0"); + const secs = (seconds % 60).toString().padStart(2, "0"); + return `${mins}:${secs}`; + }; + + display.innerHTML = `Time Remaining: ${formattedTime(totalSeconds)}`; + + alarmInterval = setInterval(() => { + totalSeconds--; + + display.innerHTML = `Time Remaining: ${formattedTime(totalSeconds)}`; + + if (totalSeconds <= 0) { + clearInterval(alarmInterval); + playAlarm(); + } + }, 1000); +} // DO NOT EDIT BELOW HERE From 473b4a487fa610b4f15b7e8f7c577c060214d036 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Thu, 26 Mar 2026 00:42:03 +0000 Subject: [PATCH 3/9] update css --- Sprint-3/alarmclock/style.css | 87 ++++++++++++++++++++++++++++++++++- 1 file changed, 86 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..d604b5a5f 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,4 +1,89 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Roboto", "Segoe UI", sans-serif; +} + +body { + background: linear-gradient(#d49562, #9e897c); + color: #797d8131; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +/* Centered card*/ .centre { + background-color: #a16093; + padding: 40px 60px; + border-radius: 10px; + text-align: center; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + min-width: 300px; +} + +/* Time display */ +h1 { + font-size: 2.5rem; + margin-bottom: 30px; + font-weight: 600; + color: #f1bcaf; + letter-spacing: 1px; +} + +/* Input time*/ +#alarmSet { + padding: 4px 15px 6px 15px; + font-size: 1.3rem; + border-radius: 4px; + border: 2px solid #cbc1bc; + outline: none; + margin-bottom: 20px; + margin-right: 10px; + width: 100px; + text-align: center; + background-color: #e8dfdb; + color: #121212; +} + +/* Buttons */ +button { + padding: 12px 25px; + margin: 10px; + font-size: 1rem; + border-radius: 5px; + border: none; + cursor: pointer; + font-weight: 600; + transition: all 0.3s ease-in-out; +} + +/* Set Alarm */ +#set { + background-color: #2b2c2d; + color: #fff; +} + +#set:hover { + background-color: #2b2c2d7b; + transform: translateY(-2px); +} + +/* Stop Alarm */ +#stop { + background-color: #2b2c2d; + color: #fff; +} + +#stop:hover { + background-color: brown; + transform: translateY(-1px); +} + +/* keep old styling in case you need to revert back */ +/* .centre { position: fixed; top: 50%; left: 50%; @@ -12,4 +97,4 @@ h1 { text-align: center; -} +} */ From 9ddf20698595b5cfca66f66b5b24722891f6808d Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Sun, 29 Mar 2026 19:35:05 +0100 Subject: [PATCH 4/9] add color changing background and update card style --- Sprint-3/alarmclock/alarmclock.js | 49 +++++++++++++++++++++++++++++-- Sprint-3/alarmclock/style.css | 14 ++++----- 2 files changed, 54 insertions(+), 9 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 99bb70799..e83e414fd 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,9 +1,11 @@ let alarmInterval; +let colorInterval; function setAlarm() { clearInterval(alarmInterval); - let timeRemaining = document.getElementById("alarmSet"); - const display = document.getElementById("timeRemaining"); + const timeRemaining = document.querySelector("#alarmSet"); + const display = document.querySelector("#timeRemaining"); + if (!timeRemaining || !display) return; //what ever we input is turned into seconds let totalSeconds = parseInt(timeRemaining.value); @@ -30,6 +32,49 @@ function setAlarm() { } }, 1000); } +//add color changing background when alarm reaches 0 until stopped. +//function from color changing assignment 10 year ago! +function makeRandomColor() { + var colorOptions = '0123456789ABCDEF'; + var newColor = '#'; +//repeat 6 times to generate 6 random hex digits from the 16 characters in colorOptions + for (var i = 0; i < 6; i++) { + //picks random numbers from colorOptions and appends it to the # to make a new color. + newColor += colorOptions[Math.floor(Math.random() * 16)]; + } + return newColor; +} +//end color changing + +//keep the existing code below and call the setup +//set the background color transition +document.body.style.transition = "background-color 0.7s ease"; +// call the entire page +window.addEventListener("load", function () { + // attach the alarm sound to the make Random color so it starts changing when the alarm starts. + audio.addEventListener("play", () => { + // stops any previous color changing intervals + clearInterval(colorInterval); +//starts a new repeating timer and saves it's ID in colorInterval. setInterval runs every 2seconds + colorInterval = setInterval(() => { + //style the background and make it important! so it over-rides the style.css + document.body.style.setProperty( + "background-color", + makeRandomColor(), + "important" + ); + //closes setInterval after 2 seconds + }, 1000); + }); + + audio.addEventListener("pause", () => { + clearInterval(colorInterval); + document.body.style.backgroundColor = ""; + }); +}); +//not sure that this is helping. The function works without it. +window.setAlarm = setAlarm; + //end linking // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index d604b5a5f..3df01d7ad 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -6,8 +6,8 @@ } body { - background: linear-gradient(#d49562, #9e897c); - color: #797d8131; + background: #c5b7a9; + color: #797d8131; height: 100vh; display: flex; justify-content: center; @@ -16,7 +16,7 @@ body { /* Centered card*/ .centre { - background-color: #a16093; + background-color: #000000; padding: 40px 60px; border-radius: 10px; text-align: center; @@ -62,18 +62,18 @@ button { /* Set Alarm */ #set { - background-color: #2b2c2d; + background-color: #1f6718; color: #fff; } #set:hover { - background-color: #2b2c2d7b; - transform: translateY(-2px); + background-color: #447f3d; + transform: translateY(-1px); } /* Stop Alarm */ #stop { - background-color: #2b2c2d; + background-color: #825047; color: #fff; } From dbc914a26bdc2b5df3967c95f993564f44ab113d Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Sun, 29 Mar 2026 20:09:05 +0100 Subject: [PATCH 5/9] format code --- Sprint-3/alarmclock/alarmclock.js | 16 ++++++++-------- Sprint-3/alarmclock/style.css | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index e83e414fd..2894d5bcb 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -33,11 +33,11 @@ function setAlarm() { }, 1000); } //add color changing background when alarm reaches 0 until stopped. -//function from color changing assignment 10 year ago! +//function from color changing assignment 10 year ago! function makeRandomColor() { - var colorOptions = '0123456789ABCDEF'; - var newColor = '#'; -//repeat 6 times to generate 6 random hex digits from the 16 characters in colorOptions + var colorOptions = "0123456789ABCDEF"; + var newColor = "#"; + //repeat 6 times to generate 6 random hex digits from the 16 characters in colorOptions for (var i = 0; i < 6; i++) { //picks random numbers from colorOptions and appends it to the # to make a new color. newColor += colorOptions[Math.floor(Math.random() * 16)]; @@ -51,11 +51,11 @@ function makeRandomColor() { document.body.style.transition = "background-color 0.7s ease"; // call the entire page window.addEventListener("load", function () { - // attach the alarm sound to the make Random color so it starts changing when the alarm starts. + // attach the alarm sound to the make Random color so it starts changing when the alarm starts. audio.addEventListener("play", () => { - // stops any previous color changing intervals + // stops any previous color changing intervals clearInterval(colorInterval); -//starts a new repeating timer and saves it's ID in colorInterval. setInterval runs every 2seconds + //starts a new repeating timer and saves it's ID in colorInterval. setInterval runs every 2seconds colorInterval = setInterval(() => { //style the background and make it important! so it over-rides the style.css document.body.style.setProperty( @@ -74,7 +74,7 @@ window.addEventListener("load", function () { }); //not sure that this is helping. The function works without it. window.setAlarm = setAlarm; - //end linking +//end linking // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 3df01d7ad..303c7e951 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -67,7 +67,7 @@ button { } #set:hover { - background-color: #447f3d; + background-color: #447f3d; transform: translateY(-1px); } From 3ef2c6548f798123f6d68bb84f7b66224c846f3c Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Mon, 30 Mar 2026 22:06:34 +0100 Subject: [PATCH 6/9] update time for color changing --- Sprint-3/alarmclock/alarmclock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 2894d5bcb..4c19d0ac6 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -63,7 +63,7 @@ window.addEventListener("load", function () { makeRandomColor(), "important" ); - //closes setInterval after 2 seconds + //closes setInterval after 1 seconds }, 1000); }); From 6fcbfc72b1ada31b1d21c42225dc27760af9c80b Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Mon, 30 Mar 2026 22:21:00 +0100 Subject: [PATCH 7/9] changed variable declaration --- Sprint-3/alarmclock/alarmclock.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 4c19d0ac6..52c951e6d 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -35,10 +35,10 @@ function setAlarm() { //add color changing background when alarm reaches 0 until stopped. //function from color changing assignment 10 year ago! function makeRandomColor() { - var colorOptions = "0123456789ABCDEF"; - var newColor = "#"; + let colorOptions = "0123456789ABCDEF"; + let newColor = "#"; //repeat 6 times to generate 6 random hex digits from the 16 characters in colorOptions - for (var i = 0; i < 6; i++) { + for (let i = 0; i < 6; i++) { //picks random numbers from colorOptions and appends it to the # to make a new color. newColor += colorOptions[Math.floor(Math.random() * 16)]; } From 843f4311f4ac9bfed7bb4fa0e89976339061c493 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Thu, 9 Apr 2026 21:23:13 +0100 Subject: [PATCH 8/9] add placeholder to hint to user about input data --- Sprint-3/alarmclock/alarmclock.js | 19 +++++++++++++------ Sprint-3/alarmclock/index.html | 3 ++- Sprint-3/alarmclock/package.json | 5 ++++- Sprint-3/alarmclock/style.css | 22 ++++++++++++++++++++-- 4 files changed, 39 insertions(+), 10 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 52c951e6d..fc609828c 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,16 +1,25 @@ let alarmInterval; let colorInterval; +let errorTimeout; function setAlarm() { clearInterval(alarmInterval); const timeRemaining = document.querySelector("#alarmSet"); const display = document.querySelector("#timeRemaining"); - if (!timeRemaining || !display) return; + const error = document.querySelector("#error"); + if (!timeRemaining || !display|| !error) return; //what ever we input is turned into seconds let totalSeconds = parseInt(timeRemaining.value); - - if (isNaN(totalSeconds) || totalSeconds <= 0) return; - + // throw an error message if the user enters nothing and presses the alarm button. + if (isNaN(totalSeconds) || totalSeconds <= 0) { + error.textContent = "Please enter a valid number in seconds!"; + //set error to disappear after 3 seconds + clearTimeout(errorTimeout); + errorTimeout = setTimeout(() => { + error.textContent = ""; + }, 3000); + return; +} const formattedTime = (seconds) => { const mins = Math.floor(seconds / 60) .toString() @@ -72,8 +81,6 @@ window.addEventListener("load", function () { document.body.style.backgroundColor = ""; }); }); -//not sure that this is helping. The function works without it. -window.setAlarm = setAlarm; //end linking // DO NOT EDIT BELOW HERE diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index ff2d3b453..4529c1d02 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -10,10 +10,11 @@

Time Remaining: 00:00

- + +

diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json index e1331e071..92e81d7b7 100644 --- a/Sprint-3/alarmclock/package.json +++ b/Sprint-3/alarmclock/package.json @@ -13,5 +13,8 @@ "bugs": { "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" }, - "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme" + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "devDependencies": { + "@testing-library/jest-dom": "^6.9.1" + } } diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 303c7e951..784e0acd0 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -32,7 +32,12 @@ h1 { color: #f1bcaf; letter-spacing: 1px; } - +/*to set time*/ +label { + color: #f1bcaf; + font-size: 1rem; + font-weight: 600; +} /* Input time*/ #alarmSet { padding: 4px 15px 6px 15px; @@ -42,11 +47,18 @@ h1 { outline: none; margin-bottom: 20px; margin-right: 10px; - width: 100px; + width: 120px; text-align: center; background-color: #e8dfdb; color: #121212; } +/*placeholder text*/ +#alarmSet::placeholder { + color: #8f8d8c; + font-style: italic; + font-size: 0.9rem; + opacity: 1; +} /* Buttons */ button { @@ -82,6 +94,12 @@ button { transform: translateY(-1px); } +#error { + color: red; + height: 1em; + font-size: 1rem; +} + /* keep old styling in case you need to revert back */ /* .centre { position: fixed; From 3894cc5b9f6dbaeaa418bde509ae11d82c44b342 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Fri, 10 Apr 2026 11:49:46 +0100 Subject: [PATCH 9/9] update placeholder, update remove window onlad, update error message --- Sprint-3/alarmclock/alarmclock.js | 10 +++++----- Sprint-3/alarmclock/index.html | 5 ++--- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index fc609828c..02beb4d37 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -7,7 +7,7 @@ function setAlarm() { const timeRemaining = document.querySelector("#alarmSet"); const display = document.querySelector("#timeRemaining"); const error = document.querySelector("#error"); - if (!timeRemaining || !display|| !error) return; + if (!timeRemaining || !display || !error) return; //what ever we input is turned into seconds let totalSeconds = parseInt(timeRemaining.value); // throw an error message if the user enters nothing and presses the alarm button. @@ -16,10 +16,10 @@ function setAlarm() { //set error to disappear after 3 seconds clearTimeout(errorTimeout); errorTimeout = setTimeout(() => { - error.textContent = ""; - }, 3000); - return; -} + error.textContent = ""; + }, 3000); + return; + } const formattedTime = (seconds) => { const mins = Math.floor(seconds / 60) .toString() diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 4529c1d02..69d99af01 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,4 +1,4 @@ - + @@ -10,8 +10,7 @@

Time Remaining: 00:00

- - +