Vue.js Interview Challenge — #10 — Countdown Timer — Solution

Solution

CodeSandbox

Explanation

Let’s break the requirements into smaller scopes and think what we need to do to accomplish each of them.

Make the component reusable with different time limits

pass the timeLimit, warning and alert values as a prop to the component
use the props instead of fixed values

2. The countdown should not start immediately

remove the startTimer method call from mounted hook

3. Stop and resume the countdown by clicking on the timer

add @click handler to the root element that starts the timer by setting the interval and clear the interval if it exists.

OK, now that we have it broken dow, let’s start with the first requirement.

Requirement #1: Make the component reusable with different time limits

First, we need to define the props that the BaseTimer component will accept.

props: {
  timeLimit: {
    type: Number,
    required: true,
  },
  warning: {
    type: Number,
    required: true,
  },
  alert: {
    type: Number,
    required: true,
  },
}

Then we remove all constant values that were used as fixed values before and replace their usage in the code with our new props.

We also need to move the colorCodes calculation to a computed property as it now relies on the props passed from the parent.

colorCodes() {
  return {
    info: {
      color: "green",
    },
    warning: {
      color: "orange",
      threshold: this.warning,
    },
    alert: {
      color: "red",
      threshold: this.alert,
    },
  };
}

Then we can pass the props from the parent.

<BaseTimer :time-limit="20" :warning="10" :alert="3" />

That’s it, we just made it reusable with different time limit and color thresholds.

Requirement #2: Stop the timer from starting immediately when rendered.

That’s the easy one. Just remove the mounted hook that calls startTime method.

Requirement #3: Allow user to start and stop the timer by clicking on it.

To handle that we need to add a @click listener to the component’s root element.

<div @click="onTimerClick" class="base-timer">

Then we need to implement onTimerClick handler. We are using an interval to count down the time. What we need to do when user click on the timer is to check if the interval already exists and if it does clear it (that will stop the countdown). If it doesn’t exist, that means that the timer is not running, we set a new interval that will start the timer.

onTimerClick() {
  if (this.timerInterval) {
    clearInterval(this.timerInterval);
    this.timerInterval = null;
  } else {
    this.timerInterval = setInterval(() => (this.timePassed += 1), 1000);
  }
}

Voila, all requirements fulfilled!

Want to try another challenge? Take me to the list of available challenges.