Skip to content

NW| 25-ITP-Sep | Ahmad Hmedan | Sprint 3 | Alarm clock #911

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

NW| 25-ITP-Sep | Ahmad Hmedan | Sprint 3 | Alarm clock #911

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
229a2de
update the page title and write alarmclock code
AhmadHmedann Dec 5, 2025
ee63ed7
clear the input field after user click set alarm
AhmadHmedann Dec 5, 2025
b4bde21
handl zero input and empty input
AhmadHmedann Dec 5, 2025
ccf9c34
handle negative input
AhmadHmedann Dec 5, 2025
2cd628f
use const instead let in the updateDisplay function \n decrement th…
AhmadHmedann Dec 6, 2025
61111e7
handle string input
AhmadHmedann Dec 6, 2025
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
39 changes: 38 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 timerId = null;
Copy link

@jaymes15 jaymes15 Dec 6, 2025

Choose a reason for hiding this comment

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

✔ Good: clear global state variables.

let remainingSeconds = 0;

function updateDisplay() {
Copy link

@jaymes15 jaymes15 Dec 6, 2025

Choose a reason for hiding this comment

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

Good separation of display logic

let minutes = String(Math.floor(remainingSeconds / 60)).padStart(2, "0");
Copy link

@jaymes15 jaymes15 Dec 6, 2025

Choose a reason for hiding this comment

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

Proper time formatting with padStart()

Nice One!

let seconds = String(remainingSeconds % 60).padStart(2, "0");
Copy link

@jaymes15 jaymes15 Dec 6, 2025

Choose a reason for hiding this comment

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

Use const instead of let for minutes and seconds because they are never reassigned.

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

function startCountdown() {
Copy link

@jaymes15 jaymes15 Dec 6, 2025

Choose a reason for hiding this comment

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

Good function name — clear purpose.

if (remainingSeconds < 0) remainingSeconds = 0;
timerId = setInterval(() => {
updateDisplay();
Copy link

@jaymes15 jaymes15 Dec 6, 2025

Choose a reason for hiding this comment

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

This runs before decrementing remainingSeconds, causing the countdown to visually lag by one second.


if (remainingSeconds <= 0) {
Copy link

@jaymes15 jaymes15 Dec 6, 2025

Choose a reason for hiding this comment

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

The sequence of logic in this if block would cause some issues.
This is the order you are following currently:

  • The timer checks for zero before subtracting.
  • So the alarm plays one second late.
  • Also remainingSeconds becomes -1 often.

Why not Subtract first, then check?

remainingSeconds = 0;
clearInterval(timerId);
timerId = null;
playAlarm();
}
remainingSeconds -= 1;
}, 1000);
}

function setAlarm() {
const input = document.getElementById("alarmSet");
Copy link

@jaymes15 jaymes15 Dec 6, 2025

Choose a reason for hiding this comment

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

I think we can have better validation in setAlarm function.

  • If input is negative
  • if input is a string of text
  • you did a good job checking for empty string

Copy link
Author

@AhmadHmedann AhmadHmedann Dec 6, 2025

Choose a reason for hiding this comment

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

Thank you for your feedback — it was really helpful, and I understood what you meant straight away.
In the HTML file, Their is a validation rule using the type attribute in Index.html file. Should I always treat HTML and JavaScript as separate layers and include validation in both?

Copy link
Member

@illicitonion illicitonion Dec 19, 2025

Choose a reason for hiding this comment

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

Within a frontend, JavaScript can generally rely on HTML validation. But generally when crossing system boundaries (e.g. if your frontend was posting data to a backend), each separate component needs to decide whether it trusts whoever is sending data to it, or whether its should validate it (again).

In general, though, HTML and JavaScript in a browser can be treated like one component which can trust each other for this kind of thing. But e.g. your HTML has no validation that the number is > 0, so it's good that you validate that here. (It's an interesting question whether to treat -100 like 0, or whether to give the user an error telling them they probably made a mistake, though!)

if (input.value === "") return;
const inputValue = Number(input.value);
clearInterval(timerId);
timerId = null;
remainingSeconds = inputValue;

updateDisplay();
startCountdown();
input.value = "";
}

// DO NOT EDIT BELOW HERE

Expand Down
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