index.html

@@ -14,13 +14,16 @@
         <div class="container-h1-input">
         <h1 class="page-titulo__tourist" data-test="title-form">Adicionar um Ponto Turístico</h1>
 
+        <form action="">
             <div class="container-input">
                 
                 <div class="wrapper-input__img">
-                <label>
-                    <input id="input__img" type="file" data-test="input-image">
-                    <span class="span__img">Imagem</span>
+                    <label class="label-input" for="input__img">
+                        <!-- <span class="span__img">
+                        </span> -->
                     </label>
+
+                    <input id="input__img" type="file" data-test="input-image">
                 </div>
 
                 <div class="wrapper-input__text">
@@ -35,6 +38,7 @@
                 
             
             </div>
+        </form>
 
             <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
 

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;