Skip to content

London | 26-ITP-May | Yonatan Teklemariam | Sprint 3 | Alarm Clock #1403

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Yonatanteklemariam wants to merge 5 commits into
base: main
Choose a base branch
from
+110 −17
Open

London | 26-ITP-May | Yonatan Teklemariam | Sprint 3 | Alarm Clock #1403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
28a696f
reverted to original
Yonatanteklemariam Jul 7, 2026
cff19af
reverted to original
Yonatanteklemariam Jul 7, 2026
9e95480
implemented the alarmclock function and added some flashing effect on it
Yonatanteklemariam Aug 7, 2026
ebfc715
Merge branch 'main' into Sprint-3-alarmclock
Yonatanteklemariam Aug 7, 2026
8e5af85
Remove unnecessary whitespace in index.html
Yonatanteklemariam Aug 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 94 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,96 @@
function setAlarm() {}
// This variable will store the interval so we can stop it later
let flashInterval;

// This function makes the background flash red and white
function startFlashing() {
let isRed = false; // keeps track of which color we should show

flashInterval = setInterval(function () {
if (isRed) {
document.body.style.backgroundColor = "white";
} else {
document.body.style.backgroundColor = "red";
}

// Switch the color for next time
isRed = !isRed;
}, 500); // run every half second
}

// This function stops the flashing and resets the background
function stopFlashing() {
clearInterval(flashInterval); // stop the flashing interval
document.body.style.backgroundColor = "white"; // reset background
}
Comment on lines +5 to +24

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If time permits, you could consider implement the flashing background using CSS, and then implement only one function to enable/disable flashing as:

function enabletFlashing(enable) {  // true or false
  if (enable) {
    // Add the CSS class to the body element
  }
  else {
    // Remove the CSS class from the body element
  }
}


function setAlarm() {
// get the value of the input
const input = document.getElementById("alarmSet").value;

// If nothing was typed, exit the function
if (!input) {
return;
}
Comment on lines +28 to +33

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any other value the app should also reject (to prevent it from behaving abnormally)?


let totalSeconds;

// If the user typed something like "2:21"
if (input.includes(":")) {
// Split into minutes and seconds
const parts = input.split(":");
const minutes = Number(parts[0]);
const seconds = Number(parts[1]);

// Convert everything into total seconds
totalSeconds = minutes * 60 + seconds;
} else {
// Otherwise treat the input as normal seconds
totalSeconds = Number(input);
}
Comment on lines +38 to +49

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As the logic for converting an input string to seconds becomes more complicated, it is better to encapsulate the conversion logic in a function. Doing so makes the code easier to read and understand.


// This is the countdown number that will go down every second
let timeLeft = totalSeconds;

// If a previous timer was running, stop it
if (window.countdownTimer) {

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why store countdownTimer in the window object, but keep flashInterval in the global scope of this file?

clearInterval(window.countdownTimer);
}

// A simple helper to turn seconds into MM:SS format
function formatTime(seconds) {
Comment on lines +52 to +60

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interleaving variable declarations, function definitions, and executable code makes the code harder to read and maintain. A common practice is to organise the code in the following order:

// Variable declarations

// Function definitions

// Code to be executed

const mins = Math.floor(seconds / 60);
const secs = seconds % 60;

// Make sure both numbers always have two digits
const paddedMins = String(mins).padStart(2, "0");
const paddedSecs = String(secs).padStart(2, "0");

return `${paddedMins}:${paddedSecs}`;
}

// Show the starting time immediately
document.getElementById("timeRemaining").innerText =
`Time Remaining: ${formatTime(timeLeft)}`;
Comment on lines +72 to +73

@cjyuan cjyuan Aug 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could consider implement a function to display the time instead of repeating the logic several times.


// Start the countdown — runs every 1000ms (1 second)
window.countdownTimer = setInterval(() => {
timeLeft--; // reduce by 1 second

// Update the heading each second
document.getElementById("timeRemaining").innerText =
`Time Remaining: ${formatTime(timeLeft)}`;

// When the timer reaches zero
if (timeLeft <= 0) {
clearInterval(window.countdownTimer); // stop the countdown
clearInterval(flashInterval); // stop the flashing if it was running

@cjyuan cjyuan Aug 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would the background be flashing when a count down was active? (Should the app prevent it from happening?)

document.getElementById("timeRemaining").innerText =
`Time Remaining: 00:00`;
playAlarm(); // play the alarm sound
startFlashing(); // start flashing the background
}
}, 1000);
}

// DO NOT EDIT BELOW HERE

Expand All @@ -11,6 +103,7 @@ function setup() {

document.getElementById("stop").addEventListener("click", () => {
pauseAlarm();
stopFlashing(); // stop flashing if running
});
}

Expand Down
32 changes: 16 additions & 16 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<div class="centre">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Alarm Clock</title>
</head>
<body>
<div class="centre">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>
</body>
<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>
</body>
</html>
Loading