Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

NW-6 | AREEB-SATTAR | JS2| [TECH ED] Alarm Clock | WEEK-3 #215

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

NW-6 | AREEB-SATTAR | JS2| [TECH ED] Alarm Clock | WEEK-3 #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5701062
Started some work in JS
areebsattar Jan 20, 2024
c1ac1fb
updated the time
areebsattar Jan 20, 2024
522a729
completed alarm clock
areebsattar Jan 20, 2024
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
25 changes: 24 additions & 1 deletion week-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,27 @@
function setAlarm() {}
let alarmTime;
let remainingTime = document.querySelector("#timeRemaining");
let intervalID;

function setAlarm() {
clearInterval(intervalID);
let alarmInput = document.getElementById("alarmSet");
alarmTime = alarmInput.value;
intervalID = setInterval(updateTimeRemaining, 1000);
updateTimeRemaining();
}

function updateTimeRemaining() {
let minutes = Math.floor(alarmTime / 60);
let seconds = alarmTime % 60;
remainingTime.innerText = `Time Remaining: ${minutes
.toString()
.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
if (alarmTime === 0) {
playAlarm();
clearInterval(intervalID);
}
alarmTime--;
}

// DO NOT EDIT BELOW HERE

Expand Down
37 changes: 20 additions & 17 deletions week-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
<!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>
</head>
<body>
<div class="centre">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script defer src="alarmclock.js"></script>
<title>Alarm Clock</title>
</head>

<body>
<div class="centre">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
</body>

</html>