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
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 tofalse
(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>