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

feat(TouristAttractions): Desenvolve função para adicionar Img, Titulo e Descrição (Falta corrigir erro de renderListItems)

Browse Source
This commit is contained in:
William Simão Cavalcante 2022-11-17 18:52:38 -03:00
parent 55fc18390e
commit 3b14648324
2 changed files with 89 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -14,7 +14,7 @@
<div class="container-h1-input"> <div class="container-h1-input">
<h1 class="page-titulo__tourist" data-test="title-form">Adicionar um Ponto Turístico</h1> <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="container-input">
<div class="wrapper-input__img"> <div class="wrapper-input__img">
@ -27,8 +27,8 @@
</div> </div>
<div class="wrapper-input__text"> <div class="wrapper-input__text">
<input class="input-text__titulo" type="text" placeholder="Titulo" data-test="input-titulo"> <input name="input-title" 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-description" class="input-text__descricao" type="text" placeholder="Descrição" data-test="input-descrição">
<div class="wrapper-button-submit"> <div class="wrapper-button-submit">
<button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button> <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
@ -44,6 +44,17 @@
</div> </div>
<div class="container-cards">
<div class="container-cards__wrapper">
<ul class="wrapper-ul__cards"></ul>
</div>
</div>
</main> </main>
<script src="js.js"></script> <script src="js.js"></script>

79
js.js
View File

@ -1,12 +1,19 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const list = [];
const inputFile = document.querySelector('#input__img'); const inputFile = document.querySelector('#input__img');
const labelInput = document.querySelector('.label-input'); const labelInput = document.querySelector('.label-input');
const textLabelInput = "Imagem"; 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) => { inputFile.addEventListener('change', (e) => {
const inputTarget = e.target; const inputTarget = e.target;
const file = inputTarget.files[0]; const file = inputTarget.files[0];
@ -27,14 +34,78 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
reader.readAsDataURL(file); reader.readAsDataURL(file);
labelInput.innerHTML = "";
labelInput.innerText = "";
labelInput.style.border = "none"; labelInput.style.border = "none";
}else { }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;
};
}); });