Card update

Author: Luckson-dev

TodoList/index.html

@@ -22,27 +22,7 @@ <h1 class="nav-bar__t">TodoList</h1>
             <div class="content">
 
                 <!-- item -->
-                <div class="content__item">
-                    <div class="item__image">
-                        <img src="./asserts/images/blue.webp" alt="Card Image">
-                        <p>Lorem ipsum dolor site amet</p>
-                    </div>
-                    <div class="item__infos">
-                        <h1>Lorem ipsum dolor sit amet consectetur</h1>
-                        <p>
-                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
-                            Quia aspernatur beatae at tempora. Consequuntur, quo assumenda.
-                        </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>

TodoList/script.js

@@ -57,13 +57,47 @@ document.getElementById("imageInput").addEventListener('change', loadFile);
 modalBtn.addEventListener('click', (e)=>{
     e.preventDefault();
 
-    const imgInput = document.getElementById('imageInput');
-    const imgFile = imgInput.files[0];
-    console.log(imgFile)
+    const imgInput = document.getElementById('imageInput').files[0];
+    const imgFile = URL.createObjectURL(imgInput);
+
     const title = document.getElementById("title").value.split();
     const description = document.getElementById("description").value.trim();
 
     if(formValid(imgFile, title, description)){
-        
+        addItem(imgFile, title, description);
+        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){
+
+    const content = document.querySelector('.content')
+
+    content.innerHTML +=
+        `
+            <div class="content__item">
+                <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>
+                    <p>${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

@@ -94,9 +94,11 @@ header{
 .content__item{
     border-radius: 3px;
     background: var(--bs-white);
+    
 }
 .item__image{
     position: relative;
+    height: 100px;
 }
 .item__image img{
     width: 100%;