anacarolinaduartecavalcante/challenge-tourist-attractions-ana-carolina-duarte-cavalcante
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: colocando conteúdo do slider com javascript

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-11-19 17:18:19 -03:00
parent ac7d1ccaeb
commit 3a01cd6334
7 changed files with 52 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/imgs/image-item-list-4.png → src/assets/imgs/centrohistoricodeparati.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 136 KiB

0
src/assets/imgs/image-item-list-2.png → src/assets/imgs/cristoredentor.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 89 KiB

After

Width:  |  Height:  |  Size: 89 KiB

0
src/assets/imgs/image-item-list-3.png → src/assets/imgs/ilhagrande.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

0
src/assets/imgs/image-item-list-1.png → src/assets/imgs/paodeacucar.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 107 KiB

After

Width:  |  Height:  |  Size: 107 KiB

48
src/scripts/components/form.js
View File

@ -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 += `
<li class="slider-content" data-test="container-item-list">
<img src="${item.img}" alt="" data-test="image-item-list"/>
<img src="${item.src}" alt="" data-test="image-item-list"/>
<h3 data-test="title-item-list">${item.title}</h3>
<p data-test="description-item-list">${item.description}</p>
</li>
@ -56,6 +80,8 @@ export class Form {
}
resetInputs() {
this.itemInput.value = "";
this.src.value = "";
this.itemTitle.value = "";
this.itemDescription.value = "";
}
}

8
src/styles/partials/slider.scss
View File

@ -38,8 +38,14 @@ h2 {
font-size: 24px;
line-height: 28px;
color: $title-item-list-color;
height: 60px;
max-height: 60px;
margin: 24px 24px 8px 24px;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
& p {
padding: 0 24px 0 24px;

16
src/templates/index.html
View File

@ -22,7 +22,7 @@
<div class="form-container">
<div class="form-inputs">
<div class="input-image-container" data-test="input-image">
<input type="file" accept="image/*" class="input-image-content" />
<input type="file" accept="image/*" class="input-image-content" id="input-images"/>
<img src="" alt="" />
</div>
<div class="form-input-descricao">
@ -38,9 +38,9 @@
<div class="slider-container">
<h2 data-test="title-list">Pontos Turísticos</h2>
<div class="slider">
<ul class="slider-list">
<ul class="slider-list" id="slider-content">
<li class="slider-content" data-test="container-item-list">
<img src="imgs/image-item-list-1.png" alt="" data-test="image-item-list"
<img src="imgs/paodeacucar.png" alt="" data-test="image-item-list"
/>
<h3 data-test="title-item-list">Pão de Açúcar</h3>
<p data-test="description-item-list">
@ -50,7 +50,7 @@
</li>
<li class="slider-content" data-test="container-item-list">
<img
src="imgs/image-item-list-2.png"
src="imgs/cristoredentor.png"
alt=""
data-test="image-item-list"
/>
@ -62,7 +62,7 @@
</li>
<li class="slider-content" data-test="container-item-list">
<img
src="imgs/image-item-list-3.png"
src="imgs/ilhagrande.png"
alt=""
data-test="image-item-list"
/>
@ -74,7 +74,7 @@
</li>
<li class="slider-content" data-test="container-item-list">
<img
src="imgs/image-item-list-4.png"
src="imgs/centrohistoricodeparati.png"
alt=""
data-test="image-item-list"
/>
@ -84,7 +84,7 @@
amet sint. Velit officia consece duis enim velit mollit.
</p>
</li>
<li class="slider-content" data-test="container-item-list">
<!-- <li class="slider-content" data-test="container-item-list">
<img
src="imgs/image-item-list-4.png"
alt=""
@ -95,7 +95,7 @@
Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa
amet sint. Velit officia consece duis enim velit mollit.
</p>
</li>
</li> -->
</ul>
</div>
</div>