Build A Pomodoro Timer with Vue.js

Build A Pomodoro Timer with Vue.js

  • 2018-11-24 03:23 AM
  • 694

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.

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.

  • el tells Vue to render the app inside the HTML div with the id equal to 'app’
  • data object will contain information we want Vue to render to the DOM
  • methods will contain event handlers for clicking on “start”, “pause”, and “reset”
  • computed will 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