Debug

Author: Luckson-dev

TodoList/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./asserts/font/bootstrap-icons.css">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="./style.css">
     <script src="script.js" defer></script>
     <title>TodoList</title>
 </head>
@@ -22,7 +22,43 @@ <h1 class="nav-bar__t">TodoList</h1>
             <div class="content">
 
                 <!-- item -->
-                
+                <!-- 
+                <div class="content__item item" data-id="${item.id}">
+                    <div class="item__image">
+                        <img src="./asserts/images/blue.webp" alt="Item Image">
+                    </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>
+                <div class="content__item item" data-id="${item.id}">
+                    <div class="item__image">
+                        <img src="./asserts/images/blue.webp" alt="Item Image">
+                    </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> -->
+
+
                 <!-- End item -->
 
             </div>
@@ -46,9 +82,6 @@ <h1>Add card</h1>
                         </label>
                     </div>
                     <div class="modal__form__inputs">
-                        <div>
-                            <input type="text" placeholder="">
-                        </div>
                         <div>
                             <input type="text" id="title" placeholder="title">
                         </div>

TodoList/script.js

@@ -37,6 +37,8 @@ function formValid(img, title, description){
     return true;
 }
 
+// Script to load file
+
 function loadFile(event){
     const file = event.target.files[0];
 
@@ -54,6 +56,8 @@ function loadFile(event){
 
 document.getElementById("imageInput").addEventListener('change', loadFile);
 
+// Script to verify form and add item
+
 modalBtn.addEventListener('click', (e)=>{
     e.preventDefault();
 
@@ -98,6 +102,8 @@ modalBtn.addEventListener('click', (e)=>{
     reader.readAsDataURL(imgInput);
 })
 
+// Function to insert data in the content element
+
 function addItem(id, imgFile, title, description){
 
     const content = document.querySelector('.content');
@@ -107,7 +113,6 @@ function addItem(id, imgFile, title, description){
             <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>
                 </div>
                 <div class="item__infos">
                     <h1>${title}</h1>
@@ -126,29 +131,28 @@ function addItem(id, 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();
+// Script to remove item
 
-            let storageData = JSON.parse(localStorage.getItem("content")) || [];
-            const itemId = item.dataset.id;
+document.querySelector(".content").addEventListener("click", (e)=>{
 
-            const index = storageData.findIndex(item => item.id === itemId);
-            console.log(index)
+    if(e.target.classList.contains("bi-trash")){
+        const item = e.target.closest(".item");
+        item.remove();
 
-            if(index !== -1){
-                storageData.splice(index, 1);
-                localStorage.setItem("content", JSON.stringify(storageData));
-            }
-            
+        let storageData = JSON.parse(localStorage.getItem("content")) || [];
+        const itemId = Number(item.dataset.id);
+
+        const index = storageData.findIndex(item => item.id === itemId);
+
+        if(index !== -1){
+            storageData.splice(index, 1);
+            localStorage.setItem("content", JSON.stringify(storageData));
         }
-    })
-}
-removeItem()
+        
+    }
+})
 
+// Script to take all data in localStorage after reload page
 
 window.onload = ()=>{
     itemData = JSON.parse(localStorage.getItem("content"));
@@ -165,7 +169,6 @@ window.onload = ()=>{
                 <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>

TodoList/style.css

@@ -29,6 +29,7 @@
 
 h1{
     color: var(--bs-black);
+    word-wrap: break-word;
 }
 .btn{
     text-wrap: nowrap;
@@ -87,18 +88,19 @@ header{
 
 .content{
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 15px;
-    justify-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px 10px;
+    justify-content: center;
+    
 }
 .content__item{
     border-radius: 3px;
     background: var(--bs-white);
-    
 }
+
 .item__image{
     position: relative;
-    
+    height: 200px;
 }
 .item__image img{
     width: 100%;
@@ -111,19 +113,18 @@ header{
 .item__image img:hover{
     transform: scale(1.05)
 }
-.item__image p{
-    position: absolute;
-    bottom: 1.2em;
-    left: 0.5em;
-    color: var(--bs-gray-300);
-}
 .item__infos{
     padding: 10px 7px;
 }
+.item__infos h1{
+    font-size: clamp(17px, 5vw, 20px);
+}
 .item__infos p{
     margin: 17px 0;
     line-height: 23px;
+    font-size: clamp(12px, 5vw, 15px);
     color: var(--bs-black-300);
+    word-wrap: break-word;
 }
 .item__infos__btns{
     display: flex;