Apply changes from before revert.

app.css

@@ -106,3 +106,7 @@ img.message-image {
 #addForm {
 	margin-top: 60px;
 }
+
+.fa-check-circle {
+	color: green;
+}

app.js

@@ -7,6 +7,7 @@ let kara = new Vue({
             setNameAtStart: true
         },
         messages: [],
+        talk: false,
         lastMessage: null,
         lastMessageData: {},
         name: 'Kara',
@@ -140,6 +141,10 @@ let kara = new Vue({
         },
         botMessage(message) {
             this.addMessage(message, true);
+
+            if (this.talk) {
+                this.say(message);
+            }
         },
         userMessage(body) {
             this.addMessage(body, false);
@@ -456,6 +461,14 @@ let kara = new Vue({
                 this.rollDice();
             }
 
+            if (this.checkForCommands(message, 'talk')) {
+                this.talk = !this.talk;
+            }
+
+            if (this.checkForCommands(message, 'say')) {
+                this.botMessage(this.checkForCommands(message, 'say'))
+            }
+
             this.lastMessage = message;
         },
         checkForCommands(message, commands) {

index.html

@@ -87,19 +87,13 @@
                 <div class="modal-body" style="max-height: 800px; overflow-y: scroll">
                     <ul class="list-group">
                         <li class="list-group-item" v-for="todo in todos" v-if="!todo.checked">
-                            <span class="float-right">
+                            <i class="far fa-circle" @click="todo.checked = !todo.checked"></i> {{ todo.body }}
-                                <input type="checkbox" v-model="todo.checked" @change="updateStorage()"/>
-                            </span>
-                            {{ todo.body }}
                         </li>
                     </ul>
                     <hr/>
                     <ul class="list-group">
                         <li class="list-group-item" v-for="todo in todos" v-if="todo.checked">
-                            <span class="float-right">
+                            <i class="fas fa-check-circle" @click="todo.checked = !todo.checked"></i> <span style="text-decoration: line-through;">{{ todo.body }}</span>
-                                <input type="checkbox" v-model="todo.checked" @change="updateStorage()"/>
-                            </span>
-                            <span style="text-decoration: line-through;">{{ todo.body }}</span>
                         </li>
                     </ul>
                 </div>