Last active
February 27, 2023 20:06
-
-
Save oneblackcrayon/a7ad977f8d37a3d871758c974d6fc245 to your computer and use it in GitHub Desktop.
Countdown timer with a weekly reset
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- @link: https://stackoverflow.com/questions/35587387/javascript-countdown-clock-every-saturday-at-11am#answer-35588057 --> | |
<div class="has-time"> | |
<div id="clockdiv" class="is-time simply-countdown"> | |
<div class="simply-section"> | |
<span class="days simply-amount"></span> | |
<div class="smalltext simply-word">Days</div> | |
</div> | |
<div class="simply-section"> | |
<span class="hours simply-amount"></span> | |
<div class="smalltext simply-word">Hours</div> | |
</div> | |
<div class="simply-section"> | |
<span class="minutes simply-amount"></span> | |
<div class="smalltext simply-word">Minutes</div> | |
</div> | |
<div class="simply-section"> | |
<span class="seconds simply-amount"></span> | |
<div class="smalltext simply-word">Seconds</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @link: https://stackoverflow.com/questions/35587387/javascript-countdown-clock-every-saturday-at-11am#answer-35588057 | |
*/ | |
(function() { | |
'use strict'; | |
/** | |
* Calculate time remaining until a given end Date. | |
*/ | |
function getTimeRemaining(endtime) { | |
var t = Date.parse(endtime) - Date.parse(new Date()); | |
var seconds = Math.floor((t / 1000) % 60); | |
var minutes = Math.floor((t / 1000 / 60) % 60); | |
var hours = Math.floor((t / (1000 * 60 * 60)) % 24); | |
var days = Math.floor(t / (1000 * 60 * 60 * 24)); | |
return { | |
total: t, | |
days: days, | |
hours: hours, | |
minutes: minutes, | |
seconds: seconds | |
}; | |
} | |
/** | |
* Set up and start a countdown clock. | |
* | |
* Countdown target is the upcoming Sunday. | |
*/ | |
function initializeClock(id) { | |
var clock = document.getElementById(id); | |
var daysSpan = clock.querySelector(".days"); | |
var hoursSpan = clock.querySelector(".hours"); | |
var minutesSpan = clock.querySelector(".minutes"); | |
var secondsSpan = clock.querySelector(".seconds"); | |
// Set an initial end time when the page loads. | |
var endtime = convertToEST(getNextSunday()); | |
function updateClock() { | |
var t = getTimeRemaining(endtime); | |
// When countdown expires, reset the end time. | |
if (t.total <= 0) { | |
endtime = convertToEST(getNextSunday()); | |
} | |
daysSpan.innerHTML = t.days; | |
hoursSpan.innerHTML = ("0" + t.hours).slice(-2); | |
minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); | |
secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); | |
} | |
updateClock(); | |
var timeinterval = setInterval(updateClock, 1000); | |
} | |
/** | |
* Find the Date of the upcoming Sunday at 9AM UTC. | |
*/ | |
function getNextSunday() { | |
var now = new Date(); | |
var nextSunday = new Date(); | |
nextSunday.setDate(now.getDate() + ((7 - 1 - now.getDay() + 7) % 7) + 1); | |
nextSunday.setHours(8, 0, 0, 0); | |
return nextSunday; | |
} | |
/** | |
* Convert a UTC Date object to Eastern. | |
*/ | |
function convertToEST(date) { | |
var estOffset = -5 + 1; // -4.0 daylight savings; | |
var utc = date.getTime() + date.getTimezoneOffset() * 60000; | |
return new Date(utc + 3600000 * estOffset); | |
} | |
initializeClock("clockdiv"); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.has-time { | |
position: relative; | |
} | |
.is-time { | |
display: flex; | |
align-items: baseline; | |
flex-wrap: wrap; | |
font-size: 5rem; | |
gap: 0; | |
justify-content: center; | |
_padding: 1.25rem; | |
position: relative; | |
} | |
/** | |
* Project : simply-countdown | |
* File : simplyCountdown.theme.default | |
* Date : 27/06/2015 | |
* Author : Vincent Loy <vincent.loy1@gmail.com> | |
*/ | |
.simply-countdown.is-box > .simply-section { | |
background: rgba(255, 255, 255, 0.3); | |
border-radius: 2px; | |
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.24); | |
} | |
.simply-countdown.is-rounded > .simply-section { | |
background: rgba(255, 255, 255, 0.3); | |
border-radius: 100%; | |
box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.24); | |
height: min(7.75rem); | |
} | |
.simply-countdown.no-dividers > .simply-section:not(:last-child)::after { | |
display: none; | |
} | |
.simply-countdown > .simply-section { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
margin: 0; | |
padding: 1rem; | |
position: relative; | |
width: min(7.75rem); | |
} | |
.simply-countdown > .simply-section:not(:last-child)::after { | |
content: ""; | |
display: none; | |
background: currentColor; | |
height: 100px; | |
position: absolute; | |
top: auto; | |
left: 100%; | |
transform: translate(100%, 0); | |
width: 2px; | |
z-index: 1; | |
} | |
@media (min-width: 768px) { | |
.simply-countdown > .simply-section:not(:last-child)::after { | |
display: block; | |
} | |
} | |
.simply-countdown > .simply-section .simply-amount { | |
font-weight: 700; | |
} | |
.simply-countdown > .simply-section .simply-word { | |
font-size: 1rem; | |
text-transform: uppercase; | |
} | |
.simply-countdown > .simply-section .simply-amount, | |
.simply-countdown > .simply-section .simply-word { | |
display: block; | |
text-align: center; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @link: https://stackoverflow.com/questions/35587387/javascript-countdown-clock-every-saturday-at-11am#answer-35588057 | |
*/ | |
function getTimeRemaining(endtime) { | |
var t = Date.parse(endtime) - Date.parse(new Date()); | |
var seconds = Math.floor((t / 1000) % 60); | |
var minutes = Math.floor((t / 1000 / 60) % 60); | |
var hours = Math.floor((t / (1000 * 60 * 60)) % 24); | |
var days = Math.floor(t / (1000 * 60 * 60 * 24)); | |
return { | |
total: t, | |
days: days, | |
hours: hours, | |
minutes: minutes, | |
seconds: seconds | |
}; | |
} | |
function initializeClock(id, endtime) { | |
var clock = document.getElementById(id); | |
var daysSpan = clock.querySelector(".days"); | |
var hoursSpan = clock.querySelector(".hours"); | |
var minutesSpan = clock.querySelector(".minutes"); | |
var secondsSpan = clock.querySelector(".seconds"); | |
function updateClock() { | |
var t = getTimeRemaining(endtime); | |
daysSpan.innerHTML = t.days; | |
hoursSpan.innerHTML = ("0" + t.hours).slice(-2); | |
minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); | |
secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); | |
if (t.total <= 0) { | |
clearInterval(timeinterval); | |
} | |
} | |
updateClock(); | |
var timeinterval = setInterval(updateClock, 1000); | |
} | |
function getNextSunday() { | |
var now = new Date(); | |
var nextSunday = new Date(); | |
nextSunday.setDate(now.getDate() + ((7 - 1 - now.getDay() + 7) % 7) + 1); | |
nextSunday.setHours(8, 0, 0, 0); | |
return nextSunday; | |
} | |
function convertToEST(date) { | |
var estOffset = -5 + 1; // -4.0 daylight savings; | |
var utc = date.getTime() + date.getTimezoneOffset() * 60000; | |
return new Date(utc + 3600000 * estOffset); | |
} | |
// var deadline = getNextSunday(); | |
var deadline = new getNextSunday( | |
Date.parse(new Date()) + 8 * 0 * 60 * 60 * 1000 | |
); | |
initializeClock("clockdiv", convertToEST(deadline)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment