112 lines
2.8 KiB
JavaScript
112 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
const list = [];
|
|
|
|
const inputFile = document.querySelector('#input__img');
|
|
const labelInput = document.querySelector('.label-input');
|
|
const textLabelInput = "Imagem";
|
|
labelInput.innerText = 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) => {
|
|
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.innerText = "";
|
|
labelInput.style.border = "none";
|
|
|
|
|
|
}else {
|
|
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;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|