@@ -15,14 +15,47 @@ let editID = "";
 // ****** EVENT LISTENERS **********
 // submit form
 form.addEventListener("submit", addItem);
+// clear items
+clearBtn.addEventListener("click", clearItems);
 
 // ****** FUNCTIONS **********
 function addItem(e) {
   e.preventDefault();
   const value = grocery.value;
   const id = new Date().getTime().toString();
+
   if (value && !editFlag) {
-    console.log("add item to the list");
+    const element = document.createElement("article");
+    // add class
+    element.classList.add("grocery-item");
+    // add id
+    const attr = document.createAttribute("data-id");
+    attr.value = id;
+    element.setAttributeNode(attr);
+    element.innerHTML = `<p class="title">${value}</p>
+            <div class="btn-container">
+              <button type="button" class="edit-btn">
+                <i class="fas fa-edit"></i>
+              </button>
+              <button type="button" class="delete-btn">
+                <i class="fas fa-trash"></i>
+              </button>
+            </div>`;
+
+    const deleteBtn = element.querySelector(".delete-btn");
+    const editBtn = element.querySelector(".edit-btn");
+    deleteBtn.addEventListener("click", deleteItem);
+    editBtn.addEventListener("click", editItem);
+    // append child
+    list.appendChild(element);
+    // display alert
+    displayAlert("item added to the list", "success");
+    // show container
+    container.classList.add("show-container");
+    // add to local storage
+    addToLocalStorage(id, value);
+    // set back to default
+    setBackToDefault();
   } else if (value && editFlag) {
     console.log("editing");
   } else {
@@ -42,6 +75,71 @@ function displayAlert(text, action) {
   }, 1000);
 }
 
+// clear items
+function clearItems() {
+  const items = document.querySelectorAll(".grocery-item");
+
+  if (items.length > 0) {
+    items.forEach(function (item) {
+      list.removeChild(item);
+    });
+  }
+  container.classList.remove("show-container");
+  displayAlert("emptied list", "danger");
+  // localStorage.removeItem('list');
+}
+
+// delete function
+function deleteItem(e) {
+  const element = e.currentTarget.parentElement.parentElement;
+  const id = element.dataset.id;
+  list.removeChild(element);
+
+  if (list.children.length === 0) {
+    container.classList.remove("show-container");
+  }
+  displayAlert("item removed", "danger");
+  setBackToDefault();
+  // remove from local storage
+  // removeFromLocalStorage(id);
+}
+
+// edit function
+function editItem(e) {
+  const element = e.currentTarget.parentElement.parentElement;
+
+  // set edit items
+  editElement = e.currentTarget.parentElement.previousElementSibling;
+  // set form value
+  grocery.value = editElement.innerHTML;
+  let editFlag = true;
+  let editID = element.dataset.id;
+  submitBtn.textContent = "edit";
+}
+
+// set back to default
+function setBackToDefault() {
+  console.log("set back to default");
+  grocery.value = "";
+  editFlag = false;
+  editID = "";
+  submitBtn.textContent = "submit";
+}
+
 // ****** LOCAL STORAGE **********
+function addToLocalStorage(id, value) {
+  //Check to if there is an existing todo list
+  /* let todoList;
+  if (!localStorage.getItem("todo-list")) {
+    todoList = [];
+  } else {
+    todoList = JSON.parse(localStorage.getItem("todo-list"));
+  }
+
+  todoList.push(todo);
+  localStorage.setItem("todo-list", JSON.stringify(todoList)); */
+}
+
+function removeFromLocalStorage(id) {}
 
 // ****** SETUP ITEMS **********
@@ -25,19 +25,7 @@ <h3>grocery bud</h3>
       </form>
       <!-- list -->
       <div class="grocery-container">
-        <div class="grocery-list">
-          <article class="grocery-item">
-            <p class="title">item</p>
-            <div class="btn-container">
-              <button type="button" class="edit-btn">
-                <i class="fas fa-edit"></i>
-              </button>
-              <button type="button" class="delete-btn">
-                <i class="fas fa-trash"></i>
-              </button>
-            </div>
-          </article>
-        </div>
+        <div class="grocery-list"></div>
         <!-- button -->
         <button type="button" class="clear-btn">clear items</button>
       </div>