index.html

@@ -14,29 +14,33 @@
         <div class="container-h1-input">
         <h1 class="page-titulo__tourist" data-test="title-form">Adicionar um Ponto Turístico</h1>
 
-        <div class="container-input">
+        <form action="">
+            <div class="container-input">
+                
+                <div class="wrapper-input__img">
+                    <label class="label-input" for="input__img">
+                        <!-- <span class="span__img">
+                        </span> -->
+                    </label>
 
-            <div class="wrapper-input__img">
-                <label>
                     <input id="input__img" type="file" data-test="input-image">
-                    <span class="span__img">Imagem</span>
-                </label>
-            </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">
-                
-                <div class="wrapper-button-submit">
-                    <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
                 </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">
+                    
+                    <div class="wrapper-button-submit">
+                        <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
+                    </div>
+                    
+                </div>
+                
+            
             </div>
+        </form>
 
-        
+            <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
-        </div>
-
-        <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
 
         </div>
 

js.js

@@ -1,6 +1,37 @@
 document.addEventListener('DOMContentLoaded', function () {
 
+    const inputFile = document.querySelector('#input__img');
+    const labelInput = document.querySelector('.label-input');
 
+    const textSpanInput = "Imagem";
 
+    labelInput.innerHTML = textSpanInput;
+
+    inputFile.addEventListener('change', (e) => {
+        const inputTarget = e.target;
+        const file = inputTarget.files[0];
+
+        if (file) {
+
+            const reader = new FileReader();
+
+            reader.addEventListener('load', (e) => {
+                const readerTarget = e.target;
+
+                const img = document.createElement('img');
+                img.src = readerTarget.result;
+                img.classList.add('img-result');
+
+                labelInput.appendChild(img);
+
+            });
+            reader.readAsDataURL(file);
+            labelInput.innerHTML = "";
+
+        }else {
+            labelInput.innerHTML = textSpanInput;
+        }
+        
+    });
 
     });

style.css

@@ -25,15 +25,6 @@
   margin: 40px 0 60px;
 }
 
-.img-result {
-  width: 100%;
-}
-
-.wrapper-input__img input {
-  display: none;
-  margin-right: 20px;
-}
-
 .wrapper-input__img label {
   display: flex;
   align-items: center;
@@ -57,6 +48,15 @@
   cursor: pointer;
 }
 
+.wrapper-input__img input {
+  display: none;
+  margin-right: 20px;
+}
+
+.img-result {
+  max-width: 100%;
+}
+
 .wrapper-input__text {
   display: flex;
   flex-direction: column;