Skip to content

London | 26-ITP-May | Eyob Zeray | Sprint 3 | alarmclock #1316

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
eyob-tech wants to merge 3 commits into
base: main
Choose a base branch
from
+40 −2
Open

London | 26-ITP-May | Eyob Zeray | Sprint 3 | alarmclock #1316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ef6002
Implement setAlarm() with countdown timer and fix template literal sy…
eyob-tech Jul 27, 2026
f5346f4
fix page title to say Alarm Clock APP
eyob-tech Jul 30, 2026
7633409
Clear existing interval before starting a new one on repeated clicks
eyob-tech Jul 30, 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
40 changes: 39 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,41 @@
function setAlarm() {}
let currentIntervalId = null;

function setAlarm() {

@Luro91 Luro91 Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

What happens when a user clicks the set alarm button multiple times?

@eyob-tech eyob-tech Jul 30, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Ah good catch — turns out clicking it multiple times was starting a new countdown each time without stopping the old one, so they’d all run at once and mess with the display. I fixed it by keeping track of the current interval outside the function, and clearing it out before starting a fresh one whenever setAlarm() runs again:
let currentIntervalId = null;

function setAlarm() {
// ...validation, then:

if (currentIntervalId !== null) {
clearInterval(currentIntervalId);
}

currentIntervalId = setInterval(() => {
secondsRemaining--;
updateDisplay();

if (secondsRemaining <= 0) {
  clearInterval(currentIntervalId);
  currentIntervalId = null;
  playAlarm();
}

}, 1000);
}

const input = document.getElementById("alarmSet");
const heading = document.getElementById("timeRemaining");

let secondsRemaining = Number(input.value);

@Luro91 Luro91 Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

What happens if the number is 0 or negative?

@eyob-tech eyob-tech Jul 30, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Good catch — I added a check right after reading the input to handle that. If the number's 0, negative, or not a real number at all, it just shows a message asking for a valid number and stops there instead of kicking off a countdown:

let secondsRemaining = Number(input.value);

if (!secondsRemaining || secondsRemaining <= 0) {
heading.innerText = "Please enter a number of seconds greater than 0";
return;
}


if (!secondsRemaining || secondsRemaining <= 0) {
heading.innerText = "Please enter a number of seconds greater than 0";
return;
}

function updateDisplay() {
const minutes = Math.floor(secondsRemaining / 60);
const seconds = secondsRemaining % 60;
const paddedMinutes = String(minutes).padStart(2, "0");
const paddedSeconds = String(seconds).padStart(2, "0");
heading.innerText = Time Remaining: ${paddedMinutes}:${paddedSeconds};
}
Comment on lines +14 to +20

@Luro91 Luro91 Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Good job putting the code for formatting into an own function. This makes it reusable and easier to change the formatting if needed


updateDisplay();

if (currentIntervalId !== null) {
clearInterval(currentIntervalId);
}

currentIntervalId = setInterval(() => {
secondsRemaining--;
updateDisplay();

if (secondsRemaining <= 0) {
clearInterval(currentIntervalId);
currentIntervalId = null;
playAlarm();
}
}, 1000);
}

// DO NOT EDIT BELOW HERE

Expand All @@ -23,3 +60,4 @@ function pauseAlarm() {
}

window.onload = setup;

2 changes: 1 addition & 1 deletion Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<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>
<div class="centre">
Expand Down
Loading