Skip to content

Sheffield | 26-ITP-jan | Richard Frimpong | Sprint 3 | Alarm Clock #1064

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

Closed
Richiealx wants to merge 4 commits into from
Closed

Sheffield | 26-ITP-jan | Richard Frimpong | Sprint 3 | Alarm Clock #1064

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
da445b0
Add HTML structure for alarm clock app
Richiealx Mar 21, 2026
d52fd04
Style alarm clock layout and finished state
Richiealx Mar 21, 2026
23ea297
Add countdown timer and alarm functionality
Richiealx Mar 21, 2026
b66ada4
Refine alarm clock reset logic and immediate zero alarm behaviour
Richiealx Mar 30, 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
106 changes: 105 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,114 @@
function setAlarm() {}
// Store the current countdown value in seconds
let remainingSeconds = 0;

// Store the timer ID so an existing timer can be cleared
let countdownTimerId = null;

/**
* Converts a number of seconds into mm:ss format.
* Example:
* 19 -> 00:19
* 119 -> 01:59
*/
function formatTime(totalSeconds) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;

const formattedMinutes = String(minutes).padStart(2, "0");
const formattedSeconds = String(seconds).padStart(2, "0");

return `${formattedMinutes}:${formattedSeconds}`;
}

/**
* Updates the heading text with the current remaining time.
*/
function updateHeading() {
const heading = document.getElementById("timeRemaining");
heading.innerText = `Time Remaining: ${formatTime(remainingSeconds)}`;
}

/**
* Resets the background colour to the default state.
*/
function resetBackground() {
document.body.classList.remove("alarm-finished");
}

/**
* Changes the background colour when the timer reaches zero.
*/
function showAlarmFinishedState() {
document.body.classList.add("alarm-finished");
}
Comment thread
cjyuan marked this conversation as resolved.

/**
* Stops any existing countdown timer.
*/
function stopCountdown() {
if (countdownTimerId !== null) {
clearInterval(countdownTimerId);
countdownTimerId = null;
}
}

/**
* Starts the countdown timer and updates the heading every second.
*/
function startCountdown() {
countdownTimerId = setInterval(() => {
if (remainingSeconds > 0) {
remainingSeconds -= 1;
updateHeading();
}

if (remainingSeconds === 0) {
stopCountdown();
showAlarmFinishedState();
playAlarm();
}
}, 1000);
}

/**
* Reads the value from the input, updates the heading,
* resets the background, stops any existing alarm sound,
* and starts the countdown.
*/
function setAlarm() {
const input = document.getElementById("alarmSet");
const inputValue = Number(input.value);

// Prevent invalid negative values
if (Number.isNaN(inputValue) || inputValue < 0) {
return;
}

// Stop any previous countdown before starting a new one
stopCountdown();

// Stop any alarm sound that may already be playing
pauseAlarm();

// Reset the page state for a new alarm
resetBackground();

@cjyuan cjyuan Mar 30, 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.

Could consider

  1. Including these three operations into a resetAll() function, and
  2. Call the function to reset the application states as soon as the "Start" button is clicked (even when the input is incorrect).

@Richiealx Richiealx Mar 30, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thank you for the feedback.

I’ve now updated the alarm clock based on your comments:

  1. I changed the behaviour so that when the input is 0, the alarm is triggered immediately instead of one second later.
  2. I combined the background update logic into a single function that adds or removes the CSS class based on a parameter.
  3. I created a resetAll() function to group the reset operations together, and I now call it as soon as the "Set Alarm" button is clicked.

I also cleaned up the alarm clock code so the duplicated starter functions were removed and the final file structure is now clear and consistent.

I tested the app again and confirmed the updated behaviour works as expected.


// Store the new number of seconds and update the heading immediately
remainingSeconds = Math.floor(inputValue);
updateHeading();

// Start counting down every second
startCountdown();
}

// DO NOT EDIT BELOW HERE

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

function setup() {
// Make the alarm loop continuously until stopped
audio.loop = true;

document.getElementById("set").addEventListener("click", () => {
setAlarm();
});
Expand Down
14 changes: 9 additions & 5 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,21 @@
<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</title>
</head>
<body>
<div class="centre">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>

<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />
<input id="alarmSet" type="number" min="0" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
<div class="button-row">
<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
</div>

<script src="alarmclock.js"></script>
</body>
</html>
</html>
58 changes: 54 additions & 4 deletions Sprint-3/alarmclock/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,65 @@
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #f4f4f4;
transition: background-color 0.3s ease;
}

/* Background changes when the alarm finishes */
body.alarm-finished {
background-color: #ffdddd;
}

.centre {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: min(90%, 420px);
text-align: center;
background-color: white;
padding: 24px;
border-radius: 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

h1 {
text-align: center;
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}

#alarmSet {
margin: 20px;
width: 100%;
margin: 0 0 20px 0;
padding: 12px;
font-size: 16px;
border-radius: 8px;
border: 1px solid #cccccc;
box-sizing: border-box;
}

h1 {
text-align: center;
.button-row {
display: flex;
gap: 12px;
justify-content: center;
}

button {
padding: 12px 18px;
font-size: 16px;
border: none;
border-radius: 8px;
background-color: #0b5ed7;
color: white;
cursor: pointer;
}

button:hover {
background-color: #094db1;
}
Loading