Skip to content

Sheffield|May-2025|Sheida Shabankari|Module-Data -Groups| Sprint-3|Alarm Clock #631

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
wants to merge 9 commits into
base: main
Choose a base branch
from
+6,787 −3
Open

Sheffield|May-2025|Sheida Shabankari|Module-Data -Groups| Sprint-3|Alarm Clock #631

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
abdcbfd
Rename Title,Get elements , Try to get the input
sheida-shab Jul 16, 2025
3e2debe
updating the time remaining content
sheida-shab Jul 16, 2025
32f9d24
implement function updateDisplayTime
sheida-shab Jul 16, 2025
55f13a4
add and testing interval
sheida-shab Jul 16, 2025
a674f0b
using interval function to count down the seconds
sheida-shab Jul 16, 2025
e2eb3bb
change the background color of page and the stop button
sheida-shab Jul 16, 2025
244219b
some little changes
sheida-shab Jul 16, 2025
8d01d83
flash page color using set interval and global var
sheida-shab Jul 16, 2025
35c72e7
checked all test cases and passed
sheida-shab Jul 16, 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: 108 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,98 @@
function setAlarm() {}
var flashColor;
Copy link
Contributor

Choose a reason for hiding this comment

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

Why use var instead of let?

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

let inputTime=userInput.value;
if (inputTime <= 0 || isNaN(inputTime)) {
alert("invalid input!!!");
return;
}
Comment on lines +6 to +9
Copy link
Contributor

Choose a reason for hiding this comment

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

Some unusual input values that can make your app behave abnormally can still pass this check. Can you add code to sanitise them?

updateDisplayTime(inputTime);
let secondsInterval=setInterval(() => {
inputTime--;
updateDisplayTime(inputTime);
if ((inputTime === 0)) {
playAlarm();
clearInterval(secondsInterval);

}
}, 1000);

}



function updateDisplayTime(inputTime){
const timeRemain = document.getElementById("timeRemaining");
let min = String(Math.floor(inputTime / 60)).padStart(2, "0");
let sec = String(inputTime % 60).padStart(2, "0");
Comment on lines +27 to +28
Copy link
Contributor

Choose a reason for hiding this comment

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

Can consider declaring these two variables with const because they won't be reassigned any value.

timeRemain.textContent = `Time Remaining: ${min}:${sec}`;
}
// DO NOT EDIT BELOW HERE

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

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

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

});
}

function playAlarm() {
audio.play();
document.getElementById("stop").style.backgroundColor = "rgb(191, 115, 47)";
document.body.style.backgroundColor = "rgb(218, 178, 119)";
let flashColor=setInterval(() => {
if(document.body.style.backgroundColor === "rgb(218, 178, 119)"){
document.body.style.backgroundColor = "white";
}else{
document.body.style.backgroundColor = "rgb(218, 178, 119)";
Comment on lines +48 to +54
Copy link
Contributor

Choose a reason for hiding this comment

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

Could consider preparing several CSS classes in a CSS file and then assign/remove CSS class to these element to change their appearance. This way, if we want to change the styles (including color), we don't have to modify the JS code.

}

}, 500);
}

function pauseAlarm() {
audio.pause();
document.getElementById("stop").style.backgroundColor = "rgb(239, 239, 239)";
clearInterval(flashColor);
document.body.style.backgroundColor = "white";
}

window.onload = setup;function setAlarm() {
const userInput=document.getElementById("alarmSet");

let inputTime=userInput.value;
if (inputTime <= 0 || isNaN(inputTime)) {
alert("invalid input!!!");
return;
}
updateDisplayTime(inputTime);
let secondsInterval=setInterval(() => {
inputTime--;
updateDisplayTime(inputTime);
if ((inputTime === 0)) {
playAlarm();
clearInterval(secondsInterval);

}
}, 1000);

}



function updateDisplayTime(inputTime){
const timeRemain = document.getElementById("timeRemaining");
let min = String(Math.floor(inputTime / 60)).padStart(2, "0");
let sec = String(inputTime % 60).padStart(2, "0");
timeRemain.textContent = `Time Remaining: ${min}:${sec}`;
}
// DO NOT EDIT BELOW HERE

var audio = new Audio("alarmsound.mp3");
Expand All @@ -11,15 +104,29 @@ function setup() {

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

});
}

function playAlarm() {
audio.play();
document.getElementById("stop").style.backgroundColor = "rgb(191, 115, 47)";
document.body.style.backgroundColor = "rgb(218, 178, 119)";
flashColor=setInterval(() => {
if(document.body.style.backgroundColor === "rgb(218, 178, 119)"){
document.body.style.backgroundColor = "white";
}else{
document.body.style.backgroundColor = "rgb(218, 178, 119)";
}

}, 500);
}

function pauseAlarm() {
audio.pause();
document.getElementById("stop").style.backgroundColor = "rgb(239, 239, 239)";
clearInterval(flashColor);
document.body.style.backgroundColor = "white";
}

window.onload = setup;
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/alarmclock/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
"devDependencies": {
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/user-event": "^13.5.0",
"jest": "^29.2.2",
"jest-environment-jsdom": "^29.2.2"
Expand Down
Loading