add homework_8.3

LitePenguins · Mar 9, 2020 · 212d83a · 212d83a
1 parent f0a81bb
commit 212d83a
Showing 1 changed file with 61 additions and 0 deletions.
diff --git a/homework/homework_8.3.html b/homework/homework_8.3.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Shopping list example</title>
+    <style>
+        li {
+            margin-bottom: 10px;
+        }
+        li button {
+            font-size: 8px;
+            margin-left: 20px;
+            color: #666;
+        }
+    </style>
+</head>
+
+<body>
+
+    <h1>My shopping list</h1>
+
+    <div>
+        <label for="item">Enter a new item:</label>
+        <input type="text" name="item" id="item">
+        <button>Add item</button>
+    </div>
+
+    <ul>
+
+    </ul>
+
+    <script>
+        let list = document.querySelector('ul');
+        let input = document.querySelector('input');
+        let button = document.querySelector('button');
+        button.addEventListener('click', () => {
+            let myItem = input.value;
+            input.value = '';
+
+            let listItem = document.createElement('li');
+            let listText = document.createElement('span');
+            let listBtn = document.createElement('button');
+
+            listItem.appendChild(listText);
+            listItem.appendChild(listBtn);
+
+            listText.textContent = myItem;
+            listBtn.textContent = 'Delete';
+
+            list.appendChild(listItem);
+
+            listBtn.addEventListener('click', () => {
+                list.removeChild(listItem);
+            });
+            input.focus();
+        });
+    </script>
+</body>
+
+</html>