OdGbgQ

index.html

<main id="clock">
  <template v-if="finished">
    BOOM
  </template>
  <template v-else>
    <time>{{ display }}</time>
  </template>
</main>

odgbgq.markdown

OdGbgQ

A Pen by Takuya Matsuda on CodePen.

License.

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)
  }
})

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>

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;
}