flip countdown timer component using Vue.js

Countdown timers are a common feature in many applications, ranging from event websites to productivity tools. One visually appealing style of countdown timer is the flip or flip-clock style, reminiscent of analog clocks. In this article, we will delve into creating a Flip Countdown Timer component using Vue.js, harnessing the power of this progressive JavaScript framework for building dynamic user interfaces.

Introduction to Vue.js

Vue.js is a JavaScript framework designed for building modern web applications. Known for its simplicity and flexibility, Vue.js allows developers to create reusable components, making it an excellent choice for our countdown timer project. Let’s embark on the journey of building a visually engaging flip countdown timer.

Setting Up the Project

Assuming you have Node.js and npm installed, initiate a new Vue.js project using the Vue CLI:

vue create flip-countdown-timer

Navigate to the project directory:

cd flip-countdown-timer

Install any additional dependencies, such as moment.js for handling date and time:

npm install moment --save

Designing the Flip Countdown Timer Component

Start by designing the structure of your countdown timer component. Vue.js allows us to create modular components with a clear separation of concerns. Consider creating sub-components for the hours, minutes, and seconds sections of the countdown timer.

<!-- FlipCountdownTimer.vue -->
<template>
  <div class="flip-countdown-timer">
    <FlipUnit :digit="hoursTens" />
    <FlipUnit :digit="hoursOnes" />
    <span class="flip-separator">:</span>
    <FlipUnit :digit="minutesTens" />
    <FlipUnit :digit="minutesOnes" />
    <span class="flip-separator">:</span>
    <FlipUnit :digit="secondsTens" />
    <FlipUnit :digit="secondsOnes" />
  </div>
</template>

<script>
import FlipUnit from './FlipUnit.vue';

export default {
  components: {
    FlipUnit,
  },
  data() {
    return {
      targetDate: moment().add(1, 'hour'), // Set your target date here
      currentDate: moment(),
      countdown: null,
    };
  },
  computed: {
    hoursTens() {
      // Calculate and return the tens place of hours
    },
    // ... Repeat for other digits
  },
  methods: {
    updateCountdown() {
      // Calculate the remaining time and update component data
    },
  },
  mounted() {
    // Initialize the countdown and update at intervals
    this.countdown = setInterval(this.updateCountdown, 1000);
  },
  beforeDestroy() {
    // Clear the interval to prevent memory leaks
    clearInterval(this.countdown);
  },
};
</script>

<style scoped>
/* Component-specific styles here */
</style>

Building the Flip Unit Component

Create a separate component for the flip unit, representing a single digit of the countdown timer. This component will handle the flipping animation.

<!-- FlipUnit.vue -->
<template>
  <div class="flip-unit-container">
    <div class="flip-digit" :class="{ flipped: isFlipped }">
      <span>{{ digit }}</span>
    </div>
    <div class="flip-shadow"></div>
  </div>
</template>

<script>
export default {
  props: ['digit'],
  data() {
    return {
      isFlipped: false,
    };
  },
  watch: {
    digit() {
      this.isFlipped = true;
      // Set a timeout to reset the flip animation after a short delay
      setTimeout(() => {
        this.isFlipped = false;
      }, 600);
    },
  },
};
</script>

<style scoped>
/* Component-specific styles here */
</style>

Styling the Countdown Timer

Enhance the visual appeal of your flip countdown timer by adding styles. Utilize CSS to create a sleek and modern design for both the countdown timer and the flip units.

/* App.vue */
#app {
  text-align: center;
}

/* FlipCountdownTimer.vue */
.flip-countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arial', sans-serif;
}

.flip-separator {
  margin: 0 0.5rem;
}

/* FlipUnit.vue */
.flip-unit-container {
  position: relative;
}

.flip-digit {
  width: 30px;
  height: 40px;
  background-color: #333;
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  transition: transform 0.5s;
}

.flip-digit span {
  display: block;
}

.flip-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  transform: rotateX(180deg);
  z-index: -1;
}

A simple flip countdown timer component for Vue 2. x through which we can create a timer for our web pages to show the timer countdown for users generally used over e-commerce or hosting websites to show the sales discount

Here is a preview of the flip countdown time using Vue.js

flip countdown time

Installation

npm i vue2-flip-countdown --save

Running Demo on Local Machine

cd demo
npm i
npm run serve

Then open http://localhost:8080 on a browser

Usage

<template>
  <div>
    <flip-countdown deadline="2018-12-25 00:00:00"></flip-countdown>
  </div>
</template>

<script>
  import FlipCountdown from 'vue2-flip-countdown'

  export default {
    components: { FlipCountdown }
  }
</script>
  • If you want to remove days section, set showDays prop to false (available since v0.10.0)
  • If you want to remove hours/minutes/seconds section, set showHours/showMinutes/showSeconds prop to false (available since v0.11.0)
<flip-countdown deadline="2018-12-25 00:00:00" :showDays="false"></flip-countdown>
  • To notify if a timer has elapsed, bind a handler to timeElapsed event emitted by the component
<flip-countdown deadline="2018-12-25 00:00:00" @timeElapsed="timeElapsedHandler"></flip-countdown>

Please refer to /demo directory for examples.

If you’re using Nuxt.js, use to avoid server-side rendering. (You will get error if you don’t use )

<template>
  <div>
    <no-ssr>
      <flip-countdown deadline="2018-12-25 00:00:00"></flip-countdown>
    </no-ssr>
  </div>
</template>

Leave a Comment