London|26-ITP-January|Alexandru Pocovnicu|Sprint 3| alarm clock by alexandru-pocovnicu · Pull Request #1057 · CodeYourFuture/Module-Data-Groups

alexandru-pocovnicu · 2026-03-20T18:08:32Z

Learners, PR Template

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

implemented an alarm clock that counts down from the input value

…logic

cjyuan

Code works fine if a user only clicks the "Set Alarm" button once.
However, if the user enters a time and then clicks the "Set Alarm" button multiple times, the countdown clock will not display properly.
Can you fix the issue?

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

Consider introducing a dedicated reset function to return the app to a clean initial state to help ensure consistency.

Sprint-3/alarmclock/alarmclock.js

alexandru-pocovnicu · 2026-04-03T08:43:31Z

when i press stopalarm i want the countdown to go to 0,call pauseAlarm(), and the class to be removed from the body,but on line 48 i have this message // DO NOT EDIT BELOW HERE, I can't really think of a way of doing it without adding code bellow that

cjyuan

Note: To reset countdown display when the user clicks "Stop", and without modifying existing code, you can add another event listener to the stop button:

  document.getElementById("stop").addEventListener("click", () => {
    // Your code here ...
  });

Sprint-3/alarmclock/alarmclock.js

cjyuan · 2026-04-03T13:42:29Z

Sprint-3/alarmclock/alarmclock.js

+    let paddedSeconds = seconds.toString().padStart(2, "0");
+    let paddedMinutes = minutes.toString().padStart(2, "0");
+    timeRemainingEl.innerHTML = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;
+    alarmSetEl.value = null;


Why clear the input field when updating the timer display? When a countdown is active, it will be cleared every second.

didn't realise it was doing it every second , now there is a dedicated function to clear everything when the alarm is set

cjyuan · 2026-04-06T16:04:59Z

Sprint-3/alarmclock/alarmclock.js

+  const pauseButton = document.getElementById("pause-button");
+  if (pauseButton) {
+    pauseButton.removeAttribute("id");
+    pauseButton.classList.add("unpause-alarm");
+    pauseButton.addEventListener("click", pauseCountDown);
+  }


This is an unusual way to perform the tasks once (or to make the pause button visible when the "Start alarm" button is clicked the first time). Why not perform the task once on page load?

Currently unpause-alarm class does not have any style defined in style.css. (Work in progress?)

i was thinking to use it , since i was removing the id I needed something to work with, i removed both from css

cjyuan · 2026-04-06T16:11:11Z

Sprint-3/alarmclock/alarmclock.js

+  cleanInitialState();
+
+  function updateCountDown() {
+    remainingSeconds = totalSeconds;


You have already assigned totalSeconds to remainingSeconds on line 16, why not just use only remainingSeconds in the remaining part of the function?

cjyuan · 2026-04-06T16:15:37Z

Sprint-3/alarmclock/alarmclock.js

+    let seconds = totalSeconds % 60;
+    let minutes = (totalSeconds - seconds) / 60;
+
+    let paddedSeconds = seconds.toString().padStart(2, "0");
+    let paddedMinutes = minutes.toString().padStart(2, "0");
+    timeRemainingEl.innerHTML = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;


Better to implement the logic to "update the displayed time" in a function, and then use a function call to replace the code on lines 30-35, 66-71, 85.

Pros:

Centralised logic (improved maintainability)

Less code

cjyuan · 2026-04-06T16:22:48Z

Sprint-3/alarmclock/alarmclock.js

+    intervalId = setInterval(() => {
+      if (remainingSeconds <= 0) {
+        clearInterval(intervalId);
+        return;
+      }
+      remainingSeconds -= 1;
+      const seconds = remainingSeconds % 60;
+      const minutes = (remainingSeconds - seconds) / 60;
+      const paddedSeconds = seconds.toString().padStart(2, "0");
+      const paddedMinutes = minutes.toString().padStart(2, "0");
+      document.getElementById("timeRemaining").innerHTML =
+        `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;
+
+      if (remainingSeconds <= 0) {
+        document.body.classList.add("finish-countdown");
+        playAlarm();
+        clearInterval(intervalId);
+      }
+    }, 1000);


It seems the code here is very similar to those perform in setAlarm(). Can you try reusing the code you have in setAlarm()?

…function

cjyuan · 2026-04-06T21:42:31Z

Sprint-3/alarmclock/alarmclock.js

+function cleanInitialState() {
+  clearInterval(intervalId);
+  document.body.classList.remove("finish-countdown");
+  document.getElementById("timeRemaining").innerHTML = "Time Remaining: 00:00";


Could also call updateDiplayedTime(0) to keep the logic of displaying time in one place.

cjyuan · 2026-04-06T21:48:04Z

Sprint-3/alarmclock/alarmclock.js

+  const pauseButton = document.getElementById("pause-button");
+    pauseButton.textContent = "Pause";
+    pauseButton.addEventListener("click", pauseCountDown);


You can reset the isPaused flag and the "Pause" button state in cleanInitialState(), and add event listener only once on page load.

Currently, the same event listener will be added to the button multiple times (once per function call).

but if i move the listener inside cleanInitialState(), which is called everytime setAlarm() is called, isn't that the same thing, how about instead, i remove the listener inside setAlarm just before adding it?
thank you

I mean, perform this in cleanInitialState()

const pauseButton = document.getElementById("pause-button"); pauseButton.textContent = "Pause";

and perform this on page load

window.addEventListener("load", function() { const pauseButton = document.getElementById("pause-button"); pauseButton.addEventListener("click", pauseCountDown); });

…isplay

…Alarm function

cjyuan · 2026-04-09T16:23:09Z

Sprint-3/alarmclock/alarmclock.js

+  clearInterval(intervalId);
+  document.body.classList.remove("finish-countdown");
+  updateDisplayedTime(0)
+  document.getElementById("alarmSet").value = null;


.value is a string, so better to write document.getElementById("alarmSet").value = "";.

cjyuan · 2026-04-09T16:28:24Z

Sprint-3/alarmclock/alarmclock.js

+  const pauseButton = document.getElementById("pause-button");
+    pauseButton.textContent = "Pause";
+    pauseButton.addEventListener("click", pauseCountDown);


I mean, perform this in cleanInitialState()

const pauseButton = document.getElementById("pause-button"); pauseButton.textContent = "Pause";

and perform this on page load

window.addEventListener("load", function() { const pauseButton = document.getElementById("pause-button"); pauseButton.addEventListener("click", pauseCountDown); });

alexandru-pocovnicu added 7 commits March 16, 2026 18:10

Fix: update document title to 'Alarm clock app'

47f91e5

Fix: implement setAlarm function to display time remaining

41537a4

extract the seconds and minutes

3ab9799

Refactor: enhance setAlarm function to improve countdown display and …

8a4ba11

…logic

change background to blue when stop alarm is selected

ca62e47

alternate background color

08fbcbd

deleted code for remove class

aa8df3b

alexandru-pocovnicu added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Mar 20, 2026

cjyuan reviewed Mar 30, 2026

View reviewed changes

Sprint-3/alarmclock/alarmclock.js Show resolved Hide resolved

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 Mar 30, 2026

alexandru-pocovnicu added 3 commits April 2, 2026 16:48

added return when the input is 0, so timer doesn't start

950cd4a

added function to clean the initial state

4aafd50

add checks for valid input

dc665e5

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

cjyuan reviewed Apr 3, 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 3, 2026

alexandru-pocovnicu added 3 commits April 4, 2026 14:17

create pause button,

b81719d

refactor CSS for consistency and clarity

8354926

addresse reviewer's changes

063a0fa

cjyuan reviewed Apr 6, 2026

View reviewed changes

alexandru-pocovnicu added 6 commits April 6, 2026 18:35

delete redundant code

5d64c66

created function to update display

c84e2a9

move countdown logic to finishCountDown()

894313e

remove unused pause button styles and empty unpause-alarm class

3b6db49

capitalize unpause button text in pauseCountDown function

11d7474

remove class

5209ca9

alexandru-pocovnicu added 2 commits April 6, 2026 19:31

remove id attribute from pause button in setAlarm function

4251c18

set pause button text and ensure event listener is added in setAlarm …

a65ca54

…function

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

cjyuan reviewed Apr 6, 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 6, 2026

alexandru-pocovnicu added 4 commits April 9, 2026 10:19

use display time logic instead of hard coding it

6d09014

refactor cleanInitialState to use updateDisplayedTime for resetting d…

6799a86

…isplay

initialize isPaused in cleanInitialState function

fbb165f

remove event listener for pause button before adding a new one in set…

74c4c23

…Alarm function

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

cjyuan reviewed Apr 9, 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 9, 2026

Uh oh!

Conversation

alexandru-pocovnicu commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Learners, PR Template

Changelist

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexandru-pocovnicu commented Apr 3, 2026

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

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!

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!

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

alexandru-pocovnicu commented Mar 20, 2026 •

edited

Loading