Skip to content

Cape Town| 26-ITP-May | Liyema Mfengwana| Sprint 3 | Alarm clock app #1417

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
LiyemaMfengwana wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Cape Town| 26-ITP-May | Liyema Mfengwana| Sprint 3 | Alarm clock app #1417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
93a73e6
change index title
LiyemaMfengwana Aug 10, 2026
0cf81a3
add js
LiyemaMfengwana Aug 10, 2026
af2f111
edit js
LiyemaMfengwana Aug 10, 2026
18dfc07
add let timer
LiyemaMfengwana Aug 15, 2026
b9d984c
change let to const
LiyemaMfengwana Aug 15, 2026
15bfe59
change setalarm function
LiyemaMfengwana Aug 15, 2026
d78233b
Save the timer ID so we can cancel it if a new alarm is set
LiyemaMfengwana Aug 15, 2026
cc49374
comment
LiyemaMfengwana Aug 15, 2026
3e316db
add type min to 1
LiyemaMfengwana Aug 15, 2026
ee991a5
Prevent negative alarm input
LiyemaMfengwana Aug 15, 2026
eb7342b
fix error
LiyemaMfengwana Aug 15, 2026
8d40548
edit
LiyemaMfengwana Aug 15, 2026
8ace4a4
disable set alarm button
LiyemaMfengwana Aug 15, 2026
21be02b
add code
LiyemaMfengwana Aug 15, 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
54 changes: 53 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,56 @@
function setAlarm() {}
let timer; // let because timer will be assigned a new timeout ID each time.
let timerRunning = false;

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

input.addEventListener("keydown", function (event) {
if (event.key === "-" || event.key === "e") {
event.preventDefault();
}
});

function setAlarm() {
if (timerRunning) {
return;
}

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

// Convert the input value from a string to a number
let seconds = Number(input.value);

// Don't start the alarm if the input is empty or negative/zero
if (input.value === "" || seconds <= 0) {
return;
}

timerRunning = true;
document.getElementById("set").disabled = true;

function countdown() {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;

const formattedMinutes = String(minutes).padStart(2, "0");
const formattedSeconds = String(remainingSeconds).padStart(2, "0");

document.getElementById("timeRemaining").textContent =
`Time Remaining: ${formattedMinutes}:${formattedSeconds}`;

if (seconds === 0) {

@selyafi selyafi Aug 12, 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.

2 cases to check

  1. Click Set Alarm with the input left empty. What does Number("") give you?
  2. The input is type="number", so a user can type -5. Try it pls.

playAlarm();
input.value = "";
timerRunning = false;
document.getElementById("set").disabled = false;
return;
}

seconds--;
timer = setTimeout(countdown, 1000);
}

countdown();

@selyafi selyafi Aug 12, 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.

Try in the browser: set the alarm to 30, then straight away change the input to 10 and click Set Alarm again.

What do you expect to happen? What actually happens?

Think about how many countdowns are running at that point, and what each one is doing to the heading. setTimeout returns something when you call it and that might be useful.

@LiyemaMfengwana LiyemaMfengwana Aug 15, 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.

Thanks for the feedback! I've made the requested changes:

Added validation for empty and non-positive input.
Added min="1" to prevent negative values through the number input.
Changed variables to const where they aren't reassigned.
Stored the setTimeout ID.
Prevented users from setting a new alarm while a countdown is already running by disabling the Set Alarm button.
Re-enabled the button once the countdown finishes.

}

// DO NOT EDIT BELOW HERE

Expand Down
6 changes: 3 additions & 3 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!DOCTYPE html>
<!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>
<title>Alarm clock app</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" />
<input id="alarmSet" type="number" min="1" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
Expand Down