Skip to content

London | May-2026-itp | Chun Yan Wong | Sprint 3 | Alarm clock #1369

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
cywong-dev wants to merge 6 commits into
base: main
Choose a base branch
from
+110 −2
Open

London | May-2026-itp | Chun Yan Wong | Sprint 3 | Alarm clock #1369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
be69028
Change title to 'Alarm Clock App' in index.html
cywong-dev Aug 3, 2026
a8213db
Implement alarm clock functionality with countdown
cywong-dev Aug 3, 2026
c82784c
Add timeRemainingElement initialization in setup function
cywong-dev Aug 9, 2026
c32b718
Refactor timeRemainingElement declaration
cywong-dev Aug 9, 2026
4d7dd24
Modify updateDisplay to accept timeRemaining parameter
cywong-dev Aug 9, 2026
1d5e510
Clean up alarmclock.js by removing unused code
cywong-dev Aug 9, 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
110 changes: 109 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,118 @@
function setAlarm() {}
let countdownInterval = null;
let flashInterval = null;
let timeRemainingElement = null;

@cjyuan cjyuan Aug 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I think it is better to declare timeRemainingElement and initialise it as

const timeRemainingElement = document.getElementById("timeRemaining");
  • Declaring it as const is safer.


let timeRemaining = 0;
let isPaused = false;

function formatTime(totalSeconds) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;

const padMinutes = String(minutes).padStart(2, "0");
const padSeconds = String(seconds).padStart(2, "0");

return `${padMinutes}:${padSeconds}`;
}

function updateDisplay(ptimeRemaining) {
if (timeRemainingElement) {
timeRemainingElement.innerText = `Time Remaining: ${formatTime(ptimeRemaining)}`;
}
}

function startFlashingBackground() {
let isRed = false;
flashInterval = setInterval(() => {
document.body.style.backgroundColor = isRed ? "#ffffff" : "#ff4d4d";
isRed = !isRed;
}, 500);
}

function stopFlashingBackground() {
if (flashInterval) {
clearInterval(flashInterval);
flashInterval = null;
}
document.body.style.backgroundColor = "";
}
Comment thread
cywong-dev marked this conversation as resolved.

function setAlarm() {
const alarmInput = document.getElementById("alarmSet");

// If currently paused, resume countdown
if (isPaused) {
isPaused = false;
startCountdown();
return;
}

// If an active alarm is already running, toggle pause state
if (countdownInterval !== null) {
isPaused = true;
Comment thread
cywong-dev marked this conversation as resolved.
clearInterval(countdownInterval);
countdownInterval = null;
return;
}

// Read time from input field
const inputSeconds = parseInt(alarmInput.value, 10);
if (isNaN(inputSeconds) || inputSeconds <= 0) {
alert("Please enter a valid number of seconds.");
return;
}

timeRemaining = inputSeconds;
stopFlashingBackground();
updateDisplay(timeRemaining);
startCountdown();
}

function startCountdown() {
// Clear any existing timer before starting a new one
if (countdownInterval) {
clearInterval(countdownInterval);
}

countdownInterval = setInterval(() => {
timeRemaining -= 1;
updateDisplay(timeRemaining);

if (timeRemaining <= 0) {
clearInterval(countdownInterval);
countdownInterval = null;
playAlarm();
startFlashingBackground();
}
}, 1000);
}

// Override pauseAlarm to also clear screen effects and reset timers
const originalPauseAlarm = pauseAlarm;
pauseAlarm = function () {
if (typeof originalPauseAlarm === "function") {
originalPauseAlarm();
} else {
audio.pause();
}

// Reset state
if (countdownInterval) {
clearInterval(countdownInterval);
countdownInterval = null;
}
isPaused = false;
stopFlashingBackground();
};

// DO NOT EDIT BELOW HERE

var audio = new Audio("alarmsound.mp3");

function setup() {

timeRemainingElement = document.getElementById("timeRemaining");

document.getElementById("set").addEventListener("click", () => {
setAlarm();
});
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></title>
</head>
<body>
<div class="centre">
Expand Down
Loading