Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
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);
}
Comment on lines +11 to +30
Copy link
Contributor

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
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
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;
}