Skip to content

Sheffield | May-2025 | Hassan Osman | Alarm Clock App #602

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
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Sheffield | May-2025 | Hassan Osman | Alarm Clock App #602

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e7a0880
title element updated
HassanOHOsman Jul 14, 2025
26d876a
inputting then clicking "set alarm" update timer
HassanOHOsman Jul 14, 2025
dd250a3
countdown for remaining time added
HassanOHOsman Jul 14, 2025
82347f1
alarm goes off when timer reaches 0
HassanOHOsman Jul 14, 2025
9175cb9
background changes to red when timer reaches 0
HassanOHOsman Jul 14, 2025
818aeec
stop resets background & valid input only accepted
HassanOHOsman Jul 18, 2025
c9113b1
time remaining now resets to 0 when alarm stops
HassanOHOsman Jul 19, 2025
b37fb9c
removed useless code to ensure valid number added
HassanOHOsman Jul 19, 2025
dea5f72
function clears input now
HassanOHOsman Jul 19, 2025
2c4bd8e
called updateDisplay(0) to resets to 0 instead
HassanOHOsman Jul 19, 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
52 changes: 50 additions & 2 deletions Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,64 @@
function setAlarm() {}
let countdownInterval;

function updateDisplay(seconds) {
const timeDisplay = document.getElementById("timeRemaining");
const minutes = String(Math.floor(seconds / 60)).padStart(2, "0");
const remainingSeconds = String(seconds % 60).padStart(2, "0");

timeDisplay.textContent = `Time Remaining: ${minutes}:${remainingSeconds}`;
}



function setAlarm() {
const input = document.getElementById("alarmSet");
let seconds = parseInt(input.value, 10);

if (isNaN(seconds) || seconds <= 0 || input.value.trim() === "") {
Copy link
Contributor

Choose a reason for hiding this comment

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

parseInt(" ") or parseInt("") return NaN, so input.value.trim() === "" is redundant.

alert("Please enter a valid number!");
return;
}


clearInterval(countdownInterval);
updateDisplay(seconds);

countdownInterval = setInterval(() => {
seconds--;

if (seconds <= 0) {
clearInterval(countdownInterval);
updateDisplay(0);
playAlarm();
document.body.style.backgroundColor = "red";
return;
}

updateDisplay(seconds);
}, 1000);

}

document.getElementById("set").addEventListener("click", setAlarm);

document.getElementById("stop").addEventListener("click", () => {
clearInterval(countdownInterval);
});

// DO NOT EDIT BELOW HERE

var audio = new Audio("alarmsound.mp3");
var audio = new Audio("https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg");

function setup() {
document.getElementById("set").addEventListener("click", () => {
setAlarm();
});

document.getElementById("stop").addEventListener("click", () => {
clearInterval(countdownInterval);
pauseAlarm();
document.body.style.backgroundColor = "white";
document.getElementById("timeRemaining").textContent = "";
Copy link
Contributor

@cjyuan cjyuan Jul 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

When the page is first loaded, the clock shows "Time Remaining: 00:00".

You could also consider resetting the content to its "initial value" instead of clearing it.

Copy link
Author

Choose a reason for hiding this comment

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

All this time I thought you were referring to the input bos next to "set time to" LOL Anyway, this has now been sorted

});
}

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>
</head>
<body>
<div class="centre">
Expand Down