From b9aed9cfa5165f52c6910cb685b512d25afc8f09 Mon Sep 17 00:00:00 2001
From: Meira Tompkins <Meira.Tompkins@uconn.edu>
Date: Mon, 24 Feb 2020 00:36:00 -0500
Subject: [PATCH] vue shopping list

---
 week-5/index.html | 62 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 week-5/index.html
diff --git a/week-5/index.html b/week-5/index.html
new file mode 100644
index 0000000..af7f314
--- /dev/null
+++ b/week-5/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue Shopping List</title>
+</head>
+<body>
+    
+    
+    <main id="app">
+        <h1>{{listTitle}}</h1>
+        <!--form-->
+        <!--Submit is doing the same thing as adding an event listener for the add button and clicking the enter key-->
+        <form @submit.prevent="addItem">
+        <input type="text" name="" id="" v-model="newItem">
+        <button type="submit">Add</button>
+        
+
+        </form>
+        <hr>
+
+        <ul>
+            <li v-for="item in listItems">
+                <input type="checkbox" name="" id="">
+                <span>{{ item }}</span>
+                <a href="#" @click.prevent="deleteItem(item)">x</a>
+
+            </li>
+        </ul>
+
+    </main>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+    var app = new Vue({
+    el: '#app',
+    data: {
+        listTitle: 'Home Depot Shopping List',
+        listItems: [
+            'nails',
+            'hammer'
+        ], 
+        newItem:'',
+    }, 
+    methods:{
+        addItem(){
+            this.listItems.push(this.newItem);
+            this.newItem = '';
+        },
+        deleteItem(itemName){
+            //alert(itemName)
+            this.listItems.splice(itemName,1);
+        }
+    }
+    });   
+
+
+    </script>
+</body>
+</html>
\ No newline at end of file
