14-todo complete

Author: john-smilga

14-todo/final/app.js

@@ -1,4 +1,5 @@
-// select items
+// ****** select items **********
+
 const form = document.querySelector(".grocery-form");
 const alert = document.querySelector(".alert");
 const grocery = document.getElementById("grocery");
@@ -9,16 +10,23 @@ const clearBtn = document.querySelector(".clear-btn");
 // edit option
 let editElement;
 let editFlag = false;
+
+// ****** event listeners **********
+
 // submit form
 form.addEventListener("submit", addItem);
 // clear list
 clearBtn.addEventListener("click", clearItems);
+// display items onload
+window.addEventListener("DOMContentLoaded", setupItems);
+
+// ****** functions **********
 
 // add item
 function addItem(e) {
   e.preventDefault();
   const value = grocery.value;
-  if (value !== "" && editFlag === false) {
+  if (value !== "" && !editFlag) {
     const element = document.createElement("article");
     element.classList.add("grocery-item");
     element.innerHTML = `<p class="title">${value}</p>
@@ -48,11 +56,13 @@ function addItem(e) {
     // show container
     container.classList.add("show-container");
     // set local storage
-    setLocalStorage();
+    addToLocalStorage(value);
   } else if (value !== "" && editFlag) {
     editElement.innerHTML = value;
     displayAlert("value changed", "success");
     setBackToDefault();
+    // add to local storage
+    addToLocalStorage(value);
   } else {
     displayAlert("please enter value", "danger");
   }
@@ -79,6 +89,7 @@ function clearItems() {
   container.classList.remove("show-container");
   displayAlert("empty list", "danger");
   setBackToDefault();
+  localStorage.removeItem("list");
 }
 
 // delete item
@@ -92,6 +103,8 @@ function deleteItem(e) {
   displayAlert("item removed", "danger");
 
   setBackToDefault();
+  // remove from local storage
+  removeFromLocalStorage(element.firstElementChild.textContent);
 }
 // edit item
 function editItem(e) {
@@ -102,15 +115,74 @@ function editItem(e) {
   editFlag = true;
   //
   submitBtn.textContent = "edit";
+  // remove from local storage
+  removeFromLocalStorage(editElement.innerHTML);
 }
-// set backt to default
+// set backt to defaults
 function setBackToDefault() {
   grocery.value = "";
   editFlag = false;
   submitBtn.textContent = "submit";
 }
 
-function setLocalStorage() {
-  const items = document.querySelectorAll(".grocery-item");
+// ****** local storage **********
+
+// add to local storage
+function addToLocalStorage(grocery) {
+  let items = getLocalStorage();
+  items.push(grocery);
   localStorage.setItem("list", JSON.stringify(items));
 }
+
+function getLocalStorage() {
+  return localStorage.getItem("list")
+    ? JSON.parse(localStorage.getItem("list"))
+    : [];
+}
+
+function removeFromLocalStorage(grocery) {
+  let items = getLocalStorage();
+  items = items.filter(function (item) {
+    return item !== grocery;
+  });
+  localStorage.setItem("list", JSON.stringify(items));
+}
+
+// SETUP LOCALSTORAGE.REMOVEITEM('LIST');
+
+// ****** setup items **********
+
+function setupItems() {
+  let items = getLocalStorage();
+  if (items.length > 0) {
+    items.forEach(function (item) {
+      createListItem(item);
+    });
+    container.classList.add("show-container");
+  }
+}
+
+function createListItem(value) {
+  const element = document.createElement("article");
+  element.classList.add("grocery-item");
+  element.innerHTML = `<p class="title">${value}</p>
+            <div class="btn-container">
+              <!-- edit btn -->
+              <button type="button" class="edit-btn">
+                <i class="fas fa-edit"></i>
+              </button>
+              <!-- delete btn -->
+              <button type="button" class="delete-btn">
+                <i class="fas fa-trash"></i>
+              </button>
+            </div>
+          `;
+  // add event listeners to both buttons;
+  const deleteBtn = element.querySelector(".delete-btn");
+  deleteBtn.addEventListener("click", deleteItem);
+  const editBtn = element.querySelector(".edit-btn");
+  editBtn.addEventListener("click", editItem);
+
+  // append child
+  list.appendChild(element);
+}

14-todo/final/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Grocery List</title>
+    <title>Grocery Bud</title>
     <!-- font awesome -->
     <link
       rel="stylesheet"
@@ -25,26 +25,23 @@ <h3>grocery bud</h3>
       </form>
       <!-- list -->
       <div class="grocery-container">
-        <div class="grocery-list"></div>
+        <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>
         <button class="clear-btn">clear items</button>
       </div>
     </section>
     <!-- javascript -->
     <script src="app.js"></script>
   </body>
 </html>
-<!-- single item -->
-<!-- <article class="grocery-item">
-  <p class="title">item</p>
-  <div class="btn-container"> -->
-<!-- edit btn -->
-<!-- <button type="button" class="edit-btn">
-      <i class="fas fa-edit"></i>
-    </button> -->
-<!-- delete btn -->
-<!-- <button type="button" class="delete-btn">
-      <i class="fas fa-trash"></i>
-    </button>
-  </div>
-</article> -->
-<!-- end of single item -->

14-todo/final/styles.css

@@ -163,7 +163,7 @@ p {
 .section-center {
   width: 90vw;
   margin: 0 auto;
-  max-width: 40rem;
+  max-width: 35rem;
   margin-top: 8rem;
 }
 @media screen and (min-width: 992px) {
@@ -191,6 +191,25 @@ Grocery List
 .section-center:hover {
   box-shadow: var(--dark-shadow);
 }
+.alert {
+  margin-bottom: 1rem;
+  height: 1.25rem;
+  display: grid;
+  align-items: center;
+  text-align: center;
+  font-size: 0.7rem;
+  border-radius: 0.25rem;
+  letter-spacing: var(--spacing);
+  text-transform: capitalize;
+}
+.alert-danger {
+  color: #721c24;
+  background: #f8d7da;
+}
+.alert-success {
+  color: #155724;
+  background: #d4edda;
+}
 .grocery-form h3 {
   color: var(--clr-primary-1);
   margin-bottom: 1.5rem;
@@ -229,31 +248,13 @@ Grocery List
   cursor: pointer;
   content: var(--clr-primary-5);
   transition: var(--transition);
-  font-size: 1rem;
+  font-size: 0.85rem;
 }
 .submit-btn:hover {
   background: var(--clr-primary-5);
   color: var(--clr-white);
 }
-.alert {
-  margin-bottom: 1rem;
-  height: 1.25rem;
-  display: grid;
-  align-items: center;
-  text-align: center;
-  font-size: 0.7rem;
-  border-radius: 0.25rem;
-  letter-spacing: var(--spacing);
-  text-transform: capitalize;
-}
-.alert-danger {
-  color: #721c24;
-  background: #f8d7da;
-}
-.alert-success {
-  color: #155724;
-  background: #d4edda;
-}
+
 .grocery-container {
   margin-top: 2rem;
   transition: var(--transition);

14-todo/setup/app.js

@@ -0,0 +1,11 @@
+// ****** SELECT ITEMS **********
+
+// edit option
+
+// ****** EVENT LISTENERS **********
+
+// ****** FUNCTIONS **********
+
+// ****** LOCAL STORAGE **********
+
+// ****** SETUP ITEMS **********

14-todo/setup/fontawesome-free-5.12.0-web/LICENSE.txt

@@ -0,0 +1,34 @@
+Font Awesome Free License
+-------------------------
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
+packaged as SVG and JS file types.
+
+# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+# Attribution
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+# Brand Icons
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**