How to Develop a Countdown Clock using Vue and Luxon (for Rockstars)

Screencast and Codepen Included

Image for post
Image for post
const app = new Vue({
el: '#clock'
})
<time>{{ now }}</time>
data() {
return {
now: luxon.DateTime.local()
}
}
mounted() {
setInterval(() => {
this.now = luxon.DateTime.local()
}, 100)
}
data() {
return {
now: luxon.DateTime.local(),
tick: null
}
}
mounted() {
this.tick = setInterval(() => {
this.now = luxon.DateTime.local()
}, 100)
}
data() {
return {
now: luxon.DateTime.local(),
end: luxon.DateTime.local().plus({ seconds: 10 }),
tick: null
}
}
computed: {
remaining() {
return this.end.diff(this.now).toObject()
}
}
computed: {
display() {
return luxon.Duration.fromObject(this.remaining).toFormat('hh:mm:ss')
}
}
computed: {
finished() {
return this.now >= this.end
}
}
watch: {
now() {
if (this.finished) {
clearInterval(this.tick)
}
}
}
finished() {
return this.now >= this.end.minus({ seconds: 1 })
}
<main id=”clock”>
<template v-if=”finished”>
Boom
</template>
<template v-else>
<time>{{ display }}</time>
</template>
</main>
@import url('https://fonts.googleapis.com/css?family=Orbitron');html, body, main{
height: 100%;
width: 100%;
}
body{
background: black;
color: #D53738;
font: 7vh 'Orbitron', sans-serif;
}
main{
align-items: center;
display: flex;
justify-content: center;
}

Going to 11

data() {
return {
start: luxon.DateTime.local()
}
}
computed: {
total() {
return this.end.diff(this.start).toObject()
},
elapsed() {
return this.now.diff(this.start).toObject()
},
percent() {
return this.elapsed.milliseconds / this.total.milliseconds * 100
}
}
time{
border-radius: 50%;
height: 25vh;
width: 25vh;
}
computed: {
gradient() {
background: `radial-gradient(black 60%, transparent 61%), conic-gradient(#D53738 0% ${this.percent}%, transparent ${this.percent}% 100%)`
}
}
<time :style="gradient"></time>

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store