AlpineJS Timer

An implementation of 24 hours counter in alpine.js

by Harsh Kansagara

HTML

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<div class="timer" x-data="timer(new Date().setDate(new Date().getDate() + 1))" x-init="init();">
  <h1 x-text="time().days"></h1>
  <h1 x-text="time().hours"></h1>
  <h1 x-text="time().minutes"></h1>
  <h1 x-text="time().seconds"></h1>
</div>

CSS

.timer{
  display:flex;
}
.timer h1 + h1:before{
  content:":"
}

JavaScript

function timer(expiry) {
  return {
    expiry: expiry,
    remaining:null,
    init() {
      this.setRemaining()
      setInterval(() => {
        this.setRemaining();
      }, 1000);
    },
    setRemaining() {
      const diff = this.expiry - new Date().getTime();
      this.remaining =  parseInt(diff / 1000);
    },
    days() {
      return {
      	value:this.remaining / 86400,
        remaining:this.remaining % 86400
      };
    },
    hours() {
      return {
      	value:this.days().remaining / 3600,
        remaining:this.days().remaining % 3600
      };
    },
    minutes() {
    	return {
      	value:this.hours().remaining / 60,
        remaining:this.hours().remaining % 60
      };
    },
    seconds() {
    	return {
      	value:this.minutes().remaining,
      };
    },
    format(value) {
      return ("0" + parseInt(value)).slice(-2)
    },
    time(){
    	return {
      	days:this.format(this.days().value),
        hours:this.format(this.hours().value),
        minutes:this.format(this.minutes().value),
        seconds:this.format(this.seconds().value),
      }
    },
  }
}