week 5

tsb15104 · Feb 24, 2020 · 1a16af7 · 1a16af7
1 parent 9dc437b
commit 1a16af7
Showing 1 changed file with 68 additions and 0 deletions.
diff --git a/week-5/index.html 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>