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 +82 -138
7 changed files with 82 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 94f3dedaec - Show all commits

18
.editorconfig
View File

@ -1,13 +1,13 @@
# EditorConfig is awesome: https://EditorConfig.org # EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file # top-most EditorConfig file
root = true # root = true
[*] # [*]
indent_style = space # indent_style = space
indent_size = 4 # indent_size = 4
end_of_line = lf # end_of_line = lf
charset = utf-8 # charset = utf-8
trim_trailing_whitespace = true # trim_trailing_whitespace = true
insert_final_newline = true # insert_final_newline = true
max_line_length = 100 # max_line_length = 100

3
src/scripts/app.js
View File

@ -1,8 +1,5 @@
import {Form} from "./components/form"; import {Form} from "./components/form";
import {Slider} from "./components/slider";
document.addEventListener("DOMContentLoaded",function(){ document.addEventListener("DOMContentLoaded",function(){
new Form(); new Form();
new Slider();
}); });

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

@ -25,43 +25,70 @@ export class Form {
]; ];
this.selectors(); this.selectors();
this.events(); this.events();
this.renderListItems();
if (window.innerWidth > 1024){
this.addSlick();
}
} }
selectors() { selectors() {
this.preview = document.querySelector(".input-image-content"); this.inputImage = document.querySelector("#inputImage");
this.form = document.querySelector("form"); this.imagePreview = document.getElementsByClassName("image");
this.form = document.querySelector(".form");
this.itemTitle = document.querySelector("#titleInput"); this.itemTitle = document.querySelector("#titleInput");
this.itemDescription = document.querySelector("#descriptionText"); this.itemDescription = document.querySelector("#descriptionText");
this.slider = document.querySelector(".slider-list"); this.slider = document.querySelector(".slider-list");
} }
events() { events() {
this.preview.addEventListener("change", (e) => { this.inputImage.addEventListener("change", this.addImage.bind(this), false);
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));
}
addImage(event){
const inputFile = event.target;
const file = inputFile.files[0];
if (file){
const reader = new FileReader();
reader.addEventListener("load", (imagem) => {
const readerTarget = imagem.target;
const img = document.createElement("img");
img.src = readerTarget.result;
img.classList.add("image");
this.imagePreview[0].innerHTML = "";
this.imagePreview[0].appendChild(img);
});
reader.readAsDataURL(file);
} else{
this.imagePreview[0].innerHTML;
}
} }
addItemToList(event) { addItemToList(event) {
event.preventDefault(); event.preventDefault();
const itemImage = this.imagePreview[0].children[0].src;
const itemTitle = event.target["titleInput"].value;
const itemDescription = event.target["descriptionText"].value;
const itemImage = event.target["buttonAdicionar"].value.src; if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") {
const itemTitle = event.target["titleInput"].value.title;
const itemDescription = event.target["descriptionText"].value.description;
if (itemImage !== "") {
const item = { const item = {
src: itemImage, src: itemImage,
title: itemTitle, title: itemTitle,
description: itemDescription, description: itemDescription,
}; };
this.list.push(item); this.list.push(item);
this.renderListItems(); this.renderListItems();
this.resetInputs(); if (window.innerWidth > 1024){
this.removeSlick();
} }
if (window.innerWidth > 1024){
this.addSlick();
}
this.resetInputs();
}
} }
renderListItems() { renderListItems() {
@ -70,17 +97,32 @@ export class Form {
this.list.forEach(function (item) { this.list.forEach(function (item) {
itemsSlider += ` itemsSlider += `
<li class="slider-content" data-test="container-item-list"> <li class="slider-content" data-test="container-item-list">
<img src="${item.src}" alt="" data-test="image-item-list"/> <figure><img src="${item.src}" alt="" data-test="image-item-list"/></figure>
<h3 data-test="title-item-list">${item.title}</h3> <h3 data-test="title-item-list">${item.title}</h3>
<p data-test="description-item-list">${item.description}</p> <figcaption data-test="description-item-list">${item.description}</figcaption>
</li> </li>
`; `;
}); });
this.slider.innerHTML = itemsSlider; this.slider.innerHTML = itemsSlider;
} }
addSlick () {
$(".slider-list").slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
variableWidth: true,
arrows: true,
dots: true,
});
}
removeSlick () {
$(".slider-list").slick('unslick');
}
resetInputs() { resetInputs() {
this.preview.value = ""; this.imagePreview[0].innerHTML = "";
this.itemTitle.value = ""; this.itemTitle.value = "";
this.itemDescription.value = ""; this.itemDescription.value = "";
} }

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

@ -1,50 +0,0 @@
export class Slider {
constructor() {}
selectors() {}
events() {}
}
$(".slider-list").slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
variableWidth: true,
arrows: true,
dots: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: false,
arrows: false,
vertical: true,
verticalScrolling: false,
swipe: false,
variableWidth: true,
draggable: false,
}
},
{
breakpoint: 375,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: false,
arrows: false,
vertical: true,
verticalScrolling: false,
swipe: false,
variableWidth: true,
draggable: false
}
},
],
});

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

@ -128,7 +128,7 @@ $breakpoint-desk: 2500px;
} }
form { form {
width: 65.6909%; width: 60.072%;
height: 416px; height: 416px;
.form-container { .form-container {
.form-inputs { .form-inputs {

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

@ -47,7 +47,7 @@ h2 {
display: none; display: none;
} }
} }
& p { & figcaption {
padding: 0 24px 0 24px; padding: 0 24px 0 24px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -142,7 +142,7 @@ $breakpoint-desk: 2500px;
line-height: 56px; line-height: 56px;
height: 120px; height: 120px;
} }
& p { & figcaption {
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
@ -212,7 +212,7 @@ $breakpoint-tablet: 1024px;
& h3 { & h3 {
color: $title-item-list-color; color: $title-item-list-color;
} }
& p { & figcaption {
padding: 0 24px 24px 24px; padding: 0 24px 24px 24px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@ -268,7 +268,7 @@ $breakpoint-mobile: 375px;
& h3 { & h3 {
color: $title-item-list-color; color: $title-item-list-color;
} }
& p { & figcaption {
padding: 0 24px 24px 24px; padding: 0 24px 24px 24px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;

53
src/templates/index.html
View File

@ -18,18 +18,18 @@
<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" runat="server">
<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"/> <label for="filearea"><span class="image"></span></label>
<img src="" alt="preview da imagem" /> <input type="file" accept="image/*" class="input-image-content" name="filearea" id="inputImage" />
</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"/>
<div class="description-content"> <div class="description-content">
<textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea> <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> <button id="buttonAdicionar" class="buttonSubmit" type="submit" name="submitInformation" data-test="button-submit">Adicionar</button>
</div> </div>
</div> </div>
</div> </div>
@ -39,51 +39,6 @@
<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-list" id="slider-content"> <ul class="slider-list" id="slider-content">
<li class="slider-content" data-test="container-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">
Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa
amet sint. Velit officia consece duis enim velit mollit.
</p>
</li>
<li class="slider-content" data-test="container-item-list">
<img
src="imgs/cristoredentor.png"
alt=""
data-test="image-item-list"
/>
<h3 data-test="title-item-list">Cristo Redentor</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>
<li class="slider-content" data-test="container-item-list">
<img
src="imgs/ilhagrande.png"
alt=""
data-test="image-item-list"
/>
<h3 data-test="title-item-list">Ilha Grande</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>
<li class="slider-content" data-test="container-item-list">
<img
src="imgs/centrohistoricodeparati.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>