working timer with associated word per minute speed at the end

src/components/Screen.vue

@@ -1,5 +1,7 @@
 <template>
   <div class='container'>
+    <p id="timer">{{ timer }}<p>
+    <p id="typing-speed" v-if="!timerRunning">{{ typingSpeed }} words / minute </p>
     <div id="prompt-screen">
       <span v-for="(letter, index) in letters" :key="index" :class="getSpanClasses(index)">{{ letter }}</span>
     </div>
@@ -22,13 +24,17 @@ export default {
       number: 50,
       userText: "",
       activeIndex: 0,
-      isWrong: false
+      isWrong: false,
+      timer: 60,
+      timerRunning: true,
+      typingSpeed: ""
     }
   },
   async mounted() {
     const result = await axios.get("https://random-word-api.herokuapp.com//word?number=" + this.number)
     this.words = result.data
     this.splitWords()
+    this.startTimer()
   },
   methods: {
     isActive(index) {
@@ -66,16 +72,42 @@ export default {
     },
     setNotWrong() {
       if(this.isWrong) this.isWrong = false
+    },
+    setTypingSpeed() {
+      this.typingSpeed = Math.round(this.wordCount)
+    },
+    startTimer() {
+      // Launch countdown
+      setInterval(() => {
+        if(this.timerRunning) { this.timer -- }
+      }, 1000)
+    },
+    stopTimer() {
+      this.timerRunning = false
     }
   },
   computed: {
     cursor() {
       let c = this.compareStrings(this.userText, this.letters.join(""))
+      // Crade
       if(c == this.userText.length) {
         this.setNotWrong()
       }
       return c
     },
+    wordCount: function() {
+      // Count number of spaces in correct text up to now.
+      let correct = this.letters.join("").substring(0, this.cursor)
+      return ((correct.match(/ /g) || []).length);
+    }
+  },
+  watch: {
+    timer: function() {
+      if(this.timer == 0) {
+        this.stopTimer()
+        this.setTypingSpeed()
+      }
+    },
   }
 }
 
@@ -104,12 +136,17 @@ span.active {
   background-color: yellow;
 }
 
+span.wrong {
+  background-color: red;
+}
+
 #user-input > input {
   width: 500px;
   font-size: 2em;
 }
 
-span.wrong {
+#timer {
-  background-color: red;
+  font-size: 2em;
+  font-weight: bold;
 }
 </style>