In this tutorial, we are going to learn how to create a UTC countdown timer in VueJs. We are UTC time to manipulate the countdown timer so that every user from different locations can see the same countdown.
Let's create a component called CountDownTimer.vue
Now, let's add some HTML and CSS for the countdown timer in the template.
<div v-if="displayCountDown">
<h2 class="text-animation" v-if="isLive">Sale is now LIVE</h2>
<div v-else>
<h2 class="text-animation">Sale starts in:</h2>
<section>
<section class="timer">
<div>
<section>
<p>{{ days }}</p>
<p>
<small>Days</small>
</p>
</section>
<span>:</span>
<section>
<p>{{ hours }}</p>
<p>
<small>Hours</small>
</p>
</section>
<span>:</span>
<section>
<p>{{ minutes }}</p>
<p>
<small>Minutes</small>
</p>
</section>
<span>:</span>
<section>
<p>{{ seconds }}</p>
<p>
<small>Seconds</small>
</p>
</section>
</div>
</section>
</section>
</div>
</div><style scoped>
.timer {
display: flex;
justify-content: center;
align-items: center;
}
.timer div:first-child {
border: 1px solid white;
border-radius: 3px;
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 1em;
padding: 1em 1em 0 1em;
}
section p:first-child,
.timer div:last-child span {
display: contents;
}
@media screen and (max-width: 480px) {
.timer div:last-child {
margin-left: 2em;
margin-right: 2em;
}
}
.text-animation {
animation: color-change 5s infinite;
font-weight: 400;
}
@keyframes color-change {
0% {
color: #00FFA3;
}
25% {
color: yellow;
}
50% {
color: #DC1FFF;
}
75% {
color: #F1A945;
}
100% {
color: #00FFA3;
}
}
</style>Add the data used inside the template
data() {
return {
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
isLive: false,
displayCountDown: false
}
},Create a function called startTimer where we are going to add the timmer logic.
methods: {
startTimer() {
const countdownDate = new Date("January 11, 2022 7:59:00").getTime(); // always use UTC time
let self = this;
let interval = setInterval(() => {
const now = new Date();
let nowUTC = new Date(
now.getUTCFullYear(),
now.getUTCMonth(),
now.getUTCDate(),
now.getUTCHours(),
now.getUTCMinutes(),
now.getUTCSeconds()
).getTime();
const distance = countdownDate - nowUTC;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance <= 0) {
self.isLive = true;
clearInterval(interval);
} else {
self.days = days;
self.hours = hours;
self.minutes = minutes;
self.seconds = seconds;
}
self.displayCountDown = true;
}, 1000);
}
}Here, first, create the UTC time when the action will happen i.e for e.g the time when the sale starts. Make sure that the time needs to be UTC time.
const countdownDate = new Date("January 11, 2022 7:59:00").getTime(); // always use UTC timeAfter that, we are using setInterval() method which repeatedly calls a function or executes a code snippet inside it, with a fixed time delay between each call.
Note there we are using 1000 ms time so that the countdown will refresh in every second.
Let's look into the below code
const now = new Date();
let nowUTC = new Date(
now.getUTCFullYear(),
now.getUTCMonth(),
now.getUTCDate(),
now.getUTCHours(),
now.getUTCMinutes(),
now.getUTCSeconds()
).getTime();We are getting the current data which gives the current location browser data. We have to convert this to UTC current date. So the user from a different location can see the same countdown
After that, we are calculating distance which will show the countdown is expired or not and days, hours, minutes, and seconds.
If the countdown is expired then we are clearing the setInterval and hiding the countdown and showing some desired text
Start the countdown timer. For this, simply call the startTimer function from created hook.
created() {
this.startTimer();
},The demo output for this example looks like below:
The overall code implementation looks as below:
<template>
<div v-if="displayCountDown">
<h2 class="text-animation" v-if="isLive">Sale is now LIVE</h2>
<div v-else>
<h2 class="text-animation">Sale starts in:</h2>
<section>
<section class="timer">
<div>
<section>
<p>{{ days }}</p>
<p>
<small>Days</small>
</p>
</section>
<span>:</span>
<section>
<p>{{ hours }}</p>
<p>
<small>Hours</small>
</p>
</section>
<span>:</span>
<section>
<p>{{ minutes }}</p>
<p>
<small>Minutes</small>
</p>
</section>
<span>:</span>
<section>
<p>{{ seconds }}</p>
<p>
<small>Seconds</small>
</p>
</section>
</div>
</section>
</section>
</div>
</div>
</template>
<script>
export default {
name: "CountDownTimer",
created() {
this.startTimer();
},
data() {
return {
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
isLive: false,
displayCountDown: false
}
},
methods: {
startTimer() {
const countdownDate = new Date("January 11, 2022 7:59:00").getTime();
let self = this;
let interval = setInterval(() => {
const now = new Date();
let nowUTC = new Date(
now.getUTCFullYear(),
now.getUTCMonth(),
now.getUTCDate(),
now.getUTCHours(),
now.getUTCMinutes(),
now.getUTCSeconds()
).getTime();
const distance = countdownDate - nowUTC;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance <= 0) {
self.isLive = true;
clearInterval(interval);
} else {
self.days = days;
self.hours = hours;
self.minutes = minutes;
self.seconds = seconds;
}
self.displayCountDown = true;
}, 1000);
}
}
}
</script>
<style scoped>
.timer {
display: flex;
justify-content: center;
align-items: center;
}
.timer div:first-child {
border: 1px solid white;
border-radius: 3px;
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 1em;
padding: 1em 1em 0 1em;
}
section p:first-child,
.timer div:last-child span {
display: contents;
}
@media screen and (max-width: 480px) {
.timer div:last-child {
margin-left: 2em;
margin-right: 2em;
}
}
.text-animation {
animation: color-change 5s infinite;
font-weight: 400;
}
@keyframes color-change {
0% {
color: #00FFA3;
}
25% {
color: yellow;
}
50% {
color: #DC1FFF;
}
75% {
color: #F1A945;
}
100% {
color: #00FFA3;
}
}
</style>