diff --git a/index.html b/index.html
index 5656002..c54e2a5 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
         <div class="container-h1-input">
         <h1 class="page-titulo__tourist" data-test="title-form">Adicionar um Ponto Turístico</h1>
 
-        <form action="">
+        <form class="form__tourist-attractions">
             <div class="container-input">
                 
                 <div class="wrapper-input__img">
@@ -27,8 +27,8 @@
                 </div>
 
                 <div class="wrapper-input__text">
-                    <input class="input-text__titulo" type="text" placeholder="Titulo" data-test="input-titulo">
-                    <input class="input-text__descricao" type="text" placeholder="Descrição" data-test="input-descrição">
+                    <input name="input-title" class="input-text__titulo" type="text" placeholder="Titulo" data-test="input-titulo">
+                    <input name="input-description" class="input-text__descricao" type="text" placeholder="Descrição" data-test="input-descrição">
                     
                     <div class="wrapper-button-submit">
                         <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
@@ -44,6 +44,17 @@
 
         </div>
 
+        <div class="container-cards">
+
+            <div class="container-cards__wrapper">
+
+                <ul class="wrapper-ul__cards"></ul>
+                
+            </div>
+
+
+        </div>
+
     </main>
 
     <script src="js.js"></script>
diff --git a/js.js b/js.js
index 951c8a5..e3c6ac0 100644
--- a/js.js
+++ b/js.js
@@ -1,12 +1,19 @@
 document.addEventListener('DOMContentLoaded', function () {
 
+    const list = [];
+
     const inputFile = document.querySelector('#input__img');
     const labelInput = document.querySelector('.label-input');
-
     const textLabelInput = "Imagem";
+    labelInput.innerText = textLabelInput;
 
-    labelInput.innerHTML = textLabelInput;
+    const inputTitle = document.querySelector('.input-text__titulo');
+    const inputDescription = document.querySelector('.input-text__descricao');
+    const form = document.querySelector('.form__tourist-attractions');  
+    
+    const ulList = document.querySelector('wrapper-ul__cards');
 
+    //Image Preview
     inputFile.addEventListener('change', (e) => {
         const inputTarget = e.target;
         const file = inputTarget.files[0];
@@ -27,14 +34,78 @@ document.addEventListener('DOMContentLoaded', function () {
             });
 
             reader.readAsDataURL(file);
-            labelInput.innerHTML = "";
+            
+            labelInput.innerText = "";
             labelInput.style.border = "none";
             
 
         }else {
-            labelInput.innerHTML = textLabelInput;
+            labelInput.innerText = textLabelInput;
+            labelInput.style.border = "";
         }
         
     });
 
+    //----------------------------------------------------------
+
+
+
+
+
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+
+        const spotImg = labelInput.querySelector('.img-result');
+        const spotTitle = e.target['input-title'].value
+        const spotDescription = e.target['input-description'].value
+
+
+        if (spotImg != '' && spotTitle != '' && spotDescription != '') {
+            
+            const spot = {
+                image: spotImg.src,
+                titulo: spotTitle,
+                description: spotDescription,
+            };
+    
+            list.push(spot);
+
+            renderListItems();
+            
+        }else {
+            alert('Preencha todos os campos')
+        }
+})
+
+
+    const renderListItems = () => {
+        let spotStructure = '';
+
+        list.forEach((i) => {
+            spotStructure += `
+                <li class="wrapper-cards__li">
+
+                    <div class="cards"> 
+                        <img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
+                    </div>
+
+                    <div class="result-card__text">
+                        <h2 class="result-card__title">${i.titulo}</h2>
+                        p class="result-card__description">${i.description}</p>
+                    </div>
+
+                </li>
+            `;
+        });
+
+        
+
+        // ulList.innerHTML = spotStructure;
+
+        
+
+    };
+
+
+
     });