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

Entrega do Desafio #1

Merged
anacarolinaduartecavalcante merged 29 commits from feature/challenge-tourist-attractions into develop 2022-11-28 17:16:05 +00:00
Conversation 0 Commits 29 Files Changed 21 +11 -23
4 changed files with 11 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b753c3ca53 - Show all commits

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

@ -28,15 +28,15 @@ export class Form {
} }
selectors() { selectors() {
this.src = document.querySelector(".input-image-content"); this.preview = document.querySelector(".input-image-content");
this.form = document.querySelector(".form"); this.form = document.querySelector("form");
this.itemTitle = document.getElementById("titleInput"); this.itemTitle = document.querySelector("#titleInput");
this.itemDescription = document.getElementById("descriptionText"); this.itemDescription = document.querySelector("#descriptionText");
this.slider = document.querySelector(".slider-list"); this.slider = document.querySelector(".slider-list");
} }
events() { events() {
this.src.addEventListener("change", (e) => { this.preview.addEventListener("change", (e) => {
document.querySelector("img").src = URL.createObjectURL(e.target.files[0]); document.querySelector("img").src = URL.createObjectURL(e.target.files[0]);
}); });
this.form.addEventListener("submit", this.addItemToList.bind(this)); this.form.addEventListener("submit", this.addItemToList.bind(this));
@ -80,7 +80,7 @@ export class Form {
} }
resetInputs() { resetInputs() {
this.src.value = ""; this.preview.value = "";
this.itemTitle.value = ""; this.itemTitle.value = "";
this.itemDescription.value = ""; this.itemDescription.value = "";
} }

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

@ -9,7 +9,7 @@ export class Slider {
$(".slider-list").slick({ $(".slider-list").slick({
infinite: true, infinite: true,
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 4,
variableWidth: true, variableWidth: true,
arrows: true, arrows: true,
dots: true, dots: true,

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

@ -38,7 +38,7 @@ h2 {
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $title-item-list-color; color: $title-item-list-color;
max-height: 60px; height: 60px;
margin: 24px 24px 8px 24px; margin: 24px 24px 8px 24px;
overflow-y: auto; overflow-y: auto;
-ms-overflow-style: none; -ms-overflow-style: none;

18
src/templates/index.html
View File

@ -18,12 +18,12 @@
<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 class="form"> <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">
<input type="file" accept="image/*" class="input-image-content" id="input-images"/> <input type="file" accept="image/*" class="input-image-content"/>
<img src="" alt="" /> <img src="" alt="preview da imagem" />
</div> </div>
<div class="form-input-descricao"> <div class="form-input-descricao">
<input id="titleInput" 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"/>
@ -84,18 +84,6 @@
amet sint. Velit officia consece duis enim velit mollit. amet sint. Velit officia consece duis enim velit mollit.
</p> </p>
</li> </li>
<!-- <li class="slider-content" data-test="container-item-list">
<img
src="imgs/image-item-list-4.png"
alt=""
data-test="image-item-list"
/>
<h3 data-test="title-item-list">Centro Histórico de Paraty</h3>
<p data-test="description-item-list">
Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa
amet sint. Velit officia consece duis enim velit mollit.
</p>
</li> -->
</ul> </ul>
</div> </div>
</div> </div>