Skip to content

Sheffield | 26-ITP-Jan | Seti Mussa | Sprint 3 | Alarm Clock #1178

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

Open
Seti-Jemal wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Sheffield | 26-ITP-Jan | Seti Mussa | Sprint 3 | Alarm Clock #1178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
75028ec
I have completed sprint 3 alarm clock
Seti-Jemal Apr 4, 2026
e53ac5d
fix
Seti-Jemal Apr 8, 2026
cd26977
Update alarm.clock.js based on feedback .
Seti-Jemal Apr 16, 2026
a5fab38
Fix the timer bug
Seti-Jemal Apr 17, 2026
27648c9
fix the timer logic
Seti-Jemal Apr 17, 2026
dc63af6
Fix the timer behavior and improve the alarm functionality
Seti-Jemal Apr 17, 2026
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
103 changes: 92 additions & 11 deletions Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,106 @@
function setAlarm() {}
let timeRemaining = 0;
let timerId = null;
let isPaused = false;

// DO NOT EDIT BELOW HERE
const audio = new Audio("alarmsound.mp3");

var audio = new Audio("alarmsound.mp3");
// FORMAT mm:ss
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;

function setup() {
document.getElementById("set").addEventListener("click", () => {
setAlarm();
});
return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
}

document.getElementById("stop").addEventListener("click", () => {
pauseAlarm();
});
// UPDATE DISPLAY
function updateDisplay(time) {
const heading = document.getElementById("timeRemaining");
heading.textContent = formatTime(Math.max(0, time));
}

// PLAY ALARM
function playAlarm() {
audio.loop = true;
audio.currentTime = 0;
audio.play();
}

function pauseAlarm() {
// TRIGGER ALARM
function triggerAlarm() {
document.body.classList.toggle("alarm-activated", true);
playAlarm();
}

// STOP / PAUSE / RESUME
function stopAlarm() {
// 1. If timer is running → pause
if (timerId !== null) {
clearInterval(timerId);
timerId = null;
isPaused = true;
return;
}

// 2. If paused → resume
if (isPaused && timeRemaining > 0) {
startTimer();
isPaused = false;
return;
}

// 3. If alarm is playing → stop it
if (timeRemaining <= 0) {
audio.pause();
audio.currentTime = 0;
audio.loop = false;

document.body.classList.toggle("alarm-activated", false);
}
}

// START TIMER
function startTimer() {
clearInterval(timerId);

timerId = setInterval(() => {
timeRemaining = timeRemaining - 1;
updateDisplay(timeRemaining);

if (timeRemaining <= 0) {
clearInterval(timerId);
timerId = null;
isPaused = false;
triggerAlarm();
}
}, 1000);
}

// SET ALARM
function setAlarm() {
const input = document.getElementById("alarmSet").value;
timeRemaining = parseInt(input, 10);

if (isNaN(timeRemaining) || timeRemaining <= 0) {
return;
}

// reset alarm state
audio.pause();
audio.currentTime = 0;
audio.loop = false;
document.body.classList.toggle("alarm-activated", false);

updateDisplay(timeRemaining);
isPaused = false;
startTimer();
}

// SETUP
function setup() {
document.getElementById("set").addEventListener("click", setAlarm);
document.getElementById("stop").addEventListener("click", stopAlarm);

updateDisplay(0);
}

window.onload = setup;
19 changes: 8 additions & 11 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alarm Clock</title>
<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" />
<h1>Time Remaining: <span id="timeRemaining">00:00</span></h1>

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>
<input id="alarmSet" type="number" />
<button id="set">Set Alarm</button>
<button id="stop">Stop Alarm</button>

<script defer src="alarmclock.js"></script>
</body>
</html>
19 changes: 9 additions & 10 deletions Sprint-3/alarmclock/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
.centre {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#alarmSet {
margin: 20px;
body {
background-color: blanchedalmond;
}

h1 {
text-align: center;
}

#alarmSet {
margin: 20px;
}
.alarm-activated {
background-color: red;
}
Loading