Vue: Pomodoro Clock

index.html

<!-- not finished -->
<div class="container">
  <div id="pomodoroClock">
    <h2 class="title">{{ title }}</h2>
    <transition name="fade">
    <div class="timer" 
         v-if="firstStart === false">
      <span>{{ minutes }}</span>
      <span>:</span>
      <span>{{ seconds }}</span>
    </div>
    </transition>
    <div id="buttons">
      <button id="start"
              v-if="!timer"
              @click="startTimer">
        <i class="fas fa-play"></i>
      </button>
      <button id="stop" 
              v-if="timer"
              @click="stopTimer">
        <i class="fas fa-pause-circle"></i>
      </button>
      <button id="reset"
              v-if="resetButton"
              @click="resetTimer">
        <i class="fas fa-undo"></i>
      </button>
    </div>
    <div class="statistics" 
         v-if="firstStart === false">
        <div class="d-flex justify-content-center">
          Total Sessions: {{ sessionCounter }}
        </div>
    </div>
    <transition name="fade">
    <div class="controls" v-if="resetButton === false">
      <div class="row">
        <div class="col-sm-6 length-wrapper">
          Session Length
          <div class="d-flex justify-content-center">
              <button @click=decrement("session")><i class="fas fa-minus"></i></button>
              {{ sessionLength }}min
              <button @click=increment("session")><i class="fas fa-plus"></i></button>
          </div>
        </div>
        <div class="col-sm-6 length-wrapper">
          Break Length
          <div class="d-flex justify-content-center">
              <button @click=decrement("break")><i class="fas fa-minus"></i></button>
              {{ breakLength }}min
               <button @click=increment("break")><i class="fas fa-plus"></i></button>
          </div>
      </div>
    </div>
  </div>
    </transition>
    <button class="list-button" data-toggle="tooltip" data-placement="bottom" title="To-Do List"><i class="fas fa-angle-down"></i></button>
  </div>
</div>

script.js

// Vue.component('sidebar', {
//   props: [],
//   template: `
  
//   `
// })

const app = new Vue({
  el: '#pomodoroClock',
  // components: {
  //   'sidebar': Sidebar
  // },
  data: {
    timer: null,
    breakLength: 5,
    sessionLength: 25,
    totalTime: (this.sessionLength * 60),
    resetButton: false,
    breakStatus: false, 
    sessionCounter: 0,
    firstStart: true,
    title: "Set your preferred periods!"
  },
  methods: {
    increment(value){
      if(value === "session"){
        this.sessionLength++;
        this.totalTime = (this.sessionLength * 60);
      }
      if(value === "break"){
        this.breakLength++;
      }
    },
    decrement(value){
      if(value === "session" && this.sessionLength > 1){
        // if(this.sessionLength === 10){
        //   alert('It is not recommend to use Sessions < 10min');
        // }
        this.sessionLength--;
        this.totalTime = (this.sessionLength * 60);
      }
      if(value === "break"  && this.breakLength > 1){
        this.breakLength--;
      }
    },
    startTimer: function() {
      if(this.firstStart === true){
        this.totalTime = (this.sessionLength * 60);
        this.firstStart = false;
      }
          this.timer = setInterval(() => this.countdown(), 1000);
          this.resetButton = true;
          this.title = "Work, work, work!"
    },
    stopTimer: function() {
        clearInterval(this.timer);
        this.timer = null;
        this.resetButton = true;
        this.title = "Paused.."
    },
    resetTimer: function() {
        this.totalTime = (this.sessionLength * 60);
        clearInterval(this.timer);
        this.timer = null;
        this.resetButton = false;
        this.title = "Set your preferred periods!"
    },
    padTime: function(time) { //set another 0 for better look
      return (time < 10 ? '0' : '') + time;
    },
    countdown: function() {
      if(this.totalTime < 1 && this.breakStatus === false){
        this.playSound();
        this.sessionCounter++;
        this.breakStatus = true;
        this.title = 'Break time!';
        this.totalTime = (this.breakLength * 60);
      }
      if(this.totalTime < 1 && this.breakStatus === true){
        this.playSound();
        this.stopTimer(); //Pause the Timer after break
        this.breakStatus = false;       
        this.title = 'Work, work, work!';
        this.totalTime = (this.sessionLength * 60);
      }
        this.totalTime--;
      },
    playSound: function() {
        var audio = new Audio("http://soundbible.com/mp3/Air Plane Ding-SoundBible.com-496729130.mp3");
        audio.play();
    }
  },
  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.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.40/vue-strap.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Quicksand');
$font: 'Quicksand', bold;
$color_mazarine: #273c75;
$color_electro: #2f3640;
$color_white: #d1d8e0;
$color_red: #b33939;

body {
  height: 100%;
  background-attachment: fixed;
  background-color: $color_electro;
  color: $color_white;
  font-family: $font;
  margin: 0;
  text-align: center;
}

#pomodoroClock{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: $color-red;
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  width: 30%;
  padding: 1%;
}

.controls{
  margin-top: 5%;
  font-size: 1em;
  button{
    color: $color_white;
    background: none;
    border: 0;
    outline: 0;
    :hover{
      transform: scale(1.1);
      cursor: pointer;
    }
  }
}

#buttons {
  button{
    border: 0;
    outline: 0;
    font-size: 3em;
    background: transparent;
    color: $color_white;
    :hover{
      transform: scale(1.2);
      cursor: pointer;
    }
  }
}

.timer{
  font-size: 6em;
}

.statistics{
  margin-top: 2%;
}

.list-button{
  position: absolute;
  transform: translate(-50%, 0%);
  font-size: 4.5em;
  color: $color_white;
  background: transparent;
  border: 0;
  outline: 0;
  :hover{
    transform: scale(1.1);
    cursor: pointer;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: all 1s ease-out;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

@media (max-width: 700px){
  #pomodoroClock{
    width: 70%;
  }
}
@media (max-width: 1000px){
  #pomodoroClock{
    width: 70%;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet" />

vue-pomodoro-clock.markdown

Vue: Pomodoro Clock

Sccotch Code Challenge: https://scotch.io/bar-talk/build-a-pomodoro-timer-with-vuejs-solution-to-code-challenge-6

Features:

• Start / Pause / Reset Timer
• Set Session and break length
• Small Todo-List

A Pen by mschwrdtnr on CodePen.

License.