PdxCodeGuild · bsarazin1 · Apr 29, 2022 · May 4, 2022 · May 11, 2022 · May 12, 2022
diff --git a/code/Brandon/javascript/lab05/index.html b/code/Brandon/javascript/lab05/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>To Do List</title>
+    <script src ="script.js" defer></script>
+    <script src="https://unpkg.com/vue@3"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="app">
+
+        <input type="text" v-model="inputText" placeholder="Enter item to add to list">
+        <button v-on:click="clickButton">Add Item</button>
+
+        <ul>
+            <li v-for="item in listItems">
+                <button v-on:click="deleteItem()" id="del">Delete</button>
+                <input type="checkbox" v-model="item.complete">Complete: </input>
+                <span :class="{ complete: item.complete }">{{ item.task }}</span>
+            </li>
+        </ul>
+    </div>
+</body>
+</html>
diff --git a/code/Brandon/javascript/lab05/script.js b/code/Brandon/javascript/lab05/script.js
@@ -0,0 +1,25 @@
+const App = {
+  data() {
+    return {
+      message: "welcome to Vue",
+      inputText: "",
+      listItems: [],
+    };
+  },
+  methods: {
+    clickButton() {
+      this.listItems.push({
+        task: this.inputText,
+        complete: false,
+      });
+      inputText = "";
+    },
+    deleteItem() {
+      var elem = document.getElementById("del");
+      elem.parentNode.remove(elem);
+    },
+  },
+};
+
+const app = Vue.createApp(App);
+app.mount("#app");
diff --git a/code/Brandon/javascript/lab05/style.css b/code/Brandon/javascript/lab05/style.css
@@ -0,0 +1,3 @@
+.complete {
+    text-decoration:line-through;
+}