From 1a16af7f28323bd661adc269dea0899ee6ff189e Mon Sep 17 00:00:00 2001
From: tsbugbee <tsbugbee@gmail.com>
Date: Sun, 23 Feb 2020 20:46:26 -0500
Subject: [PATCH] week 5

---
 week-5/index.html | 68 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 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..d52eb69
--- /dev/null
+++ b/week-5/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shopping List App</title>
+    <style>
+        #item{
+            border: 1px solid #ccc;
+            font-size: 16px;
+        }
+        ul,li {
+            margin: 0px;
+            padding: 0px;
+            list-style-type: none;
+        }
+        li{
+            padding: 0.5em;
+        }
+        .strikeout{
+            text-decoration: line-through;
+        }
+    </style>
+</head>
+<body>
+    <div id="shopping-list">
+        <h1>{{ header }}</h1>
+        <div class="add-item-form">        
+            <input v-model="newItem" type="text" placeholder="Enter item name" @keyup.enter="saveItem">
+            <button class="btn btn-primary" :disabled="newItem.length === 0" @click="saveItem">Save Item</button>
+        </div>
+
+        <hr>
+        <ul>
+            <li v-for="item in items" :class="[item.purchased ? 'strikeout' : '']">
+                <input type="checkbox" v-model="item.purchased">
+                {{ item.label }} <button class="btn btn-primary" @click=deleteItem(item)>X</button>
+            </li>
+        </ul>
+    </div>
+    <script src="https://unpkg.com/vue"></script>
+    <script>
+        new Vue({
+            el: '#shopping-list',
+            data:{
+                header: 'Shopping List App',
+                newItem: '',
+                items:[
+
+                ]
+            },
+            methods:{
+                    saveItem: function() {
+                            this.items.push({
+                                label: this.newItem,
+                                purchased: false,
+                            });
+                            this.newItem = '';
+                        },
+                    deleteItem: function(item){
+                            this.items.splice(this.items.indexOf(item), 1);
+                        },
+                }
+            }
+        );
+    </script>
+</body>
+</html>
\ No newline at end of file
