14 - grocer bud id added

Author: john-smilga

14-todo/final/app.js

@@ -11,6 +11,7 @@ const clearBtn = document.querySelector(".clear-btn");
 let editElement;
 let editFlag = false;
 let editValue = "";
+let editID = "";
 // ****** event listeners **********
 
 // submit form
@@ -26,8 +27,13 @@ window.addEventListener("DOMContentLoaded", setupItems);
 function addItem(e) {
   e.preventDefault();
   const value = grocery.value;
+  const id = new Date().getTime().toString();
+
   if (value !== "" && !editFlag) {
     const element = document.createElement("article");
+    let attr = document.createAttribute("data-id");
+    attr.value = id;
+    element.setAttributeNode(attr);
     element.classList.add("grocery-item");
     element.innerHTML = `<p class="title">${value}</p>
             <div class="btn-container">
@@ -56,13 +62,13 @@ function addItem(e) {
     // show container
     container.classList.add("show-container");
     // set local storage
-    addToLocalStorage(value);
+    addToLocalStorage(id, value);
   } else if (value !== "" && editFlag) {
     editElement.innerHTML = value;
     displayAlert("value changed", "success");
 
     // edit  local storage
-    editLocalStorage(editValue, value);
+    editLocalStorage(editID, value);
     setBackToDefault();
   } else {
     displayAlert("please enter value", "danger");
@@ -97,24 +103,29 @@ function clearItems() {
 
 function deleteItem(e) {
   const element = e.currentTarget.parentElement.parentElement;
+  const id = element.dataset.id;
+
   list.removeChild(element);
-  if (!list.hasChildNodes()) {
+
+  if (list.children.length === 0) {
     container.classList.remove("show-container");
   }
   displayAlert("item removed", "danger");
 
   setBackToDefault();
   // remove from local storage
-  removeFromLocalStorage(element.firstElementChild.textContent);
+  removeFromLocalStorage(id);
 }
 // edit item
 function editItem(e) {
+  const element = e.currentTarget.parentElement.parentElement;
   // set edit item
   editElement = e.currentTarget.parentElement.previousElementSibling;
   // set form value
   grocery.value = editElement.innerHTML;
   editFlag = true;
   editValue = editElement.innerHTML;
+  editID = element.dataset.id;
   //
   submitBtn.textContent = "edit";
 }
@@ -123,13 +134,15 @@ function setBackToDefault() {
   grocery.value = "";
   editFlag = false;
   editValue = "";
+  editID = "";
   submitBtn.textContent = "submit";
 }
 
 // ****** local storage **********
 
 // add to local storage
-function addToLocalStorage(grocery) {
+function addToLocalStorage(id, value) {
+  const grocery = { id, value };
   let items = getLocalStorage();
   items.push(grocery);
   localStorage.setItem("list", JSON.stringify(items));
@@ -141,19 +154,23 @@ function getLocalStorage() {
     : [];
 }
 
-function removeFromLocalStorage(grocery) {
+function removeFromLocalStorage(id) {
   let items = getLocalStorage();
+
   items = items.filter(function (item) {
-    return item !== grocery;
+    if (item.id !== id) {
+      return item;
+    }
   });
+
   localStorage.setItem("list", JSON.stringify(items));
 }
-function editLocalStorage(oldValue, newValue) {
+function editLocalStorage(id, value) {
   let items = getLocalStorage();
 
   items = items.map(function (item) {
-    if (item === oldValue) {
-      item = newValue;
+    if (item.id === id) {
+      item.value = value;
     }
     return item;
   });
@@ -166,16 +183,20 @@ function editLocalStorage(oldValue, newValue) {
 
 function setupItems() {
   let items = getLocalStorage();
+
   if (items.length > 0) {
     items.forEach(function (item) {
-      createListItem(item);
+      createListItem(item.id, item.value);
     });
     container.classList.add("show-container");
   }
 }
 
-function createListItem(value) {
+function createListItem(id, value) {
   const element = document.createElement("article");
+  let attr = document.createAttribute("data-id");
+  attr.value = id;
+  element.setAttributeNode(attr);
   element.classList.add("grocery-item");
   element.innerHTML = `<p class="title">${value}</p>
             <div class="btn-container">