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
31 changes: 30 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,33 @@
function setAlarm() {}
function setAlarm() {
const alarmSetEl = document.getElementById("alarmSet");
const timeRemainingEl = document.getElementById("timeRemaining");
let totalSeconds = +alarmSetEl.value;
let intervalId;
function updateCountDown() {
let seconds = totalSeconds % 60;
let minutes = (totalSeconds - seconds) / 60;

let paddedSeconds = seconds.toString().padStart(2, "0");
let paddedMinutes = minutes.toString().padStart(2, "0");
timeRemainingEl.innerHTML = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;
alarmSetEl.value = null;

if (totalSeconds === 0) {
document.body.classList.add("finish-countdown")

playAlarm();
clearInterval(intervalId);

return;
}
totalSeconds -= 1;
}

updateCountDown();
intervalId = setInterval(updateCountDown, 1000);
}



// DO NOT EDIT BELOW HERE

Expand Down
2 changes: 1 addition & 1 deletion Sprint-3/alarmclock/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<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
2 changes: 1 addition & 1 deletion Sprint-3/alarmclock/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ First off, once you've branched off `main`, then update the title element in `in
You will need to write your implementation in `alarmclock.js`.

## How the clock should work

When you click the `Set Alarm` button the counter at the top of the screen should change to the number you entered in the `input` field. For example, if the `input` field says `10` then the title should say `Time Remaining: 00:10`.

Every one second the title should count down by one.
Expand Down
13 changes: 13 additions & 0 deletions Sprint-3/alarmclock/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,16 @@
h1 {
text-align: center;
}

.finish-countdown {
animation: police 0.5s infinite;
}

@keyframes police {
from{
background-color:blue;
}
to{
background-color: red;
}
}
Loading