Skip to content

London | 25-ITP-Sept | Samuel Tarawally | Sprint 3 | Alarm Clock #929

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
Tarawally wants to merge 11 commits into
base: main
Choose a base branch
from
+191 −16
Open

London | 25-ITP-Sept | Samuel Tarawally | Sprint 3 | Alarm Clock #929

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c3824f3
feat: update structure and layout for alarm clock
Tarawally Dec 12, 2025
3a0ada8
feat: implement digital clock design
Tarawally Dec 12, 2025
c964595
feat: implement alarm clock logic with set, update and stop functions
Tarawally Dec 12, 2025
895d8c6
refactor: improving comments for clarity and readability
Tarawally Dec 12, 2025
1aff7c8
style: revert to standard basic ui layout
Tarawally Dec 12, 2025
f08fbfc
feat: implement core functionality and UI enhancements
Tarawally Dec 13, 2025
7342082
refactor: simplify time formatting with padStart
Tarawally Dec 15, 2025
8f1a667
fix: reset timer identifier after alarm completes
Tarawally Dec 15, 2025
fbc7a56
refactor: extract display update logic into separate function
Tarawally Dec 15, 2025
548ef16
fix: handle zero-second alarm edge case
Tarawally Dec 15, 2025
426f1fb
fix: correct timer logic and prevent multiple intervals
Tarawally Dec 15, 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
83 changes: 82 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,85 @@
function setAlarm() {}
const ONE_SECOND_IN_MILLISECONDS = 1000;

let timeRemainingInSeconds = 0;
let alarmTimerIdentifier = null;

/**
* Formats seconds into "MM:SS".
*/
function formatTime(totalSeconds) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;

let formattedMinutes = `${minutes}`;
if (minutes < 10) {
formattedMinutes = `0${minutes}`;
}

let formattedSeconds = `${seconds}`;
if (seconds < 10) {
formattedSeconds = `0${seconds}`;
}

return `Time Remaining: ${formattedMinutes}:${formattedSeconds}`;
Copy link
Contributor

@cjyuan cjyuan Dec 13, 2025

Choose a reason for hiding this comment

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

Code on lines 13-23 could be simplified by using String.prototype.padStart().

}

/**
* Updates the display and checks if the alarm should sound.
*/
function updateTime() {
const titleElement = document.getElementById("timeRemaining");
Copy link
Contributor

@cjyuan cjyuan Dec 13, 2025

Choose a reason for hiding this comment

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

We could perform the operation on line 30 only once and reuse the retrieved DOM element repeatedly (to improve performance).


timeRemainingInSeconds = timeRemainingInSeconds - 1;
titleElement.innerText = formatTime(timeRemainingInSeconds);

if (timeRemainingInSeconds === 0) {
playAlarm();
document.body.classList.add("flash");
clearInterval(alarmTimerIdentifier);
}
}

/**
* Initialises the alarm countdown.
*/
function setAlarm() {
if (alarmTimerIdentifier) {
Copy link
Contributor

@cjyuan cjyuan Dec 13, 2025

Choose a reason for hiding this comment

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

Once set, alarmTimerIdentifier is never reset. So this condition will only be false the first time setAlarm() is called. Well, do we need to check or reset this variable?

Copy link
Author

@Tarawally Tarawally Dec 15, 2025

Choose a reason for hiding this comment

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

The variable needs to be reset otherwise the condition will always be true after the first alarm.

clearInterval(alarmTimerIdentifier);
Copy link
Contributor

@cjyuan cjyuan Dec 16, 2025

Choose a reason for hiding this comment

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

If this function returns on line 56, 60, or 75, alarmTimerIdentifier will remain unchanged even though the corresponding interval is cleared here.

document.body.classList.remove("flash");
}

const timeInput = document.getElementById("alarmSet");
const startingTime = parseInt(timeInput.value, 10);

if (isNaN(startingTime)) {
return;
}

if (startingTime < 0) {
return;
}

timeRemainingInSeconds = startingTime;

// Initialise the audio context to enable autoplay.
audio.play();
audio.pause();

const titleElement = document.getElementById("timeRemaining");
titleElement.innerText = formatTime(timeRemainingInSeconds);
Copy link
Contributor

@cjyuan cjyuan Dec 13, 2025

Choose a reason for hiding this comment

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

These two statements and the statements on lines 30, 33 are identical. This is usually a hint that we could factor out the code into a function, and then just call the function to perform the corresponding task.


alarmTimerIdentifier = setInterval(() => {
updateTime();
}, ONE_SECOND_IN_MILLISECONDS);
}
Comment on lines +78 to +81
Copy link
Contributor

@cjyuan cjyuan Dec 13, 2025

Choose a reason for hiding this comment

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

The alarm will sound one second afterward when the input is either 0 or 1 second -- it is a bit inconsistent. Can you improve the consistency?

Copy link
Author

@Tarawally Tarawally Dec 15, 2025

Choose a reason for hiding this comment

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

I'll add a conditional statement to handle this case.


// Add a listener to stop the flashing effect without modifying the protected pauseAlarm function below.
const stopButton = document.getElementById("stop");
if (stopButton) {
stopButton.addEventListener("click", () => {
document.body.classList.remove("flash");
});
}

// DO NOT EDIT BELOW HERE

Expand Down
19 changes: 12 additions & 7 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
<!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">
<div class="centre container">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
<div class="input-group">
<label for="alarmSet">Set time (seconds):</label>
<input id="alarmSet" type="number" min="0" placeholder="e.g. 10" />
</div>

<div class="controls">
<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
</div>
<script src="alarmclock.js"></script>
</body>
Expand Down
98 changes: 90 additions & 8 deletions Sprint-3/alarmclock/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,97 @@
.centre {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
body {
background-color: #f0f0f0;
font-family: Arial, Helvetica, sans-serif;
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}

#alarmSet {
margin: 20px;
.flash {
animation: flash-animation 1s infinite;
}

/* Flashing background colour animation */
@keyframes flash-animation {
0% {
background-color: #ffcccc;
}
50% {
background-color: #ff0000;
}
100% {
background-color: #ffcccc;
}
}

.container {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 500px;
width: 90%;
}

h1 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #333;
}

.input-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
font-size: 1.1rem;
}

input {
padding: 10px;
font-size: 1.2rem;
border: 1px solid #ccc;
border-radius: 4px;
width: 100px;
text-align: center;
}

input:focus {
outline: none;
border-color: #007bff;
}

.controls {
display: flex;
gap: 10px;
justify-content: center;
}

button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s;
}

button:hover {
background-color: #0056b3;
}

button#stop {
background-color: #dc3545;
}

button#stop:hover {
background-color: #a71d2a;
}
Loading