Remove item

Author: Luckson-dev

TodoList/script.js

@@ -60,27 +60,44 @@ modalBtn.addEventListener('click', (e)=>{
     const imgInput = document.getElementById('imageInput').files[0];
     const imgFile = URL.createObjectURL(imgInput);
 
-    const title = document.getElementById("title").value.split();
+    const title = document.getElementById("title").value.trim();
     const description = document.getElementById("description").value.trim();
 
     if(formValid(imgFile, title, description)){
-        addItem(imgFile, title, description);
+        const id = Date.now();
+
+        addItem(id, imgFile, title, description);
+
+        let storageData = JSON.parse(localStorage.getItem("content"))
+        if(!storageData) {
+            storageData = []
+        }
+
+        let itemData = { id , imgFile, title, description }
+
+        storageData.push(itemData)
+
+        localStorage.setItem("content", JSON.stringify(storageData));
+
+        document.getElementById("imageInput").value = "";
+        document.getElementById("image-preview").src = "";
         document.querySelector('.modal__form').reset();
 
         if(modalContainer.classList.contains("show-modal")){
             modalContainer.classList.remove('show-modal');
             modalContainer.classList.add('hide');
         }  
+        
     }
 })
 
-function addItem(imgFile, title, description){
+function addItem(id, imgFile, title, description){
 
-    const content = document.querySelector('.content')
+    const content = document.querySelector('.content');
 
     content.innerHTML +=
         `
-            <div class="content__item">
+            <div class="content__item item" data-id="${id}">
                 <div class="item__image">
                     <img src="${imgFile}" alt="Card Image">
                     <p>Lorem ipsum dolor site amet</p>
@@ -101,3 +118,62 @@ function addItem(imgFile, title, description){
 
         `
 }
+
+function removeItem(){
+    document.querySelector(".content").addEventListener("click", (e)=>{
+        console.log(e.target);
+        if(e.target.classList.contains("bi-trash")){
+            const item = e.target.closest(".item");
+            item.remove();
+
+            let storageData = JSON.parse(localStorage.getItem("content")) || [];
+            const itemId = item.dataset.id;
+
+            const index = localStorage.findIndex(item => item.id === itemId);
+            console.log(index)
+
+            if(index !== -1){
+                storageData.splice(index, 1);
+                localStorage.setItem("content", JSON.stringify(storageData));
+            }
+            
+        }
+    })
+}
+removeItem()
+
+
+window.onload = ()=>{
+    itemData = JSON.parse(localStorage.getItem("content"));
+    if(!itemData){
+        itemData = [];
+    }
+
+    const content = document.querySelector(".content");
+
+    itemData.forEach(item =>{
+
+        content.innerHTML +=
+            `
+                <div class="content__item item" data-id="${item.id}">
+                    <div class="item__image">
+                        <img src="${item.imgFile}" alt="Item Image">
+                        <p>Lorem ipsum dolor site amet</p>
+                    </div>
+                    <div class="item__infos">
+                        <h1>${item.title}</h1>
+                        <p>${item.description}</p>
+                        <div class="item__infos__btns">
+                            <button class="btn">Details</button>
+                            <div class="item__infos__icons">
+                                <i class="bi bi-pen"></i>
+                                <i class="bi bi-trash"></i>
+                                <div class="alert-content"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            `
+    })
+}

TodoList/style.css

@@ -87,7 +87,7 @@ header{
 
 .content{
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
     gap: 15px;
     justify-items: center;
 }
@@ -98,7 +98,7 @@ header{
 }
 .item__image{
     position: relative;
-    height: 100px;
+    
 }
 .item__image img{
     width: 100%;