WilliamSimao/challenge-tourist-attractions-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(TouristAttractions): Cria código Js para Img Preview

Browse Source
This commit is contained in:
William Simão Cavalcante 2022-11-16 21:25:18 -03:00
parent ab7fa8409d
commit 2a5ffb64c3
3 changed files with 64 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
index.html
View File

@ -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>

35
js.js
View File

@ -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;
}
});
});

18
style.css
View File

@ -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;