Vue Pomodoro Timer Scotch Challenge Main

index.html

<!-- our template -->
<section id="app" class="hero is-info is-fullheight is-bold">
<div class="hero-body">
<div class="container has-text-centered">
  
  <h2 class="title is-6">{{title}}</h2>
  
  <div id="timer">
    <span id="minutes">{{ minutes }}</span>
    <span id="middle">:</span>
    <span id="seconds">{{ seconds }}</span>
  </div>

  <div id="buttons">
<!--     Start TImer -->
    <button 
      id="start" 
      class="button is-dark is-large" 
      v-if="!timer"
      @click="startTimer">
        <i class="far fa-play-circle"></i>
    </button>
<!--     Pause Timer -->
    <button 
      id="stop" 
      class="button is-dark is-large" 
      v-if="timer"
      @click="stopTimer">
        <i class="far fa-pause-circle"></i>
    </button>
<!--     Restart Timer -->
    <button 
      id="reset" 
      class="button is-dark is-large" 
      v-if="resetButton"
      @click="resetTimer">
        <i class="fas fa-undo"></i>
    </button>
  </div>
  
</div>
</div>
</section>

script.js

const app = new Vue({
  el: '#app',
  // ========================
  data: {
    timer: null,
    totalTime: (25 * 60),
    resetButton: false,
    title: "Let the countdown begin!!"
  },
  // ========================
  methods: {
    startTimer: function() {
      this.timer = setInterval(() => this.countdown(), 1000);
      this.resetButton = true;
      this.title = "Greatness is within sight!!"
    },
    stopTimer: function() {
      clearInterval(this.timer);
      this.timer = null;
      this.resetButton = true;
      this.title = "Never quit, keep going!!"
    },
    resetTimer: function() {
      this.totalTime = (25 * 60);
      clearInterval(this.timer);
      this.timer = null;
      this.resetButton = false;
      this.title = "Let the countdown begin!!"
    },
    padTime: function(time) {
      return (time < 10 ? '0' : '') + time;
    },
    countdown: function() {
      this.totalTime--;
    }
  },
  // ========================
  computed: {
    minutes: function() {
      const minutes = Math.floor(this.totalTime / 60);
      return this.padTime(minutes);
    },
    seconds: function() {
      const seconds = this.totalTime - (this.minutes * 60);
      return this.padTime(seconds);
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

style.scss

$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
$black: #131313;
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif;

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $black;
$primary-invert: $pink-invert;
// Use the new serif family
$family-primary: $family-serif;

.hero-body {
      background-color: $black;
}

#message {
  color: #DDD;
  font-size: 50px;
  margin-bottom: 20px;
}

#timer {
  font-size: 200px;
  line-height: 1;
  margin-bottom: 40px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />

vue-pomodoro-timer-scotch-challenge-main.markdown

Vue Pomodoro Timer Scotch Challenge Main

A Pen by Tomasz Skrynnyk on CodePen.

License.