Alpine countdown

by Ben

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js"></script>
<div class="m-4" x-data="{active: false, countdown: false}">
  <div x-show="!active">
    <form method="POST" action="" name="" @submit.prevent="active = true; 
    countdown = $refs.countdownInput.value; 
   window.setInterval(() => { if(countdown > 0) countdown = countdown - 1;}, 1000)">
      <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
          Countdown
        </label>
        <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" type="number" placeholder="10" x-ref="countdownInput" required>
        <button class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded mt-4" type="submit">
          Start
        </button>
      </div>
    </form>
  </div>
  <div x-show="active">
    <template x-if="countdown > 0">
      <div>
        <div>Counting down</div>
        <div x-text="countdown"></div>
      </div>
    </template>
    <template x-if="countdown === 0">
      Countdown completed!
    </template>
  </div>
</div>