Entrega do Desafio #1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
3
src/assets/svgs/left arrow big.svg
Normal file
3
src/assets/svgs/left arrow big.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 241 B |
3
src/assets/svgs/right arrow big.svg
Normal file
3
src/assets/svgs/right arrow big.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 242 B |
@ -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 = "";
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ export class Slider {
|
||||
events() {}
|
||||
}
|
||||
|
||||
$(".slider-info").slick({
|
||||
$(".slider-list").slick({
|
||||
infinite: true,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user