London | 26-ITP-Jan | Miriam Jorna | Sprint 3 | Alarmclock by miriamjorna · Pull Request #1192 · CodeYourFuture/Module-Data-Groups

miriamjorna · 2026-04-11T00:03:34Z

Self checklist

I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
My changes meet the requirements of the task
I have tested my changes
My changes follow the style guide

Changelist

Made a working alarm clock.
The page changes colour when the alarm goes off.
I've made a colour reset provision for when the alarm is paused (=what the user perceives as turning it off).
Noticed input could be negative; have made sure only positive integers can now be used to set the time.

cjyuan

Currently, when starting a new countdown, the application does not always return to a clean initial state, which can lead to inconsistent behavior between runs.

Consider introducing a dedicated reset function to return the app to a clean initial state, and call this function before starting a new countdown to help ensure consistency.

Hint: a user may not click the "Stop" button first before starting a new count down.

cjyuan · 2026-04-11T14:33:41Z

+  if (seconds <= 0) {
+  alert("The number of seconds must be more than 0 please");
+  return;
+}


Indentation is off.

Have you installed the prettier VSCode extension and enabled "Format on save/paste" on VSCode,
as recommended in
https://github.com/CodeYourFuture/Module-Structuring-and-Testing-Data/blob/main/readme.md
?

If you have enabled "Format on save" but it is not working, it is likely that you haven't assign a formatter for JS file. This could happen if you have zero or multiple extensions that can format .js file.

If you have installed "Prettier" extension. To assign it as the formatter of JS code, you can try:

Use "Format document" to format the JS file. Sometimes, VSCode will ask you to choose a formatter, and you can manually select "Prettier".

Edit settings.json and set Prettier as the default formatter for JS.

See: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Oh, my apologies, I inserted that and did not prettify it after doing so. Tbh I would normally have done that by hand quickly. Just forgot.

cjyuan · 2026-04-11T14:36:29Z

+  let seconds = parseInt(document.getElementById("alarmSet").value);
+
+  if (seconds <= 0) {


Some invalid input can make the app behave abnormally.

Note: Why requiring min to be 0 here but set the "min" attribute in HTML to 1?

To be honest I'm a bit puzzled by your note.
When I noticed that the little arrows on the input box could give negative values I changed the requirements to be >0 by putting in this
if (seconds <= 0)
alert("The number of seconds must be more than 0 please");
and making sure the input required integers.

It has to be minimal 1 because otherwise the clock can't start.
What am I missing that makes you state the min is 0 here? Because when it is 0 the warning comes up?

Oh wait, a different notation would work for both things you said.
Have changed it to
(!seconds || seconds < 1)

cjyuan · 2026-04-15T01:07:49Z

+  function updateDisplay() {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    document.getElementById("timeRemaining").textContent =
+      `Time Remaining: ${String(minutes).padStart(2, "0")}:${String(remainingSeconds).padStart(2, "0")}`;
+  }


Would be better to design the function to take seconds through a parameter, and move the function to the outer scope.

This way, you can call updateDisplay(0) on line 7 -- keep the display logic in one place.

cjyuan · 2026-04-15T01:14:24Z

+  audio.pause();
+  document.getElementById("timeRemaining").textContent = "Time Remaining: 00:00";
+  document.body.classList.toggle("alarm-activated", false);
+}


This function is never called.

cjyuan · 2026-04-15T01:16:21Z

+  // code to reset background
+    function pauseAlarm() {
+      audio.pause();
+      document.body.classList.toggle("alarm-activated", false);
+    }


This function is also never called.

cjyuan · 2026-04-15T01:17:35Z

@@ -1,4 +1,46 @@
-function setAlarm() {}
+let countdown;


Consider renaming countdown to countdownInterval or intervalId since this stores the interval ID, not the countdown value.

miriamjorna added 3 commits April 11, 2026 00:41

alarmclock

bc46214

added Pause button

724f78e

adjustments to let the input be positive integers

b5531bb

This comment has been minimized.

Sign in to view

miriamjorna added 2 commits April 11, 2026 10:03

Remove package.json from tracking

fa5b440

Remove package.json

3fb860f

This comment has been minimized.

Sign in to view

removing package.json as it's blocking the PR to be approved

055596b

miriamjorna added 📅 Sprint 3 Assigned during Sprint 3 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Apr 11, 2026

This comment has been minimized.

Sign in to view

github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Apr 11, 2026

This comment has been minimized.

Sign in to view

miriamjorna added 3 commits April 11, 2026 13:52

putting package.json back...

57ab5ca

removed redundant pause button and added package.json anew

3453a0c

renewed directory due to data corruption

459b265

miriamjorna added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Apr 11, 2026

cjyuan reviewed Apr 11, 2026

View reviewed changes

cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Apr 11, 2026

corrections and improvements after review

0a1c10e

miriamjorna added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Apr 14, 2026

cjyuan reviewed Apr 15, 2026

View reviewed changes

cjyuan removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Apr 15, 2026

		let seconds = parseInt(document.getElementById("alarmSet").value);

		if (seconds <= 0) {

Uh oh!

Conversation

miriamjorna commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelist

Uh oh!

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

miriamjorna commented Apr 11, 2026 •

edited

Loading