Build A Pomodoro Timer with Vue.js
Vue.js is a progressive open-source JavaScript framework for building user interfaces. Currently, it is one of the big players in the UI framework world, along with React and Angular. It is lightweight (~20–30kb), easy to learn, and easy to integrate with existing projects and libraries. Vue also provides comprehensive documentation on their website with provided code examples.
Inspired by the Pomodoro Technique, I thought it would be fun to familiarize myself with Vue by creating a personal pomodoro timer.
The Pomodoro Technique is a time management technique to help boost productivity. The idea is to break down tasks into 25 minute intervals and focus on one task without any distractions (i.e. text, social media). Once the 25 minutes are up, you can reward yourself with a short break (typically 5 minutes) before continuing. By taking frequent breaks and focusing on only one tasks at a time, productivity increases. Read more about the technique here.
The pomodoro timer for this tutorial:
Step 1: Setting up
Create a file structure as follows:
- index.js
- index.html
- index.css (optional for styling)
There are different ways to incorporate Vue into our project. Vue eliminates a lot of the boilerplate code necessary to get started. To keep things simple, I’m going to use script tags within the index.html file.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Step 2: Create a new Vue Instance
Create a Vue instance and pass in the following Vue properties: el, data, methods, and computed.
eltells Vue to render the app inside the HTMLdivwith the id equal to 'app’dataobject will contain information we want Vue to render to the DOMmethodswill contain event handlers for clicking on “start”, “pause”, and “reset”computedwill contain our calculations for minutes and seconds
const app = new Vue({
el: '#app',
data: { },
methods: { },
computed: { }
})
Step 3: Add in the Data
Think of the data object as our ‘state.’ We want to include anything that will be rendered to the DOM for our timer. Updates made to the data object will automatically update our application. By linking the data object to the DOM, a reactive relationship has been created where Vue will automatically update the application when changes are made to the data. In other words, Vue enables us to declaratively render data to the DOM.
Step 4: Add in the Methods
The methods property contains different functions that will control our timer and update the values inside the data object based on events (i.e. when the ‘start’ button is clicked)
- handleStart: the setInterval() function calls the countdown method every 1 second (1000 milliseconds)
- decreaseTimer: decrements the remainingTime by 1
- handlePause: stops the timer from running
- handleReset: restarts the timer to 25 minutes and apply original values to the data object
Step 5: Calculate Minutes and Seconds
The computed property allows us to calculate the minutes and seconds that will be displayed on the timer.
Step 6: Populate the HTML file
Double curly braces {{}} are used to bind the minutes and seconds to the DOM and display it on our timer
Notice that the button tags have the v-on directive. Vue Directives are HTML attributes provided by Vue that apply special reactive behavior to the rendered DOM. Each directives have unique functionalities and are recognizable because they are pre-fixed with ‘v-.’
In this case, when the ‘start’ button is click, the event handler (handleStart) is invoked.
Step 7: Style your Pomodoro (Optional)
Style your personal pomodoro timer based on your preference.
All Done!
Hope you enjoyed this tutorial! Happy Vueing!
Further reading:
☞ Learn Web Development Using VueJS
☞ Learn by Doing: Vue JS 2.0 the Right Way
☞ Vue.js 2 Essentials: Build Your First Vue App
☞ Getting started with Vuejs for development
Suggest:
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Web Development Tutorial - JavaScript, HTML, CSS
☞ Learn JavaScript - Become a Zero to Hero
☞ Javascript Project Tutorial: Budget App
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch