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
51 changes: 50 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,53 @@
function setAlarm() {}
let countdownInterval = null;
let secondsLeft = 0;

function setAlarm() {
// Read the minutes from the input
const input = document.getElementById("alarmSet");
const minutes = parseInt(input.value, 10);
// If nothing useful was entered, do nothing
if (isNaN(minutes) || minutes <= 0) {
return;
}
// Convert to total seconds
secondsLeft = minutes;
// Stop any existing countdown
if (countdownInterval !== null) {
clearInterval(countdownInterval);
countdownInterval = null;
}
// Show starting time right away
updateTimeDisplay();

// Start the countdown
countdownInterval = setInterval(() => {
secondsLeft = secondsLeft - 1;

updateTimeDisplay();

if (secondsLeft <= 0) {
// Time's up
clearInterval(countdownInterval);
countdownInterval = null;
secondsLeft = 0;
// Makes sure to show exactly 00:00
updateTimeDisplay();
playAlarm();
}
}, 1000);
}

// Helper function
function updateTimeDisplay() {
const minutes = Math.floor(secondsLeft / 60);
const seconds = secondsLeft % 60;

const displayMin = minutes.toString().padStart(2, "0");
const displaySec = seconds.toString().padStart(2, "0");

const heading = document.getElementById("timeRemaining");
heading.textContent = `Time Remaining: ${displayMin}:${displaySec}`;
}

// 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