diff --git a/10_ToDo_app/10_4_LoadElement/10_3_Delet_item/25_10_5_delet_item.js b/10_ToDo_app/10_4_LoadElement/25_10_5_delet_item.js similarity index 100% rename from 10_ToDo_app/10_4_LoadElement/10_3_Delet_item/25_10_5_delet_item.js rename to 10_ToDo_app/10_4_LoadElement/25_10_5_delet_item.js diff --git a/10_ToDo_app/10_4_LoadElement/10_3_Delet_item/index.html b/10_ToDo_app/10_4_LoadElement/index.html similarity index 100% rename from 10_ToDo_app/10_4_LoadElement/10_3_Delet_item/index.html rename to 10_ToDo_app/10_4_LoadElement/index.html diff --git a/10_ToDo_app/10_4_LoadElement/10_3_Delet_item/style.css b/10_ToDo_app/10_4_LoadElement/style.css similarity index 100% rename from 10_ToDo_app/10_4_LoadElement/10_3_Delet_item/style.css rename to 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 new file mode 100644 index 0000000..d567207 --- /dev/null +++ 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=`` + + 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)) +} \ No newline at end of file diff --git a/10_ToDo_app/10_5_LocalStorage_using/index.html b/10_ToDo_app/10_5_LocalStorage_using/index.html new file mode 100644 index 0000000..c448780 --- /dev/null +++ b/10_ToDo_app/10_5_LocalStorage_using/index.html @@ -0,0 +1,44 @@ + + + + Title + + + + + + + + + + + +
+

ToDo App

+
+
Add New Task
+
+
+ + +
+
+
+
+
+

Task List

+ +
+ + +
+
+ + + + + + + \ No newline at end of file diff --git a/10_ToDo_app/10_5_LocalStorage_using/style.css b/10_ToDo_app/10_5_LocalStorage_using/style.css new file mode 100644 index 0000000..1028449 --- /dev/null +++ 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; +} \ No newline at end of file