JSFiddle - React, Tailwind, and code Playground

by Olga Filipova

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="app" class="container">
  <h2>
    <span>Pomodoro</span>
    <button :disabled="state==='started'" title="start" @click="start()">
      <i class="glyphicon glyphicon-play"></i>
    </button>
    <button :disabled="state!=='started'" title="pause" @click="pause()">
      <i class="glyphicon glyphicon-pause"></i>
    </button>
    <button :disabled="state!=='started' && state !== 'paused'" title="stop" @click="stop()">
      <i class="glyphicon glyphicon-stop"></i>
    </button>
  </h2>
  <h3>{{ title }}</h3>
  <div class="well">
    <div class="pomodoro-timer">
      <span>{{ min }}</span>:<span>{{ sec }}</span>
    </div>
  </div>
  <div class="well" :class="{ 'hidden': pomodoroState === 'work' }">
    <img :src="'http://thecatapi.com/api/images/get?type=gif&size=med&ts=' + timestamp" />
  </div>
</div>

CSS

button:disabled i {
  color: gray;
}

JavaScript

const POMODORO_STATES = {
  WORK: "work",
  REST: "rest"
};
const STATES = {
  STARTED: "started",
  STOPPED: "stopped",
  PAUSED: "paused"
};
const WORKING_TIME_LENGTH_IN_MINUTES = 1;
const RESTING_TIME_LENGTH_IN_MINUTES = 10;

new Vue({
  el: "#app",
  data: {
    state: STATES.STOPPED,
    minute: WORKING_TIME_LENGTH_IN_MINUTES,
    second: 0,
    pomodoroState: POMODORO_STATES.WORK,
    timestamp: 0
  },
  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;
    },
    catImgSrc: function () {
      return "http://thecatapi.com/api/images/get?type=gif&size=med&ts=" + this.timestamp;
    }
  },
  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;
    },
    _tick: function () {
      //update timestamp that is used in image src
      if (this.second % 10 === 0) {
        this.timestamp = new Date().getTime();
      }
      //if second is not 0, just decrement second
      if (this.second !== 0) {
        this.second--;
        return;
      }
      //if second is 0 and minute is not 0, decrement minute and set second to 59
      if (this.minute !== 0) {
        this.minute--;
        this.second = 59;
        return;
      }
      //if second is 0 and minute is 0, toggle working/resting intervals
      this.pomodoroState =...