Timer Component for Vue.js

#vue #webdev #beginners #javascript

"My recipe for dealing with anger and frustration: set the kitchen timer for twenty minutes, cry, rant, and rave, and at the sound of the bell, simmer down and go about business as usual." - Phyllis Diller

Timers are used often to generate a sense of urgency. You'll see them used on landing pages or product pre-launch pages. Here's a simple timer to incorporate into your next Vue project.

Here's a preview:

Template

The template is quite simple. To create the timer, you need an element to display the countdown. I kept it simple, enclosing it in a p tag, but there's plenty of ways to add complexity depending on your design requirements.

  <p class="text-4xl text-black" v-if="currentTime">
      {{
        currentTime
          ? `${currentTime.days}:${("0" + currentTime.hours).slice(-2)}:${(
              "0" + currentTime.minutes
            ).slice(-2)}:${("0" + currentTime.seconds).slice(-2)}`
          : ""
      }}
    </p>
    <p v-if="!currentTime">
      Time's Up!
    </p>

Styles

For simplicity, I've used Tailwind CSS for styling.

Script

Props & Computed Values

This component takes in 2 props: deadline and speed. The deadline prop is the date for which you are counting down. The speed prop is the amount of time that passes before the numbers change. This is perhaps optional, as the default is to count down every second.

Update

In the updated version, days, hours, minutes, and seconds have been moved to computed properties.

A filter is also used to format the value.

Data

There's only 1 data value - currentTime which keeps track of the current time to display.

Methods

countdown() is the primary method. It first gets called when the component is mounted, then calls itself every second. In this method, the time is parsed into different units of time, stored in currentTime, which is then used to display the timer.

In the updated version, countdown() is much simpler, setting a new currentTime every second.

The original codepen is below, followed by an updated version.