ibrahimyolbir
diff --git a/‎.DS_Store
12 KB b/‎.DS_Store
12 KB
diff --git a/‎ShoppingList/app.js
+45 b/‎ShoppingList/app.js
+45
diff --git a/‎ShoppingList/index.html
+23 b/‎ShoppingList/index.html
+23
diff --git a/‎ShoppingList/style.css
+15 b/‎ShoppingList/style.css
+15
@@ -0,0 +1,45 @@
+
+let btn = document.querySelector("#button");
+
+
+btn.addEventListener('click', function () {
+    addItem();
+});
+
+function addItem() {
+    let li = document.createElement('li');
+    let inputValue = document.querySelector('#input').value;
+    let elementText = document.createTextNode(inputValue);
+    li.appendChild(elementText);
+    if (inputValue === '') {
+        alert('write something!!!');
+    } else {
+        document.querySelector("#ulList").appendChild(li);
+    }
+    document.querySelector('#input').value = "";
+    // var span = document.createElement("SPAN");
+    // var txt = document.createTextNode("x");
+    // span.className = "close";
+    // span.appendChild(txt);
+    // li.appendChild(span);
+    li.innerHTML += "<button onclick='deleteItem(this);'>Delete</button>";
+}
+function deleteItem(currentElement){
+    currentElement.parentNode.parentNode.removeChild(currentElement.parentNode);
+}
+// let closeBtn = document.querySelector(".close");
+
+
+// closeBtn.addEventListener('click', function () {
+//     removeItem();
+// });
+// function removeItem(){
+    
+// };
+
+// for (i = 0; i < close.length; i++) {    
+//     close[i].onclick = function () {
+//         var div = this.parentElement;
+//         div.style.display = "none";
+//     }
+// }
@@ -0,0 +1,23 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    
+    <title>Shopping List</title>
+</head>
+<body>
+    <form action="">
+        <label for="">Enter a new Item </label>
+        <input type="text" id="input" placeholder="Add Items...">
+        <button type="button" id="button">Add Item</button>
+    </form>
+    <ul id="ulList">
+        <li>asd</li>
+
+    </ul>
+    <script src="app.js" defer></script>    
+</body>
+</html>
@@ -0,0 +1,15 @@
+body{
+    text-align: center;
+    margin-top: 200px;
+}
+
+/* Style the close button */
+.close {
+  
+    padding: 12px 16px 12px 16px;
+  }
+  
+  .close:hover {
+    background-color: #f44336;
+    color: white;
+  }