Skip to content

West Midlands | 25-ITP-Sep | Baba Yusuf | Sprint 3 | Alarm Clock #900

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
Baba05206 wants to merge 10 commits into from
Closed

West Midlands | 25-ITP-Sep | Baba Yusuf | Sprint 3 | Alarm Clock #900

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
11e30f5
Add initial implementation of mean calculation and tests
Baba05206 Nov 6, 2025
3cb29a0
Refactor mean calculation and tests for clarity and functionality
Baba05206 Nov 7, 2025
3d4c407
Update mean.js
Baba05206 Nov 18, 2025
b235bd1
Implement alarm functionality and update title in HTML
Baba05206 Nov 28, 2025
a4fcc54
Remove unnecessary blank line in setAlarm function
Baba05206 Nov 28, 2025
5aa6e97
deleted prep
Nov 29, 2025
80cc2eb
Merge branch 'CodeYourFuture:main' into alarm-clock
Baba05206 Nov 30, 2025
50a0653
Updated code to reflected all 6 improvements recommended
Baba05206 Dec 7, 2025
9a76928
Refactor - Added formatTimeDisplay utility function to reduce code du…
Baba05206 Dec 11, 2025
6948ee0
refactored code as per the 3 comments to improve accessibility, preve…
Baba05206 Dec 13, 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
38 changes: 37 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,41 @@
function setAlarm() {}
let intervalId;

function setAlarm() {
const input = document.getElementById("alarmSet");
let time = Number(input.value);
Copy link
Copy Markdown

@bp7968h bp7968h Dec 3, 2025

Choose a reason for hiding this comment

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

Is the variable readable, time (is it hour, minute, second, milliseconds)?

Copy link
Copy Markdown
Author

@Baba05206 Baba05206 Dec 11, 2025

Choose a reason for hiding this comment

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

now, i believe it is. i had thought it did, but now certainly does. thanks

Copy link
Copy Markdown

@bp7968h bp7968h Dec 3, 2025

Choose a reason for hiding this comment

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

What if the user inputs -1?

Copy link
Copy Markdown
Author

@Baba05206 Baba05206 Dec 3, 2025

Choose a reason for hiding this comment

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

will review, update based on the above comments and revert by tomorrow morning. many thanks for for your guidance.


const heading = document.getElementById("timeRemaining");

clearInterval(intervalId);

function format(num) {
if (num < 10) return "0" + num;
return num;
}
Copy link
Copy Markdown

@bp7968h bp7968h Dec 3, 2025

Choose a reason for hiding this comment

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

This is nice way to pad number, is there any predefined methods?

Copy link
Copy Markdown
Author

@Baba05206 Baba05206 Dec 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

... i have now changed to code to use padStart instead of format()

Comment on lines +24 to +51
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Dec 13, 2025

Choose a reason for hiding this comment

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

Some input that can mess up the clock display can still pass this check.


heading.innerText =
"Time Remaining: " +
format(Math.floor(time / 60)) +
":" +
format(time % 60);
Copy link
Copy Markdown

@bp7968h bp7968h Dec 3, 2025

Choose a reason for hiding this comment

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

You are repeating this twice in your code, how would you increase efficiency if you needed to change something in the future?

Copy link
Copy Markdown
Author

@Baba05206 Baba05206 Dec 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I can hold the value in/as a variable so I can call the variable without having to repeat an expression or an existing value.

Copy link
Copy Markdown
Author

@Baba05206 Baba05206 Dec 7, 2025

Choose a reason for hiding this comment

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

To cater for invalid entry (include negative values), I am now implemented a form of input validation to ensure the user enters a valid positive number.

Copy link
Copy Markdown

@bp7968h bp7968h Dec 11, 2025

Choose a reason for hiding this comment

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

Hi @Baba05206 , wouldn't it be easy to create a utility function, that takes arguments like time and then the return value is the string with formatted time and second, and then you can just call this function where you need!


intervalId = setInterval(() => {
time--;

if (time <= 0) {
heading.innerText = "Time Remaining: 00:00";
clearInterval(intervalId);
playAlarm();
return;
}

heading.innerText =
"Time Remaining: " +
format(Math.floor(time / 60)) +
":" +
format(time % 60);
}, 1000);
Copy link
Copy Markdown

@bp7968h bp7968h Dec 3, 2025

Choose a reason for hiding this comment

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

These 60 and 1000 are magic numbers, is there better way to handle magic numbers?

Copy link
Copy Markdown
Author

@Baba05206 Baba05206 Dec 7, 2025

Choose a reason for hiding this comment

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

Replaced magic numbers with named constants that explains their purpose.

}
// DO NOT EDIT BELOW HERE

var audio = new Audio("alarmsound.mp3");
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
2 changes: 1 addition & 1 deletion Sprint-3/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/user-event": "^14.6.1",
"jest": "^30.0.4",
"jest": "^30.2.0",
"jest-environment-jsdom": "^30.0.4"
}
}
Loading