diff --git a/src/assets/imgs/image-item-list-4.png b/src/assets/imgs/centrohistoricodeparati.png similarity index 100% rename from src/assets/imgs/image-item-list-4.png rename to src/assets/imgs/centrohistoricodeparati.png diff --git a/src/assets/imgs/image-item-list-2.png b/src/assets/imgs/cristoredentor.png similarity index 100% rename from src/assets/imgs/image-item-list-2.png rename to src/assets/imgs/cristoredentor.png diff --git a/src/assets/imgs/image-item-list-3.png b/src/assets/imgs/ilhagrande.png similarity index 100% rename from src/assets/imgs/image-item-list-3.png rename to src/assets/imgs/ilhagrande.png diff --git a/src/assets/imgs/image-item-list-1.png b/src/assets/imgs/paodeacucar.png similarity index 100% rename from src/assets/imgs/image-item-list-1.png rename to src/assets/imgs/paodeacucar.png diff --git a/src/scripts/components/form.js b/src/scripts/components/form.js index f7233b1..1518169 100644 --- a/src/scripts/components/form.js +++ b/src/scripts/components/form.js @@ -1,34 +1,58 @@ export class Form { constructor() { - this.list = []; + + this.list = [ + { + src: "imgs/paodeacucar.png", + title: "Pão de Açúcar", + description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.", + }, + { + src: "imgs/cristoredentor.png", + title: "Cristo Redentor", + description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.", + }, + { + src: "imgs/ilhagrande.png", + title: "Ilha Grande", + description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.", + }, + { + src: "imgs/centrohistoricodeparati.png", + title: "Centro Histórico de Parati", + description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.", + }, + ]; this.selectors(); this.events(); } selectors() { - this.image = document.querySelector(".input-image-content"); - this.itemInput = document.querySelectorAll("div.input-image-container"); + this.src = document.querySelector(".input-image-content"); this.form = document.querySelector(".form"); + this.itemTitle = document.getElementById("titleInput"); + this.itemDescription = document.getElementById("descriptionText"); this.slider = document.querySelector(".slider-list"); } events() { + this.src.addEventListener("change", (e) => { + document.querySelector("img").src = URL.createObjectURL(e.target.files[0]); + }); this.form.addEventListener("submit", this.addItemToList.bind(this)); - this.image.addEventListener("change", (e) => { - document.querySelector("img").src = URL.createObjectURL(e.target.files[0]); - }); + } addItemToList(event) { event.preventDefault(); - const itemImage = event.target["buttonAdicionar"].value.img; + const itemImage = event.target["buttonAdicionar"].value.src; const itemTitle = event.target["titleInput"].value.title; const itemDescription = event.target["descriptionText"].value.description; - if (itemImage != "") { + if (itemImage !== "") { const item = { - img: itemImage, + src: itemImage, title: itemTitle, description: itemDescription, }; @@ -46,7 +70,7 @@ export class Form { this.list.forEach(function (item) { itemsSlider += `
${item.description}