Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save mohssineAboutaj/5801c1b6400b19e0290fdbdbe37bd9fb to your computer and use it in GitHub Desktop.
Save mohssineAboutaj/5801c1b6400b19e0290fdbdbe37bd9fb to your computer and use it in GitHub Desktop.
Countdown Timer - pure javaScript
<!--
** How to use:
*** Create a parent element
*** set id="timer"
*** set data-hours for the hours counter
*** set data-minutes for the hours counter
*** set data-seconds for the hours counter
**** note
** if you dont set data-hours, data-minutes, data-seconds by default these set value 0
** if you dont set data-timer-end by default it's set timer-end
-->
<div id="timer" data-hours="1" data-minutes="2" data-seconds="3"></div>
/*
** How to use:
*** Create a parent element
*** set id="timer"
*** set data-hours for the hours counter
*** set data-minutes for the hours counter
*** set data-seconds for the hours counter
**** note
** if you dont set data-hours, data-minutes, data-seconds by default these set value 0
** if you dont set data-timer-end by default it's set timer-end
*/
const oneSec = 1000,
container = document.getElementById('timer');
let dataHours = container.getAttribute('data-hours'),
dataMinutes = container.getAttribute('data-minutes'),
dataSeconds = container.getAttribute('data-seconds'),
timerEnd = container.getAttribute('data-timer-end'),
timerOnEndMsg = "data-timer-end";
if (dataHours == '' || dataHours == null || dataHours == NaN) {
dataHours = "0";
}
if (dataMinutes == '' || dataMinutes == null || dataMinutes == NaN) {
dataMinutes = "0";
}
if (dataSeconds == '' || dataSeconds == null || dataSeconds == NaN) {
dataSeconds = "0";
}
let hoursSpan = document.createElement('span'),
minutesSpan = document.createElement('span'),
secondsSpan = document.createElement('span'),
separator1 = document.createElement('span'),
separator2 = document.createElement('span'),
separatorValue = ":",
max = 59,
s = parseInt(dataSeconds) > max ? max : parseInt(dataSeconds),
m = parseInt(dataMinutes) > max ? max : parseInt(dataMinutes),
h = parseInt(dataHours);
secondsSpan.classList.add('time');
minutesSpan.classList.add('time');
hoursSpan.classList.add('time');
separator1.classList.add('separator');
separator1.textContent = separatorValue;
separator2.classList.add('separator');
separator2.textContent = separatorValue;
checkValue = (value)=>{
if (value < 10) {
return "0" + value;
} else {
return value;
}
}
hoursSpan.textContent = checkValue(dataHours);
minutesSpan.textContent = checkValue(dataMinutes);
secondsSpan.textContent = checkValue(dataSeconds);
timer = (sv,mv,hv)=>{
s = parseInt(sv);
m = parseInt(mv);
h = parseInt(hv);
if (s > 0) {
return s -= 1;
} else {
s = max;
if (m > 0) {
return m -= 1;
} else {
m = max;
if (h > 0) {
return h -= 1;
}
}
}
}
finished = ()=>{
max = 0;
let timerEnd = container.getAttribute(timerOnEndMsg);
container.setAttribute(timerOnEndMsg, 'true');
if (timerEnd == '' || timerEnd == null) {
container.textContent = "timer-end";
} else {
container.textContent = timerEnd;
}
}
counter = setInterval(()=>{
if (h == 0 && m == 0 && s == 0) {
clearInterval(counter, finished());
}
if (s >= 0) {
timer(s,m,h);
hoursSpan.textContent = checkValue(h);
minutesSpan.textContent = checkValue(m);
secondsSpan.textContent = checkValue(s);
}
}, oneSec);
let children = [hoursSpan, separator1, minutesSpan, separator2, secondsSpan];
for (child of children) {
container.appendChild(child);
}
body {
background-color: #272727;
color: #eaeaea;
}
div {
text-align: center;
font-size: 2em;
width: 300px;
margin: 10px auto;
}
div .separator {
width: 5%
}
.time {
width: 30%;
display: inline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment