Vue

by WILLIAM CORREA

HTML

<div id="app">
  <component :is="component" v-bind="properties"/>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    component: 'div',
    seconds: 0,
    properties: {
    	name: 'William',
      minutes: ''
    }
  },
  methods: {
  	applyTemplate (template, seconds = 300) {
      this.seconds = seconds

			this.properties.minutes = this.format(this.seconds)
    	this.component = {
      	template: `<div>${template}</div>`,
        props: ['name', 'minutes']
      }

      const interval = window.setInterval(() => {
        // const date = new Date();
        // const time = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
        this.seconds--
        this.properties.minutes = this.format(this.seconds)
        if (this.seconds <= 0) {
          window.clearInterval(interval)
        }
      }, 1000)
    },
    format(timeInSeconds) {
        const pad = (num, size) => ('000' + num).slice(size * -1)
        const time = parseFloat(timeInSeconds).toFixed(3)
        // const hours = Math.floor(time / 60 / 60)
        const minutes = Math.floor(time / 60) % 60
        const seconds = Math.floor(time - minutes * 60)
				// pad(hours, 2) + ':' + 
        return pad(minutes, 2) + ':' + pad(seconds, 2)
    }
  },
  created () {
    const pad = (num) => ('0' + num).slice(-2);

  	window.setTimeout(() => this.applyTemplate('my name is {{name}} and in {{minutes}} minutes this will explode'), 1000)
  }
})