Let's manage time!

Let's start by fixing the first problem by creating computed property title and using it in our markup.

Add the computed section in the Vue options object and add the property title there:

data: { 
  //... 
}, 
computed: { 
  title: function () { 
    return this.pomodoroState === POMODORO_STATES.WORK ? 'Work!' :      
    'Rest!' 
  } 
}, 
methods: { 
//... 

And now just use the following property as it was a normal Vue data property in your markup:

  <h2> 
    <span>Pomodoro</span> 
    <!--!> 
  </h2> 
  <h3>{{ title }}</h3> 
  <div class="well"> 

And voilà! Now we have a title that changes each time the Pomodoro state is being toggled:

Automatic change of the title based on the state of the timer

Nice, isn't it?

Now let's apply the same logic for left padding our minute and second numbers. Let's add two computed properties, min and sec, in our computed section in the data options and apply the simple algorithm to pad the numbers with 0 on the left. Of course, we could use a famous left-pad project ( https://github.com/stevemao/left-pad ), but to keep things simple and not to break the whole Internet ( http://www.theregister.co.uk/2016/03/23/npm_left_pad_chaos/ ), let's apply a simple logic of our own:

computed: { 
  title: function () { 
    return this.pomodoroState === POMODORO_STATES.WORK ? 'Work!' :      
    'Rest!' 
  }, 
  min: function () { 
    if (this.minute < 10) { 
      return '0' + this.minute; 
    } 
 
    return this.minute; 
  }, 
  sec: function () { 
    if (this.second < 10) { 
      return '0' + this.second; 
    } 
 
    return this.second; 
  } 
} 

And let's use these properties instead of minute and second in our HTML code:

   <div class="pomodoro-timer"> 
    <span>{{ min }}</span>:<span>{{ sec }}</span> 
   </div> 

Refresh a page and check how beautiful our numbers are now:

Left padding using computed properties in Vue.js

So, to fix the third problem, let's introduce three application states, started, paused, and stopped, and let's have three methods that would allow us to permute over these states. We already have the method that starts the application, so we just add the logic there to change the state to started. We also add two additional methods, pause and stop, which would pause the timer and change to the corresponding application state:

const POMODORO_STATES = { 
  WORK: 'work', 
  REST: 'rest' 
}; 
const STATES = { 
  STARTED: 'started', 
  STOPPED: 'stopped', 
  PAUSED: 'paused' 
}; 
//<...> 
new Vue({ 
  el: '#app', 
  data: { 
    state: STATES.STOPPED, 
    //<...> 
  }, 
  //<...> 
  methods: { 
    start: function () { 
      this.state = STATES.STARTED; 
      this._tick(); 
      this.interval = setInterval(this._tick, 1000); 
    }, 
    pause: function () { 
      this.state = STATES.PAUSED; 
      clearInterval(this.interval); 
    }, 
    stop: function () { 
      this.state = STATES.STOPPED; 
      clearInterval(this.interval);  
      this.pomodoroState = POMODORO_STATES.WORK; 
      this.minute = WORKING_TIME_LENGTH_IN_MINUTES; 
      this.second = 0; 
    }, 
    //<...> 
  } 
}); 

And, let's add two buttons to our HTML code and add the click listeners that call the corresponding methods:

    <button :disabled="state==='started'"
@click="start()"> 
      <i class="glyphicon glyphicon-play"></i> 
    </button> 
    <button :disabled="state!=='started'"       
      @click="pause()"> 
      <i class="glyphicon glyphicon-pause"></i> 
    </button> 
    <button :disabled="state!=='started' && state !== 'paused'"      
       @click="stop()"> 
      <i class="glyphicon glyphicon-stop"></i> 
    </button> 

Now our application looks nice and allows us to start, pause, and stop the timer:

Toggling start, stop, and pause buttons according to the application state

Check what the whole code looks like in JSFiddle at  https://jsfiddle.net/chudaol/b6vmtzq1/1/.

After so much work and so many of new terms and knowledge, you certainly deserve a kitten! I also love kittens, so here you have a random kitten from the awesome site http://thecatapi.com/ :