adding .wrong css class to display errors

src/components/Screen.vue

@@ -1,7 +1,7 @@
 <template>
   <div class='container'>
     <div id="prompt-screen">
-      <span v-for="(letter, index) in letters" :key="index" :class="[isActive(index) ? 'active' : '']">{{ letter }}</span>
+      <span v-for="(letter, index) in letters" :key="index" :class="getSpanClasses(index)">{{ letter }}</span>
     </div>
 
     <div id="user-input">
@@ -21,7 +21,8 @@ export default {
       letters: [],
       number: 50,
       userText: "",
-      activeIndex: 0
+      activeIndex: 0,
+      isWrong: false
     }
   },
   async mounted() {
@@ -44,16 +45,37 @@ export default {
     compareStrings(a, b) {
       let count = 0
       a.split("").forEach((aLetter, index) => {
-        if(b.split("")[index] != aLetter) { return count}
+        if(b.split("")[index] != aLetter) {
+          this.setWrong()
+          return count
+        }
         count ++
       })
       return count
+    },
+    getSpanClasses(index) {
+      let classes = ""
+      if(index === this.cursor) {
+        classes += "active"
+        if(this.isWrong) classes += " wrong"
+      }
+      return classes
+    },
+    setWrong() {
+      if(!this.isWrong) this.isWrong = true
+    },
+    setNotWrong() {
+      if(this.isWrong) this.isWrong = false
     }
   },
   computed: {
     cursor() {
-      return this.compareStrings(this.userText, this.letters.join(""))
+      let c = this.compareStrings(this.userText, this.letters.join(""))
+      if(c == this.userText.length) {
+        this.setNotWrong()
       }
+      return c
+    },
   }
 }
 
@@ -86,4 +108,8 @@ span.active {
   width: 500px;
   font-size: 2em;
 }
+
+span.wrong {
+  background-color: red;
+}
 </style>