Skip to content
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
</div>
<script src="alarmclock.js"></script>
</body>
</html>
</html>
56 changes: 46 additions & 10 deletions Sprint-3/alarmclock/alarmclock.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,48 @@
function setAlarm() {}
var audio = new Audio("alarmsound.mp3");

// DO NOT EDIT BELOW HERE
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I think your code should be above this line

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I changed the whole page multiple times so I don't have the line now

let timeRemaining = 0;
let countdownInterval = null;

var audio = new Audio("alarmsound.mp3");
function setAlarm() {
const input = document.getElementById("alarmSet").value;

function setup() {
document.getElementById("set").addEventListener("click", () => {
setAlarm();
});
timeRemaining = parseInt(input, 10);

if (isNaN(timeRemaining) || timeRemaining <= 0) {
alert("Please enter a valid number greater than 0");
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nice error handling. It's important to validate user input

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I've changed the alert to console.error.
not sure if it's right or not.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I did not intent to request a change here. It was already good. The advantage of the alert is that it is more visible to the user. For the first exercises I think alerts and console.error logs are both fine.

return;
}

updateDisplay();

if (countdownInterval) {
clearInterval(countdownInterval);
}

countdownInterval = setInterval(() => {
timeRemaining--;

updateDisplay();

document.getElementById("stop").addEventListener("click", () => {
pauseAlarm();
});
if (timeRemaining <= 0) {
clearInterval(countdownInterval);
playAlarm();
}
}, 1000);
}

function updateDisplay() {
const display = document.getElementById("timeRemaining");

const minutes = String(Math.floor(timeRemaining / 60)).padStart(2, "0");
const seconds = String(timeRemaining % 60).padStart(2, "0");

display.textContent = `Time Remaining: ${minutes}:${seconds}`;
}

function setup() {
document.getElementById("set").addEventListener("click", setAlarm);
document.getElementById("stop").addEventListener("click", pauseAlarm);
}

function playAlarm() {
Expand All @@ -20,6 +51,11 @@ function playAlarm() {

function pauseAlarm() {
audio.pause();
audio.currentTime = 0;
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nice that you reset the audio time here


if (countdownInterval) {
clearInterval(countdownInterval);
}
}

window.onload = setup;
Loading