Added variable timer

src/App.vue

@@ -1,17 +1,31 @@
 <template>
   <div id="app">
-    <Timer time="10"/>
+    <Settings v-if="time == 0" v-on:set-time="setTime"/>
+    <Timer v-if="time != 0" v-bind:time="time"/>
   </div>
 </template>
 
 <script>
+import Settings from './components/Settings.vue'
 import Timer from './components/Timer.vue'
 
 export default {
   name: 'App',
   components: {
-    Timer
+    Timer,
+    Settings
+  },
+  data: function() {
+    return {
+      time: 0
+    }
+  },
+  methods: {
+    setTime(number) {
+      this.time = number;
+    }
   }
+
 }
 </script>
 

src/components/Settings.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="settings">
+    <div class="time">
+      <span class="time-choice" v-on:click="setTime(15)">15</span>
+      <span class="time-choice" v-on:click="setTime(30)">30</span>
+      <span class="time-choice" v-on:click="setTime(45)">45</span>
+      <span class="time-choice" v-on:click="setTime(60)">60</span>
+      <span class="time-choice" v-on:click="setTime(75)">75</span>
+      <span class="time-choice" v-on:click="setTime(90)">90</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Settings",
+  props: {
+    time: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    setTime(number) {
+      this.$emit('set-time', number);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Timer.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="timer">
     <p v-if="warning == false" class="timeleft reverse">{{ countDown.toString() }}</p>
-    <p v-if="warning == true" class="timeout reverse">
+    <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse">
       <img src="joker.png" alt="joker">
       <img src="joker.png" alt="joker">
       <img src="joker.png" alt="joker">
       <img src="joker.png" alt="joker">
       <img src="joker.png" alt="joker">
     </p>
-    <button v-on:click="restartTimer" class="timerBtn">Restart</button>
+    <button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button>
     <p v-if="warning == false" class="timeleft">{{ countDown.toString() }}</p>
-    <p v-if="warning == true" class="timeout">
+    <p v-if="warning == true || (typeof warning == 'undefined')" class="timeout">
       <img src="joker.png" alt="joker">
       <img src="joker.png" alt="joker">
       <img src="joker.png" alt="joker">
@@ -26,17 +26,15 @@ export default {
   name: "Timer",
   props: {
     time: Number,
-    countDown: {
-      type: Number,
-      default: -2
-    },
-    warning: {
-      type: Boolean,
-      default: true,
-    },
+  },
+  data: function() {
+    return {
+      countDown: -2,
+      warning: true,
+    }
   },
   mounted: function() {
-      },
+  },
   methods: {
     timeleft: function(){
       this.countDown--;
@@ -96,6 +94,13 @@ export default {
     font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
 
+  .timerBtn-inner {
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+    background-color: #2c3e50;
+  }
+
   .reverse {
     transform: scale(-1, -1);
   }