Apply changes from before revert.

app.css

@@ -1,108 +1,112 @@
-body {
+body {
-	margin: 15px;
+	margin: 15px;
-	padding: 0;
+	padding: 0;
-}
+}
-
+
-#kara {
+#kara {
-	margin: 0;
+	margin: 0;
-	padding: 0;
+	padding: 0;
-	width: auto;
+	width: auto;
-}
+}
-
+
-@media (min-width: 40em) {
+@media (min-width: 40em) {
-	#kara,
+	#kara,
-	#kara-banner,
+	#kara-banner,
-	#chatbox-wrapper {
+	#chatbox-wrapper {
-		margin-left: auto;
+		margin-left: auto;
-		margin-right: auto;
+		margin-right: auto;
-		padding: 0;
+		padding: 0;
-		width: 40em;
+		width: 40em;
-	}
+	}
-}
+}
-
+
-.message {
+.message {
-	color: black;
+	color: black;
-	padding: 10px;
+	padding: 10px;
-	margin-bottom: 5px;
+	margin-bottom: 5px;
-	min-width: 55%;
+	min-width: 55%;
-	max-width: 80%;
+	max-width: 80%;
-}
+}
-
+
-img.message-image {
+img.message-image {
-	max-width: 60%;
+	max-width: 60%;
-	border-radius: 0 15px 15px 15px;
+	border-radius: 0 15px 15px 15px;
-
+
-	margin-bottom: 5px;
+	margin-bottom: 5px;
-	clear: top;
+	clear: top;
-}
+}
-
+
-.bot-message {
+.bot-message {
-	border-radius: 0 15px 15px 15px;
+	border-radius: 0 15px 15px 15px;
-	background-color: lightgreen;
+	background-color: lightgreen;
-}
+}
-
+
-.user-message {
+.user-message {
-	border-radius: 15px 0 15px 15px;
+	border-radius: 15px 0 15px 15px;
-	background-color: lightblue;
+	background-color: lightblue;
-}
+}
-
+
-#chat-box {
+#chat-box {
-	margin-top: 4em;
+	margin-top: 4em;
-	overflow-y: scroll;
+	overflow-y: scroll;
-	height: 65vh;
+	height: 65vh;
-	padding-bottom: 2em;
+	padding-bottom: 2em;
-}
+}
-
+
-#chatbox-wrapper {
+#chatbox-wrapper {
-	position: fixed;
+	position: fixed;
-	padding: 1em;
+	padding: 1em;
-	bottom: 0;
+	bottom: 0;
-	left: 0;
+	left: 0;
-	right: 0;
+	right: 0;
-}
+}
-
+
-#kara-banner {
+#kara-banner {
-	position: fixed;
+	position: fixed;
-	height: 3.2em;
+	height: 3.2em;
-	top: 0;
+	top: 0;
-	left: 0;
+	left: 0;
-	right: 0;
+	right: 0;
-	text-align: center;
+	text-align: center;
-	padding: 0.7em;
+	padding: 0.7em;
-}
+}
-
+
-#kara-banner .btn, .add-response-input-button {
+#kara-banner .btn, .add-response-input-button {
-	margin-top: -0.3em;
+	margin-top: -0.3em;
-}
+}
-
+
-.response-input {
+.response-input {
-	margin-bottom: 3px;
+	margin-bottom: 3px;
-}
+}
-
+
-.form-button {
+.form-button {
-	width: 100%;
+	width: 100%;
-}
+}
-
+
-.command-message {
+.command-message {
-	color: grey;
+	color: grey;
-}
+}
-
+
-.command-message::before {
+.command-message::before {
-	content: '$: ';
+	content: '$: ';
-}
+}
-
+
-.header-logo {
+.header-logo {
-	max-height: 32px;
+	max-height: 32px;
-	max-width: 32px;
+	max-width: 32px;
-	width: 32px;
+	width: 32px;
-	height: 32px;
+	height: 32px;
-	margin-right: 5px;
+	margin-right: 5px;
-}
+}
-
+
-.me-message {
+.me-message {
-	background-color: orange;
+	background-color: orange;
-}
+}
-
+
-#addForm {
+#addForm {
-	margin-top: 60px;
+	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>