Entrega do Desafio #1

Merged
anacarolinaduartecavalcante merged 29 commits from feature/challenge-tourist-attractions into develop 2022-11-28 17:16:05 +00:00
10 changed files with 77 additions and 92 deletions
Showing only changes of commit ac7d1ccaeb - Show all commits

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

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>

After

Width:  |  Height:  |  Size: 241 B

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>

After

Width:  |  Height:  |  Size: 242 B

View File

@ -1,15 +1,61 @@
export class Form { export class Form {
constructor() {} constructor() {
this.list = [];
this.selectors();
this.events();
}
selectors() {} 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() {} 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 = "";
}
} }
document.querySelector('input').addEventListener('change', e => {
document.querySelector('img').src = URL.createObjectURL(e.target.files[0]);
});

View File

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

View File

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

View File

@ -9,27 +9,16 @@
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <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"/>
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" <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
rel="stylesheet" <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
/>
<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" /> <link rel="stylesheet" href="main.css" />
</head> </head>
<body> <body>
<main> <main>
<section class="container"> <section class="container">
<h1 data-test="title-form">Adicionar um Ponto Turístico</h1> <h1 data-test="title-form">Adicionar um Ponto Turístico</h1>
<form> <form class="form">
<div class="form-container"> <div class="form-container">
<div class="form-inputs"> <div class="form-inputs">
<div class="input-image-container" data-test="input-image"> <div class="input-image-container" data-test="input-image">
@ -37,25 +26,10 @@
<img src="" alt="" /> <img src="" alt="" />
</div> </div>
<div class="form-input-descricao"> <div class="form-input-descricao">
<input <input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
type="text"
placeholder="Título"
data-test="input-titulo"
class="input-titulo"
name="item-title"
/>
<div class="description-content"> <div class="description-content">
<textarea <textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
placeholder="Descrição" <button id="buttonAdicionar" class="buttonSubmit" type="submit" data-test="button-submit">Adicionar</button>
class="input-descricao"
data-test="input-descricao"
name="item-description"
rows="10"
cols="30"
></textarea>
<button type="submit" data-test="button-submit">
Adicionar
</button>
</div> </div>
</div> </div>
</div> </div>
@ -64,12 +38,9 @@
<div class="slider-container"> <div class="slider-container">
<h2 data-test="title-list">Pontos Turísticos</h2> <h2 data-test="title-list">Pontos Turísticos</h2>
<div class="slider"> <div class="slider">
<ul class="slider-info"> <ul class="slider-list">
<li class="slider-content" data-test="container-item-list"> <li class="slider-content" data-test="container-item-list">
<img <img src="imgs/image-item-list-1.png" alt="" data-test="image-item-list"
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> <h3 data-test="title-item-list">Pão de Açúcar</h3>
<p data-test="description-item-list"> <p data-test="description-item-list">