Skip to content

Birmingham | 26-ITP-May | Tobias Amaechina | Sprint 3 | Sprint/alarm-clock #1332

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
Tobias-Amaechina wants to merge 20 commits into
base: main
Choose a base branch
from
+82 −2
Open

Birmingham | 26-ITP-May | Tobias Amaechina | Sprint 3 | Sprint/alarm-clock #1332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
eb0ec17
updated the Title of alarm clock template file
Tobias-Amaechina Jul 28, 2026
b45f3d2
Created a global varible to hold remaining time and the interval id
Tobias-Amaechina Jul 28, 2026
4e3b1d2
implement a function that set the alarm
Tobias-Amaechina Jul 28, 2026
51dfb2e
Implements function to display updates on the page
Tobias-Amaechina Jul 28, 2026
55ab312
Implement a function that stops the alarm
Tobias-Amaechina Jul 28, 2026
e418ebc
set alarm button and add event listener
Tobias-Amaechina Jul 28, 2026
6a0c87e
add stop alarm button and add event listener
Tobias-Amaechina Jul 28, 2026
7b7a44a
updated the wrong name variable in the input variable and Title vari…
Tobias-Amaechina Jul 28, 2026
84985a9
removed the broken event listeners
Tobias-Amaechina Jul 28, 2026
dfa54e5
Add Node to interact with the styling document
Tobias-Amaechina Jul 28, 2026
6208876
declate a booleen varaible an set to false
Tobias-Amaechina Jul 28, 2026
7e08577
add a pause button element in the template
Tobias-Amaechina Jul 28, 2026
d4458e2
deleted broken functions and updated Id pause name
Tobias-Amaechina Jul 28, 2026
4c8eeb9
added into the set alarm function A note for flashing
Tobias-Amaechina Jul 28, 2026
67ca5df
Add event listener to stop the flash
Tobias-Amaechina Jul 28, 2026
0496416
created a global variable to toggle pause an set it to false
Tobias-Amaechina Jul 28, 2026
b2b7638
created a function to toggle and pause
Tobias-Amaechina Jul 28, 2026
df1b2f4
wire the pause button to togglepause
Tobias-Amaechina Jul 28, 2026
5896a93
updated the style sheet to have the animation
Tobias-Amaechina Jul 28, 2026
a940501
changed the Title in the template as Alarm clock app
Tobias-Amaechina Jul 28, 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
72 changes: 71 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,74 @@
function setAlarm() {}
let timeRemaining = 0;
let intervalId = null;
let isPaused = false;


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

const seconds = Number(input.value);

if (isNaN(seconds) || seconds <= 0) {
alert("Please enter a valid number of seconds.");
return;
}

timeRemaining = seconds;
updateDisplay(timeRemaining);

// Clear any previous countdown
if (intervalId) {
clearInterval(intervalId);
}

// Start a new countdown
intervalId = setInterval(() => {
timeRemaining--;
updateDisplay(timeRemaining);

if (timeRemaining <= 0) {
clearInterval(intervalId);
playAlarm();
document.body.classList.add("flash");
}
}, 1000);
}

function updateDisplay(seconds) {
const title = document.getElementById("timeRemaining");


const mins = String(Math.floor(seconds / 60)).padStart(2, "0");
const secs = String(seconds % 60).padStart(2, "0");

title.textContent = `Time Remaining: ${mins}:${secs}`;
}
function togglePause() {
if (!isPaused) {
clearInterval(intervalId);
isPaused = true;
} else {
isPaused = false;
intervalId = setInterval(() => {
timeRemaining--;
updateDisplay(timeRemaining);

if (timeRemaining <= 0) {
clearInterval(intervalId);
playAlarm();
document.body.classList.add("flash");
}
}, 1000);
}
}

document.getElementById("pause").addEventListener("click", togglePause);


document.getElementById("stop").addEventListener("click", () => {
document.body.classList.remove("flash");
});


// DO NOT EDIT BELOW HERE

Expand Down
4 changes: 3 additions & 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 All @@ -14,6 +14,8 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
<button id="pause">Pause</button>

</div>
<script src="alarmclock.js"></script>
</body>
Expand Down
8 changes: 8 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,11 @@
h1 {
text-align: center;
}
.flash {
animation: flash-bg 0.5s infinite alternate;
}

@keyframes flash-bg {
from { background-color: white; }
to { background-color: red; }
}
Loading