JavaScript > To Do List > Using Local Storage > add

DrMadWill · Nov 16, 2021 · 3d7b06e · 3d7b06e
1 parent 3a0568f
commit 3d7b06e
Show file tree

Hide file tree

Showing 6 changed files with 179 additions and 0 deletions.
diff --git a/...ent/10_3_Delet_item/25_10_5_delet_item.js → ...pp/10_4_LoadElement/25_10_5_delet_item.js b/...ent/10_3_Delet_item/25_10_5_delet_item.js → ...pp/10_4_LoadElement/25_10_5_delet_item.js
diff --git a/..._4_LoadElement/10_3_Delet_item/index.html → 10_ToDo_app/10_4_LoadElement/index.html b/..._4_LoadElement/10_3_Delet_item/index.html → 10_ToDo_app/10_4_LoadElement/index.html
diff --git a/...0_4_LoadElement/10_3_Delet_item/style.css → 10_ToDo_app/10_4_LoadElement/style.css b/...0_4_LoadElement/10_3_Delet_item/style.css → 10_ToDo_app/10_4_LoadElement/style.css
diff --git a/10_ToDo_app/10_5_LocalStorage_using/26_10_6_Local_Storage_Using.js b/10_ToDo_app/10_5_LocalStorage_using/26_10_6_Local_Storage_Using.js
@@ -0,0 +1,124 @@
+// Add Element
+
+const form = document.querySelector('#addTaskList');
+const input = document.querySelector("#text_go");
+const deleteAll = document.querySelector("#btnDeletAll")
+const list = document.querySelector("#list");
+let data;
+
+loadItem()
+
+addEventListener()
+
+function addEventListener(){
+
+    form.addEventListener('submit',addList)
+    list.addEventListener('click',deleteItem)
+    deleteAll.addEventListener('click',deleteallitem)
+
+
+}
+
+//* Create Element
+function createItem(text){
+    // create li
+    const li = document.createElement('li');;
+    li.className="list-group-item d-flex justify-content-between list-group-item-secondary"
+    li.appendChild(document.createTextNode(text)) 
+
+    // create a
+    const a = document.createElement('a');
+    a.className="btn btn-outline-danger delete-item";
+    a.innerHTML=`<i class="fas fa-times"></i>`
+
+    li.appendChild(a);
+    list.appendChild(li)
+    input.value=''
+}
+
+//* Load Items
+function loadItem(){
+    data = getItemLCS()
+    data.forEach(e=>{
+        createItem(e)
+    })
+}
+
+//* Add Element
+function addList(w){
+
+    if(input.value.trim() == ""){
+        alert("Please add new item")
+    }else{
+        let text = input.value
+
+        //create element
+        createItem(text)
+
+        // seve to LCS
+        setItemLCS(text)
+    }
+    w.preventDefault();
+}
+
+//* Delete Item
+function deleteItem(w){
+
+    if (w.target.className == "fas fa-times"){
+        if (confirm("Are you sure ?")){
+            w.target.parentElement.parentElement.remove();
+            removeLCS(w.target.parentElement.parentElement.textContent)
+        }
+
+    }else if(w.target.className=="btn btn-outline-danger delete-item"){
+        if (confirm("Are you sure ?")){
+            w.target.parentElement.remove();
+            removeLCS(w.target.parentElement.textContent)
+        }
+    }
+
+    w.preventDefault();
+}
+
+//* DeleteAll
+function deleteallitem(w){
+
+    if (confirm("Are you sure ?")){
+        list.innerHTML=""
+        localStorage.clear();
+    }
+
+
+    w.preventDefault();
+
+}
+
+
+//* Local Storage (LCS)
+function getItemLCS(){
+    data = [];
+    if(localStorage.getItem("items") != null){
+        data = JSON.parse(localStorage.getItem("items"))
+    }
+    return data;
+}
+
+//* Set Item LCS
+function setItemLCS(text){
+    data = getItemLCS();
+    data.push(text)
+    localStorage.setItem("items",JSON.stringify(data))
+}
+
+//* Remove LCS
+function removeLCS(text){
+    data = getItemLCS()
+
+    data.forEach(function(item,index){
+        if (item == text){
+            data.splice(index,1)
+        }
+    })
+
+    localStorage.setItem("items",JSON.stringify(data))
+}
diff --git a/10_ToDo_app/10_5_LocalStorage_using/index.html b/10_ToDo_app/10_5_LocalStorage_using/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Title</title>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS v5.0.2 -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+
+    <div class="container p-4">
+        <h1 class="app-title" id="title_header" >ToDo App</h1>
+        <div class="card">
+          <div class="card-header">Add New Task</div>
+          <div class="card-body">
+            <form id="addTaskList" class="form-group d-flex p-4">
+                <input id="text_go" placeholder="Please add list item" type="text" class="form-control">
+                <button type="submit" class="btn btn-primary ">Add</button>
+            </form>
+          </div>
+        </div>
+        <div class="card mt-4">
+            <div class="card-header d-flex justify-content-between ">
+                <h4>Task List</h4>
+                <button class="btn btn-outline-danger btn-sm" id="btnDeletAll">Delete All</button>
+            </div>
+            <ul id="list" class="list-group">
+
+            </ul>
+
+        </div>
+    </div>
+
+    <!-- Bootstrap JavaScript Libraries -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+    <script src="26_10_6_Local_Storage_Using.js"></script>
+  </body>
+</html>
diff --git a/10_ToDo_app/10_5_LocalStorage_using/style.css b/10_ToDo_app/10_5_LocalStorage_using/style.css
@@ -0,0 +1,11 @@
+ form input{
+    width:80%;
+    border-top-right-radius: 0!important;
+    border-bottom-right-radius: 0!important;
+}
+
+
+form button{
+    border-top-left-radius: 0!important;
+    border-bottom-left-radius: 0!important;
+}