Skip to content

LONDON | MAY 2025 | JESUS DEL MORAL | SPRINT3 | ALARM CLOCK #671

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
delmorallopez wants to merge 9 commits into from
Closed

LONDON | MAY 2025 | JESUS DEL MORAL | SPRINT3 | ALARM CLOCK #671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f622d48
Sprint3-alarmclock
delmorallopez Jul 21, 2025
d23f10a
Sprint3-AlarmClock
delmorallopez Jul 21, 2025
712efa4
Sprint3/quote-generator
delmorallopez Jul 22, 2025
92881f4
Sprint3-alarmaclock-review
delmorallopez Jul 27, 2025
b41e30b
Sprint-3/alamarclock-review
delmorallopez Jul 28, 2025
7cc8268
Sprint3-alamarclock/Review
delmorallopez Jul 28, 2025
f641ff3
Quote-generator-remove
delmorallopez Jul 28, 2025
49aeb27
Sprint3-Alarmclock-Review
delmorallopez Jul 30, 2025
3886e8c
Sprint3-Alarmclock/Review
delmorallopez Jul 31, 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
66 changes: 61 additions & 5 deletions Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,68 @@
function setAlarm() {}
const timeSetup = document.querySelector("#alarmSet");
const timeCountdown = document.querySelector("#timeRemaining");
let countdownInterval;

// Shared display update function
function updateDisplay(seconds) {
const minutes = String(Math.floor(seconds / 60)).padStart(2, "0");
const secs = String(seconds % 60).padStart(2, "0");
timeCountdown.innerText = `Time Remaining: ${minutes}:${secs}`;
}
Comment thread
cjyuan marked this conversation as resolved.


function parsePositiveInteger(value) {
if (typeof value !== "string") return null;
const trimmed = value.trim();

// Check if it's all digits (no letters or symbols)
if (!/^\d+$/.test(trimmed)) return null;

const num = Number(trimmed);
return num > 0 ? num : null;
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Aug 1, 2025

Choose a reason for hiding this comment

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

I think NaN is better than null because NaN is also of type number.

}

function setAlarm() {
const totalSeconds = parsePositiveInteger(timeSetup.value);

if (totalSeconds === null) {
timeCountdown.innerText = "Please enter a valid number of seconds.";
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Jul 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Did you ever see your app displaying ""Please enter a valid number of seconds."? (If not, it may imply the code is not needed)

What does the function setAlarm() do? (It currently does not actually set any alarm)
The code that actually set the alarm is in startCountDown().

If you combine the code in setAlarm() and the code in startCountDown(), you should discover some redundant code.

Copy link
Copy Markdown
Author

@delmorallopez delmorallopez Jul 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I modified setalarm(), where the function will call updateDisplay()....
No redundancy code now!

I commited the last changes....

I am struggling to changes made in the previous commit in order to remove the quote generator files... I will ask for help on Saturday to a volunteer

document.body.style.backgroundColor = "";
return;
}

startCountdown(totalSeconds); // Start the countdown timer
document.body.style.backgroundColor = "";

}

function startCountdown(totalSeconds) {
clearInterval(countdownInterval); // Stop previous countdown
updateDisplay(totalSeconds); // Show first tick immediately

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

if (totalSeconds <= 0) {
clearInterval(countdownInterval);
timeCountdown.innerText = "Time's up!";
document.body.style.backgroundColor = "#ff4c4c";
playAlarm();
return;
}

updateDisplay(totalSeconds);
}, 1000);
}


// DO NOT EDIT BELOW HERE

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

function setup() {
document.getElementById("set").addEventListener("click", () => {
setAlarm();
setAlarm(); // Sets the initial time display
//startCountdown(); // Starts the actual countdown
});

document.getElementById("stop").addEventListener("click", () => {
Expand All @@ -15,11 +71,11 @@ function setup() {
}

function playAlarm() {
audio.play();
audio.play(); // Play the alarm sound
}

function pauseAlarm() {
audio.pause();
audio.pause(); // Stop the alarm sound
}

window.onload = setup;
window.onload = setup;
4 changes: 2 additions & 2 deletions Sprint-3/alarmclock/alarmclock.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* ======= TESTS - DO NOT MODIFY =====
There are some Tests in this file that will help you work out if your code is working.
There are some Tests in this file that will help you work out if your code is working. No need to change the code in this file.
*/

const path = require("path");
Expand All @@ -8,7 +8,7 @@ const { JSDOM } = require("jsdom");
let page = null;

beforeEach(async () => {
page = await JSDOM.fromFile(path.join(__dirname, "index.html"), {
page = await JSDOM.fromFile(path.join(__dirname, "alarmclockapp.html"), {
resources: "usable",
runScripts: "dangerously",
});
Expand Down
20 changes: 20 additions & 0 deletions Sprint-3/alarmclock/alarmclockapp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!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>
</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" min="0"/>

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>
</body>
</html>