Skip to content

Manchester | 25-ITP-Sep | Mahtem T. Mengstu | Sprint 3 | Alarmclock #916

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

Manchester | 25-ITP-Sep | Mahtem T. Mengstu | Sprint 3 | Alarmclock #916

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aef7fe1
Modified the index.html adding necessary buttons
Mahtem Dec 6, 2025
084497d
Style modified
Mahtem Dec 6, 2025
db4559d
Alarm clock function implemented
Mahtem Dec 6, 2025
d46d718
Index.html <script src="alarmclock.js" type="module"></script>
Mahtem Dec 10, 2025
6a48187
style.css modified to include flashing background
Mahtem Dec 10, 2025
102e20d
alarmclock.js modified
Mahtem Dec 10, 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
109 changes: 106 additions & 3 deletions Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,95 @@
function setAlarm() {}
// -------- Alarm Clock Implementation --------
let countdownInterval = null;
let flashInterval = null;
let timeLeft = 0;
let paused = false;

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

const secondsInput = parseInt(input.value, 10);

if (isNaN(secondsInput) || secondsInput < 0) return;

// Reset previous timer if any
if (countdownInterval) clearInterval(countdownInterval);
stopFlashing();
paused = false;
Copy link
Contributor

@cjyuan cjyuan Dec 9, 2025

Choose a reason for hiding this comment

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

Could also consider calling resetAlarm() (even if it performs something extra).

Copy link
Author

@Mahtem Mahtem Dec 10, 2025

Choose a reason for hiding this comment

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

Could also consider calling resetAlarm() (even if it performs something extra).

It has been made to reset everything completely.

timeLeft = secondsInput;

updateHeading(timeLeft);

countdownInterval = setInterval(() => {
if (!paused) {
timeLeft--;
if (timeLeft <= 0) {
clearInterval(countdownInterval);
countdownInterval = null;
updateHeading(0);
playAlarm();
startFlashing();
} else {
updateHeading(timeLeft);
}
}
}, 1000);
}

function pauseAlarm() {
paused = true;
if (audio) audio.pause();
Copy link
Contributor

@cjyuan cjyuan Dec 9, 2025

Choose a reason for hiding this comment

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

Why not just write audio.pause() (without the if statement)?

Copy link
Author

@Mahtem Mahtem Dec 10, 2025

Choose a reason for hiding this comment

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

Why not just write audio.pause() (without the if statement)?

Yes, it's correct... calling "audio.pause()" alone is enough and works normally.

stopFlashing();
}

function resumeAlarm() {
if (timeLeft > 0) paused = false;
}

function stopAlarm() {
paused = true;
if (audio) audio.pause();
stopFlashing();
clearInterval(countdownInterval);
countdownInterval = null;
timeLeft = 0;
updateHeading(0);
}

function resetAlarm() {
paused = false;
clearInterval(countdownInterval);
countdownInterval = null;
stopFlashing();
timeLeft = 0;
updateHeading(0);
}

// -------- Helper Functions --------
function updateHeading(seconds) {
const heading = document.getElementById("timeRemaining");
const mins = Math.floor(seconds / 60)
.toString()
.padStart(2, "0");
const secs = (seconds % 60).toString().padStart(2, "0");
heading.innerText = `Time Remaining: ${mins}:${secs}`;
}

// ---------------- Flashing Screen ----------------
function startFlashing() {
const body = document.body;
let isBlue = false;
flashInterval = setInterval(() => {
body.style.backgroundColor = isBlue ? "white" : "#add8e6";
isBlue = !isBlue;
}, 500);
}

function stopFlashing() {
clearInterval(flashInterval);
flashInterval = null;
document.body.style.backgroundColor = "white";
}
Comment on lines 94 to 101
Copy link
Contributor

@cjyuan cjyuan Dec 9, 2025

Choose a reason for hiding this comment

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

Could consider implementing the "flashing background" effect using only CSS, and then add/remove a class to start/stop flashing.

Copy link
Author

@Mahtem Mahtem Dec 10, 2025

Choose a reason for hiding this comment

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

Could consider implementing the "flashing background" effect using only CSS, and then add/remove a class to start/stop flashing.

Thank you @cjyuan, it has been implemented using only css.
function startFlashing() {
document.body.classList.add("alarm-flashing");
}

function stopFlashing() {
document.body.classList.remove("alarm-flashing");
document.body.style.backgroundColor = "white";
}


// DO NOT EDIT BELOW HERE

Expand All @@ -9,16 +100,28 @@ function setup() {
setAlarm();
});

document.getElementById("stop").addEventListener("click", () => {
document.getElementById("pause").addEventListener("click", () => {
pauseAlarm();
});

document.getElementById("resume").addEventListener("click", () => {
resumeAlarm();
});

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

document.getElementById("reset").addEventListener("click", () => {
resetAlarm();
});
}

function playAlarm() {
audio.play();
}

function pauseAlarm() {
function pauseAlarmSound() {
audio.pause();
}

Expand Down
4 changes: 4 additions & 0 deletions Sprint-3/alarmclock/alarmclock.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
There are some Tests in this file that will help you work out if your code is working.
*/

require("@testing-library/jest-dom");
const path = require("path");
const { JSDOM } = require("jsdom");

Expand Down Expand Up @@ -102,3 +103,6 @@ test("should play audio when the timer reaches zero", () => {

expect(mockPlayAlarm).toHaveBeenCalledTimes(1);
});


// In alarmclock.test.js tests passed
17 changes: 13 additions & 4 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,26 @@
<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">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
<label for="alarmSet">Set time to:</label>

<label for="alarmSet">Set time in seconds:</label>
<input id="alarmSet" type="number" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
<div class="buttons">
<button id="set" type="button">Set Alarm</button>
<button id="pause" type="button">Pause Alarm</button>
<button id="resume" type="button">Resume Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
<button id="reset" type="button">Reset Alarm</button>
</div>
</div>

<script src="alarmclock.js"></script>
Copy link
Contributor

@cjyuan cjyuan Dec 9, 2025

Choose a reason for hiding this comment

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

Suggestion: Consider loading script.js as an ES module to isolate its scope from the global context as:

<script src="script.js" type="module"></script>

This ensures that variables, functions, and imports in script.js don't leak into the global namespace,
helps prevent naming conflicts, and enables the use of modern JavaScript features like import and export.

Note: With type="module", defer is automatically enforced.

Copy link
Author

@Mahtem Mahtem Dec 10, 2025

Choose a reason for hiding this comment

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

Suggestion: Consider loading script.js as an ES module to isolate its scope from the global context as:

<script src="script.js" type="module"></script>

This ensures that variables, functions, and imports in script.js don't leak into the global namespace, helps prevent naming conflicts, and enables the use of modern JavaScript features like import and export.

Note: With type="module", defer is automatically enforced.

script has been updated in the index.html as :

<script src="alarmclock.js" type="module"></script>

</body>
</html>


9 changes: 7 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,8 @@
"license": "CC-BY-SA-4.0",
"description": "You must update this package",
"scripts": {
"test": "jest --config=../jest.config.js alarmclock"
"test": "jest --config=jest.config.js alarmclock"

},
"repository": {
"type": "git",
Expand All @@ -13,5 +14,9 @@
"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": "^6.9.1",
"jsdom": "^20.0.3"
}
}
56 changes: 52 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,63 @@
/* Center everything on the page */
.centre {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-family: Arial, sans-serif;
}

#alarmSet {
margin: 20px;
/* Heading */
h1 {
text-align: center;
font-size: 2em;
margin-bottom: 20px;
transition: background-color 0.2s ease;
}

h1 {
/* Input field */
#alarmSet {
width: 80px;
padding: 5px;
font-size: 1em;
margin-bottom: 20px;
text-align: center;
}

/* Buttons container */
.buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px; /* space between buttons */
margin-top: 10px;
}

/* Buttons */
button {
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
border-radius: 5px;
border: none;
background-color: #007bff;
color: white;
transition: background-color 0.2s ease, transform 0.1s ease;
}

button:hover {
background-color: #0056b3;
transform: scale(1.05);
}

button:active {
transform: scale(0.95);
}

/* Input and buttons spacing */
input,
button {
margin: 5px;
}