Skip to content
Open
70 changes: 69 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,72 @@
function setAlarm() {}
const lengthOfAlarmSound = 20000;

document.getElementById("stop").addEventListener("click", stopAlarm);

let timeLeft;
let intervalID;
let display;

function setAlarm() {
stopAlarm();

// set up time
timeLeft = document.getElementById("alarmSet").value;

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

What would happen if I set the alarm for -10 seconds?

display = document.getElementById("timeRemaining");

// validate result
const result = Number(timeLeft);
if (!Number.isInteger(result) || result <= 0) {
return;
}
timeLeft = result;

display.textContent = formatTime(timeLeft);

if (!intervalID) {
intervalID = setInterval(updateTimer, 1000);
}

console.log(`Alarm set for ${timeLeft} seconds`);
}

function updateTimer() {
timeLeft = timeLeft - 1;

display.textContent = formatTime(timeLeft);

if (timeLeft <= 0) {
alarmFinished();
cleanUp();
}
}

// give a time in seconds
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
seconds = seconds % 60;

const secondsPadded = String(seconds).padStart(2, "0");
const minutesPaddded = String(minutes).padStart(2, "0");

const formattedPeconds = `Time Remaining: ${minutesPaddded}:${secondsPadded}`;
return formattedPeconds;
}

function stopAlarm() {
pauseAlarm();
cleanUp();
}

function cleanUp() {
clearInterval(intervalID);
intervalID = null;
}

function alarmFinished() {
audio.loop = true;
playAlarm();
console.log("Alarm finished");
}

// DO NOT EDIT BELOW HERE

Expand Down
4 changes: 2 additions & 2 deletions Sprint-3/alarmclock/index.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!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>
<title>Alarm clock app</title>
</head>
<body>
<div class="centre">
Expand Down
Loading