I'm running a promotion and I wanted to make it clearer on the homepage about it. I researched a few different things but it was leading to a lot of unnecessary code bloat and with the solution I tried it was quite expensive to use the unbranded version, so I decided to code it myself.
You can see it working here. Hopefully the code will be useful to someone else here too.
<a class="countdown-wrapper" href="https://www.codeswaps.com/giving-away-1500-dollars/" target="_blank">
⚡️ $1500 CodeSwaps Giveaway! 2nd winner in:
<div id="countdown">
<div class="countdown-timer">
<div class="countdown-timer-group">
<div id="days" class="countdown-timer-digits"></div><span>Days</span>
</div>
<div class="countdown-timer-group">
<div id="hours" class="countdown-timer-digits"></div><span>Hours</span>
</div>
<div class="countdown-timer-group">
<div id="minutes" class="countdown-timer-digits"></div><span>Mins</span>
</div>
<div class="countdown-timer-group">
<div id="seconds" class="countdown-timer-digits"></div><span>Secs</span>
</div>
</div>
</div>
</a>
.countdown-wrapper {
color: #fff;
text-align: center;
display: flex;
text-decoration: none;
font-size: 18px;
justify-content: center;
align-items: center;
width: 100%;
padding: 2px 10px;
background: #000;
min-height: 60px;
border-bottom: 1px solid #333;
animation: slideDown 0.3s;
animation-delay: 1s;
animation-fill-mode:forwards, none;
animation-iteration-count: 1;
animation-timing-function: ease;
transform: translateY(-100%);
opacity: 0;
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
&:hover,
&:visited {
color: #fff;
}
}
.countdown-timer {
display: flex;
margin: 4px 10px 0 10px;
justify-content: center;
&-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 4px;
min-width: 38px;
}
&-digits {
background: #ffd803;
color: #141414;
font-weight: 700;
padding: 3px 0;
border-radius: 3px;
margin: 0 4px;
display: block;
width: 100%;
}
span {
font-size: 11px;
margin-top: 2px;
display: block;
}
}
(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
//Change end date as required, next deadline is end of August
let givesway = "Aug 30, 2021 00:00:00",
countDown = new Date(givesway).getTime(),
x = setInterval(function() {
let now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//hide when date is reached
if (distance < 0) {
let countdownBanner = document.getElementById("countdown-banner");
countdownBanner.style.display = "none";
clearInterval(x);
}
//seconds
}, 0)
}());
Top comments (2)
Thanks to @sheriffderek for an updated version using custom elements !
I'm a fan of them... but it's certainly something that seems to scare people!
Web_Components/Using_custom_elements