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

feat: adicionando javascript

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-11-19 07:17:48 -03:00
parent b32608f8a9
commit ac7d1ccaeb
10 changed files with 77 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/svgs/image-item-list-1.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 182 KiB

9
src/assets/svgs/image-item-list-2.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 88 KiB

9
src/assets/svgs/image-item-list-3.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 216 KiB

9
src/assets/svgs/image-item-list-4.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 261 KiB

3
src/assets/svgs/left arrow big.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="26" height="58" viewBox="0 0 26 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.25454e-06 28.8415L25.3707 58L26 53.3516L5.34947 28.8415L26 4.64845L25.3707 -3.2965e-08L4.25454e-06 28.8415Z" fill="#858585"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 241 B

3
src/assets/svgs/right arrow big.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="27" height="59" viewBox="0 0 27 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.6445 29.631L1.27388 0.472534L0.64453 5.12098L21.295 29.631L0.644519 53.8241L1.27387 58.4725L26.6445 29.631Z" fill="#858585"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 242 B

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

@ -1,15 +1,61 @@
export class Form {
constructor() {}
selectors() {}
events() {}
constructor() {
this.list = [];
this.selectors();
this.events();
}
document.querySelector('input').addEventListener('change', e => {
document.querySelector('img').src = URL.createObjectURL(e.target.files[0]);
selectors() {
this.image = document.querySelector(".input-image-content");
this.itemInput = document.querySelectorAll("div.input-image-container");
this.form = document.querySelector(".form");
this.slider = document.querySelector(".slider-list");
}
events() {
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 itemTitle = event.target["titleInput"].value.title;
const itemDescription = event.target["descriptionText"].value.description;
if (itemImage != "") {
const item = {
img: itemImage,
title: itemTitle,
description: itemDescription,
};
this.list.push(item);
this.renderListItems();
this.resetInputs();
}
}
renderListItems() {
let itemsSlider = "";
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"/>
<h3 data-test="title-item-list">${item.title}</h3>
<p data-test="description-item-list">${item.description}</p>
</li>
`;
});
this.slider.innerHTML = itemsSlider;
}
resetInputs() {
this.itemInput.value = "";
}
}

2
src/scripts/components/slider.js
View File

@ -6,7 +6,7 @@ export class Slider {
events() {}
}
$(".slider-info").slick({
$(".slider-list").slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,

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

@ -148,18 +148,16 @@ $breakpoint-desk: 2500px;
}
.slick-prev {
left: -40px;
left: -70px;
&:before {
width: 26px;
height: 58px;
content: url("svgs/left arrow big.svg");
}
}
.slick-next {
right: -40px;
right: -70px;
&:before {
width: 26px;
height: 58px;
content: url("svgs/right arrow big.svg");
}
}

47
src/templates/index.html
View File

@ -9,27 +9,16 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
type="text/css"
href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
/>
<link
rel="stylesheet"
type="text/css"
href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<main>
<section class="container">
<h1 data-test="title-form">Adicionar um Ponto Turístico</h1>
<form>
<form class="form">
<div class="form-container">
<div class="form-inputs">
<div class="input-image-container" data-test="input-image">
@ -37,25 +26,10 @@
<img src="" alt="" />
</div>
<div class="form-input-descricao">
<input
type="text"
placeholder="Título"
data-test="input-titulo"
class="input-titulo"
name="item-title"
/>
<input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
<div class="description-content">
<textarea
placeholder="Descrição"
class="input-descricao"
data-test="input-descricao"
name="item-description"
rows="10"
cols="30"
></textarea>
<button type="submit" data-test="button-submit">
Adicionar
</button>
<textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
<button id="buttonAdicionar" class="buttonSubmit" type="submit" data-test="button-submit">Adicionar</button>
</div>
</div>
</div>
@ -64,12 +38,9 @@
<div class="slider-container">
<h2 data-test="title-list">Pontos Turísticos</h2>
<div class="slider">
<ul class="slider-info">
<ul class="slider-list">
<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/image-item-list-1.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">