Skip to content

Birmingham | ITP-Jan | Roman Sanaye | Sprint 3 | Alarm-clock #1080

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

Birmingham | ITP-Jan | Roman Sanaye | Sprint 3 | Alarm-clock #1080

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
15c47ae
alarmclock implemented and tests pass
RomanSanaye Mar 23, 2026
5935fcb
Add dedicated resetAlarm function to ensure clean initial state
RomanSanaye Apr 9, 2026
c4446ac
inner function place at the beginning of the parent function
RomanSanaye Apr 9, 2026
a6783da
Refactor alarm app: improve scope, remove redundancy, and fix timer l…
RomanSanaye Apr 10, 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
81 changes: 80 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,95 @@
function setAlarm() {}
// DOM elements
const setAlarmBtn = document.getElementById("set");
const stopAlarmBtn = document.getElementById("stop");
const timeRemaining = document.getElementById("timeRemaining");
let alarmInterval;
let totalSeconds;

// reset function - returns app to clean initial state
function resetAlarm() {
function resetToInitialState() {
totalSeconds = 0;
timeRemaining.innerText = "Time Remaining: 00:00";
document.getElementById("alarmSet").value = "";
stopAlarmBtn.style.display = "none";
setAlarmBtn.style.display = "inline-block"; // ADD THIS - show set button
Comment on lines +19 to +20
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 10, 2026

Choose a reason for hiding this comment

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

Could also consider

  1. using visibility: hidden (suggestion: look up the difference between display: none and visibility: false
  2. disable/enable the buttons by setting their disabled property

(No change required)

}

function stopSound() {
if (typeof pauseAlarm === "function") {
pauseAlarm();
}
}
Comment thread
cjyuan marked this conversation as resolved.
// Clear any running interval
if (alarmInterval) {
clearInterval(alarmInterval);
alarmInterval = null;
}

resetToInitialState();
stopSound();
}

// Set Alarm function
function setAlarm() {
const input = document.getElementById("alarmSet");
const timeValue = parseInt(input.value);
const hasActiveTimer = alarmInterval !== null;

function updateDisplay() {
let minutes = Math.floor(totalSeconds / 60);
let seconds = totalSeconds % 60;
timeRemaining.innerText = `Time Remaining: ${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
}
Comment thread
cjyuan marked this conversation as resolved.
Outdated

function startTimer() {
alarmInterval = setInterval(() => {
if (totalSeconds > 0) {
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 10, 2026

Choose a reason for hiding this comment

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

Why check if totalSeconds > 0? Isn't it always true?

totalSeconds--;
updateDisplay();
if (totalSeconds === 0) {
clearInterval(alarmInterval);
alarmInterval = null;

// WHEN ALARM STARTS: hide set button, show only stop button
setAlarmBtn.style.display = "none";
stopAlarmBtn.style.display = "inline-block";

playAlarm();
}
}
}, 1000);
}

resetAlarm();

if (isNaN(timeValue) || timeValue <= 0) {
if (!hasActiveTimer) alert("Please enter a number greater than 0");
return;
}

totalSeconds = timeValue;
stopAlarmBtn.style.display = "inline-block";
setAlarmBtn.style.display = "inline-block"; // Ensure set button is visible
updateDisplay();
startTimer();
}

// DO NOT EDIT BELOW HERE

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

function setup() {
// Ensure clean initial state when page loads
resetAlarm();

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

document.getElementById("stop").addEventListener("click", () => {
pauseAlarm();
resetAlarm();
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 10, 2026

Choose a reason for hiding this comment

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

Should you need to avoid modifying the code beyond the marker
// DO NOT EDIT BELOW HERE

you can use addEventListener() to add additional callbacks above the marker.

});
}

Expand Down
4 changes: 2 additions & 2 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!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</title>
</head>
<body>
<div class="centre">
Expand Down
2 changes: 2 additions & 0 deletions Sprint-3/alarmclock/jest.setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// jest.setup.js
require("@testing-library/jest-dom/extend-expect");
14 changes: 12 additions & 2 deletions Sprint-3/alarmclock/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@
"license": "CC-BY-SA-4.0",
"description": "You must update this package",
"scripts": {
"test": "jest --config=../jest.config.js alarmclock"
"test": "jest"
},
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/jest.setup.js"
]
},
"repository": {
"type": "git",
Expand All @@ -13,5 +18,10 @@
"bugs": {
"url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
},
"homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
"homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"jest": "^27.5.1",
"jsdom": "^19.0.0"
}
}
5 changes: 5 additions & 0 deletions Sprint-3/alarmclock/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,8 @@
h1 {
text-align: center;
}

/* Both buttons visible by default, but resetAlarm will hide stop initially */
#stop {
display: none;
}