Skip to content

Instantly share code, notes, and snippets.

@matsutakk

matsutakk/index.html

Created February 20, 2019 15:22
Show Gist options
  • Save matsutakk/b573c37f8558bdc1721d82ea5a74b1a8 to your computer and use it in GitHub Desktop.
Save matsutakk/b573c37f8558bdc1721d82ea5a74b1a8 to your computer and use it in GitHub Desktop.
Download ZIP
OdGbgQ
Raw
index.html
<main id="clock">
<template v-if="finished">
BOOM
</template>
<template v-else>
<time>{{ display }}</time>
</template>
</main>
Raw
script.js
const app = new Vue({
el: '#clock',
data(){
return{
now: luxon.DateTime.local().set({ milliseconds: 0 }),
end: luxon.DateTime.local().set({ milliseconds: 0 }).plus({ seconds: 10 }),
tick: null
}
},
watch: {
now(){
if(this.finished()){
clearInterval(this.tick)
}
}
},
computed: {
remaining(){
return this.end.diff(this.now).toObject()
},
display(){
return luxon.Duration.fromObject(this.remaining).toFormat('hh:mm:ss')
},
finished(){
return this.now >= this.end
}
},
mounted(){
this.tick = setInterval(() => {
this.now = luxon.DateTime.local().set({ milliseconds: 0 })
}, 1000)
}
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.6/vue.min.js"></script>
<script src="https://moment.github.io/luxon/global/luxon.min.js"></script>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Orbitron');
html,body,main{
height: 100%;
width: 100%;
}
body{
background: black;
color: #D53738;
font: 8vh 'Orbitron';
}
main{
align-items: center;
display: flex;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment