Skip to content

West Midlands | 25-ITP-Sept | Mustaf Asani | Sprint 3 | Feature/alarmclock #921

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
asaniDev wants to merge 15 commits into from
Closed

West Midlands | 25-ITP-Sept | Mustaf Asani | Sprint 3 | Feature/alarmclock #921

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5007c4b
added all tests to test, started mean.js but not finished
asaniDev Oct 30, 2025
f21c96e
predicted the result of each file before fixing them
asaniDev Nov 15, 2025
b058970
installed dependencies
asaniDev Nov 15, 2025
b63c6de
made up tests and then created functions to pass the required tests i…
asaniDev Nov 23, 2025
e17bf30
fixed invert function,answered questions and added tests to check it …
asaniDev Nov 29, 2025
8196fd6
made alarm clock countdown from user input number and alarm sound whe…
asaniDev Dec 8, 2025
29cacc9
made sure when input time is 0, alarm still works and added backgroun…
asaniDev Dec 8, 2025
250453e
Revert "added all tests to test, started mean.js but not finished"
asaniDev Dec 8, 2025
9819f2c
Revert "predicted the result of each file before fixing them"
asaniDev Dec 8, 2025
6c486d4
Revert "installed dependencies"
asaniDev Dec 8, 2025
3e235c6
Revert "made up tests and then created functions to pass the required…
asaniDev Dec 8, 2025
9725399
Revert "fixed invert function,answered questions and added tests to c…
asaniDev Dec 8, 2025
da00a5e
removed unnecesary functions and reset timer
asaniDev Dec 16, 2025
2454086
removed redundant code, added code to stop alarm if runnng
asaniDev Dec 16, 2025
b03f445
reordered the statements to flow in a logical way
asaniDev Dec 20, 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
69 changes: 68 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,71 @@
function setAlarm() {}
let inputTime = 0;
let timer = null;
let changeBgColor = false;

function setAlarm() {
inputTime = Number(document.querySelector("#alarmSet").value);

if (!Number.isInteger(inputTime) || inputTime < 0) {
return;
}
if (inputTime === 10) {
changeBgColor = true;
} else if (inputTime === 0) {
displayTime(inputTime);
playAlarm();
document.querySelector("#alarmSet").reset();
}
displayTime(inputTime);
if (typeof audio !== "undefined" && audio) {
audio.pause();
try {
audio.currentTime = 0;
} catch (e) {}
audio.loop = false; // disable looping if it was set
}
if (timer) {
clearInterval(timer);
}
timer = setInterval(countDown, 1000);
Copy link
Contributor

@cjyuan cjyuan Dec 20, 2025

Choose a reason for hiding this comment

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

Does the app need to execute the code on line 20 when inputTime is 0?

Can you figure out what would happen when line 20 is executed when inputTime is 0? Even though the side-effect is almost unnoticeable, it is important we (as a programmer) recognise what our code do exactly.

}
Comment on lines 13 to 21
Copy link
Contributor

@cjyuan cjyuan Dec 17, 2025

Choose a reason for hiding this comment

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

When inputTime is 0, can you identify all the code between line 11 and 30 that will be executed? And among them, which code are unnecessarily executed?

Consider organising the code in the following maner:

  // Step 1: Reset everything (timer, audio, background, ...) before starting a new countdown
  // Note: Can also consider implement a function to reset everything and then call the function here
  ...
  
  // Step 2; Validate input
  ...
  
  // Step 3: Start a new countdown depending on the value of `inputTime`
  ...


function displayTime(totalTime) {
const seconds = totalTime % 60;
const minutes = (totalTime - seconds) / 60;
const timeLeft = document.querySelector("#theTime");
timeLeft.innerText = `${minutes.toString().padStart(2, 0)}:${seconds
.toString()
.padStart(2, 0)}`;
}

function countDown() {
inputTime--;
if (inputTime >= 0) {
displayTime(inputTime);
}

if (inputTime === 0) {
playAlarm();

if (changeBgColor) {
changeColor();
changeBgColor = false;
}

clearInterval(timer);
timer = null;
}
}

function changeColor() {
const bgColor = document.querySelector("div");
bgColor.classList.add("myBgColor");
}
/*
the the value for time remaining
check its a valid time (greater than 00:00)
decrease value of time remaining by 1 sec for each sec that passes
*/

// DO NOT EDIT BELOW HERE

Expand Down
6 changes: 4 additions & 2 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@
<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>
<div id="timeRemaining">
Time Remaining: <span id="theTime">00:00</span>
</div>
<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />

Expand Down
28 changes: 26 additions & 2 deletions Sprint-3/alarmclock/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,34 @@
transform: translate(-50%, -50%);
}

#alarmSet {
.myBgColor {
background-color: #f0f8ff;
}

#theTime {
font-size: 24px;
text-align: center;
margin: 20px;
}

h1 {
#timeRemaining {
font-size: 24px;
text-align: center;
margin: 20px;
}

#alarmSet {
margin: 20px;
font-size: 18px;
text-align: center;
}
#set {
font-size: 14px;
padding: 5px;
}

#stop {
font-size: 14px;
padding: 5px;
margin-left: 20px;
}