Skip to content

Commit

Permalink
Made ANIMATED COUNTDOWN TIMER (#105)
Browse files Browse the repository at this point in the history
  • Loading branch information
@subratkumar46
subratkumar46 authored Oct 29, 2022
1 parent 6f7f9cc commit 6748916
Show file tree
Hide file tree
Showing 6 changed files with 508 additions and 0 deletions.
16 changes: 16 additions & 0 deletions countdown-timer/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Countdown timer

This is a countdown timer project built using HTML, CSS and JavaScript

## Instructions to operate the timer

- Choose the values for HOURS, MINUTES and SECONDS from the range sliders
- After choosing the desired values, either press the `Space` key or the play button on the UI to start the timer
- To pause the timer, press `P` or use the pause button. To resume the timer, follow the previous step
- To Stop the timer, press `X` or use the stop button.

<img src="./assets/animatedClock.jpg" >

**Note:** First bring focus to the range slider then use the left or right arrow keys to choose values with finesse.


Binary file added countdown-timer/assets/animatedClock.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added countdown-timer/assets/tones/Alarm05.wav
View file
Binary file not shown.
92 changes: 92 additions & 0 deletions countdown-timer/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a5a5d4c734.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/style.css">
<title>Countdown timer</title>
</head>

<body>



<div class="container">
<section class="timer-section">
<p class="timer-display">
<span class="hours">00<span class="time-unit">H</span></span><span class="separator">:</span><span
class="minutes">00<span class="time-unit">M</span></span><span class="separator">:</span><span
class="seconds">00<span class="time-unit">S</span></span>
</p>
</section>

<section class="timer-ctrls">
<button type="button" class="btn timer-start"><i class="fa-solid fa-play"></i></button>
<button type="button" class="btn timer-stop"><i class="fa-solid fa-stop"></i></button>
<button type="button" class="btn timer-pause"><i class="fa-solid fa-pause"></i></button>
</section>

<section class="timer-value-input">
<div>
<label for="set-hours">Set hours</label>
<input type="range" min="00" max="23" step="1" value="00" id="set-hours" autofocus>
</div>
<div>
<label for="set-minutes">Set minutes</label>
<input type="range" min="00" max="59" step="1" value="00" id="set-minutes">
</div>
<div>
<label for="set-seconds">Set seconds</label>
<input type="range" min="00" max="59" step="1" value="00" id="set-seconds">
</div>
</section>
</div>

<footer>
Made with 💖 by <a href="https://github.com/subratkumar46/">SUBRAT KUAMR</a> on 21/10/2022
</footer>

<audio src="assets/tones/Alarm05.wav" id="timer-audio">
Your browser does not support audio playback
</audio>

<script src="scripts/main.js"></script>

<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❄
</div>
</div>
</body>

</html>
158 changes: 158 additions & 0 deletions countdown-timer/scripts/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
const hours = document.querySelector(".hours");
const minutes = document.querySelector(".minutes");
const seconds = document.querySelector(".seconds");
const hourInput = document.getElementById("set-hours");
const minuteInput = document.getElementById("set-minutes");
const secondInput = document.getElementById("set-seconds");
const timerStart = document.querySelector(".timer-start");
const timerStop = document.querySelector(".timer-stop");
const timerPause = document.querySelector(".timer-pause");
const timerAudio = document.getElementById("timer-audio");

hourInput.addEventListener("input", e => {
if (e.target.value.length === 1) {
hours.innerHTML = `0${e.target.value}<span class="time-unit">H</span>`;
} else {
hours.innerHTML = `${e.target.value}<span class="time-unit">H</span>`;
}
});

minuteInput.addEventListener("input", e => {
if (e.target.value.length === 1) {
minutes.innerHTML = `0${e.target.value}<span class="time-unit">M</span>`;
} else {
minutes.innerHTML = `${e.target.value}<span class="time-unit">M</span>`;
}
});

secondInput.addEventListener("input", e => {
if (e.target.value.length === 1) {
seconds.innerHTML = `0${e.target.value}<span class="time-unit">S</span>`;
} else {
seconds.innerHTML = `${e.target.value}<span class="time-unit">S</span>`;
}
});

// UPDATE TIMER DISPLAY
function updateDisplay(entity, element) {
if (String(entity).length === 1) {
if (element.classList.contains("hours")) element.innerHTML = `0${entity}<span class="time-unit">H</span>`;
else if (element.classList.contains("minutes")) element.innerHTML = `0${entity}<span class="time-unit">M</span>`;
else element.innerHTML = `0${entity}<span class="time-unit">S</span>`;
} else {
if (element.classList.contains("hours")) element.innerHTML = `${entity}<span class="time-unit">H</span>`;
else if (element.classList.contains("minutes")) element.innerHTML = `${entity}<span class="time-unit">M</span>`;
else element.innerHTML = `${entity}<span class="time-unit">S</span>`;
}
}

// START TIMER
function startTimer() {
let hr = parseInt(hours.innerHTML);
let min = parseInt(minutes.innerHTML);
let sec = parseInt(seconds.innerHTML);

if (hr == 0 && min == 0 && sec == 0)
return;

timerStart.removeEventListener("click", startTimer);
timerStart.classList.add("disabled");
timerPause.classList.remove("disabled");
hourInput.setAttribute("disabled", "true");
minuteInput.setAttribute("disabled", "true");
secondInput.setAttribute("disabled", "true");

setInterval(() => {
if (sec != 0) {
sec--;
updateDisplay(sec, seconds);
} else {
if (min != 0) {
min--;
sec = 59;
updateDisplay(sec, seconds);
updateDisplay(min, minutes);
} else {
if (hr != 0) {
hr--;
min = 59;
sec = 59;
updateDisplay(hr, hours);
updateDisplay(sec, seconds);
updateDisplay(min, minutes);
} else {
timerAudio.play();

for (let i = 0; i < 999999; i++) {
clearInterval(i);
}

timerStart.addEventListener("click", startTimer);
timerStart.classList.remove("disabled");
hourInput.removeAttribute("disabled");
minuteInput.removeAttribute("disabled");
secondInput.removeAttribute("disabled");
hourInput.value = 0;
minuteInput.value = 0;
secondInput.value = 0;
}
}
}
}, 1000);
}

timerStart.addEventListener("click", startTimer);
document.addEventListener("keydown", e => {
if (e.key === ' ')
startTimer();
});

// PAUSE TIMER
function pauseTimer() {
if (timerStart.classList.contains("disabled")) {
timerStart.classList.remove("disabled");
timerPause.classList.add("disabled");
timerStart.addEventListener("click", startTimer);
hourInput.removeAttribute("disabled");
minuteInput.removeAttribute("disabled");
secondInput.removeAttribute("disabled");

for (let i = 0; i < 999999; i++) {
clearInterval(i);
}
}
}

timerPause.addEventListener("click", pauseTimer);
document.addEventListener("keydown", e => {
if (e.key === 'P' || e.key === 'p') {
pauseTimer();
}
});

// STOP TIMER
function stopTimer() {
timerStart.addEventListener("click", startTimer);
timerStart.classList.remove("disabled");
timerPause.classList.remove("disabled");
hourInput.removeAttribute("disabled");
minuteInput.removeAttribute("disabled");
secondInput.removeAttribute("disabled");
hourInput.value = 0;
minuteInput.value = 0;
secondInput.value = 0;
hours.innerHTML = "00<span class=\"time-unit\">H</span>";
minutes.innerHTML = "00<span class=\"time-unit\">M</span>";
seconds.innerHTML = "00<span class=\"time-unit\">S</span>";

for (let i = 0; i < 999999; i++) {
clearInterval(i);
}
}

timerStop.addEventListener("click", stopTimer);
document.addEventListener("keydown", e => {
if (e.key === 'X' || e.key === 'x') {
stopTimer();
}
});
Loading

0 comments on commit 6748916

Please sign in to comment.