From 2a5ffb64c3b2e81d49fe77b393310d8979ad78f5 Mon Sep 17 00:00:00 2001
From: WillSimao <williamsimaocavalcante75@gmail.com>
Date: Wed, 16 Nov 2022 21:25:18 -0300
Subject: [PATCH] =?UTF-8?q?feat(TouristAttractions):=20Cria=20c=C3=B3digo?=
 =?UTF-8?q?=20Js=20para=20Img=20Preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 40 ++++++++++++++++++++++------------------
 js.js      | 35 +++++++++++++++++++++++++++++++++--
 style.css  | 18 +++++++++---------
 3 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index ce0c263..5656002 100644
--- a/index.html
+++ b/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">
-            
-            <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">
+        <form action="">
+            <div class="container-input">
                 
-                <div class="wrapper-button-submit">
-                    <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
+                <div class="wrapper-input__img">
+                    <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">
+                    <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>
             
-        
-        </div>
+            </div>
+        </form>
 
-        <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
+            <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
 
         </div>
 
diff --git a/js.js b/js.js
index 9c465f3..c952792 100644
--- a/js.js
+++ b/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;
+        }
+        
+    });
 
     });
diff --git a/style.css b/style.css
index c2d53d1..f8e61c2 100644
--- a/style.css
+++ b/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;