Entrega do Desafio #1
@ -1,13 +1,13 @@
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
# root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
max_line_length = 100
|
||||
# [*]
|
||||
# indent_style = space
|
||||
# indent_size = 4
|
||||
# end_of_line = lf
|
||||
# charset = utf-8
|
||||
# trim_trailing_whitespace = true
|
||||
# insert_final_newline = true
|
||||
# max_line_length = 100
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
import {Form} from "./components/form";
|
||||
import {Slider} from "./components/slider";
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded",function(){
|
||||
new Form();
|
||||
new Slider();
|
||||
});
|
||||
|
||||
@ -25,32 +25,52 @@ export class Form {
|
||||
];
|
||||
this.selectors();
|
||||
this.events();
|
||||
this.renderListItems();
|
||||
if (window.innerWidth > 1024){
|
||||
this.addSlick();
|
||||
}
|
||||
}
|
||||
|
||||
selectors() {
|
||||
this.preview = document.querySelector(".input-image-content");
|
||||
this.form = document.querySelector("form");
|
||||
this.inputImage = document.querySelector("#inputImage");
|
||||
this.imagePreview = document.getElementsByClassName("image");
|
||||
this.form = document.querySelector(".form");
|
||||
this.itemTitle = document.querySelector("#titleInput");
|
||||
this.itemDescription = document.querySelector("#descriptionText");
|
||||
this.slider = document.querySelector(".slider-list");
|
||||
}
|
||||
|
||||
events() {
|
||||
this.preview.addEventListener("change", (e) => {
|
||||
document.querySelector("img").src = URL.createObjectURL(e.target.files[0]);
|
||||
});
|
||||
this.inputImage.addEventListener("change", this.addImage.bind(this), false);
|
||||
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) {
|
||||
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;
|
||||
const itemTitle = event.target["titleInput"].value.title;
|
||||
const itemDescription = event.target["descriptionText"].value.description;
|
||||
|
||||
if (itemImage !== "") {
|
||||
if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") {
|
||||
const item = {
|
||||
src: itemImage,
|
||||
title: itemTitle,
|
||||
@ -60,8 +80,15 @@ export class Form {
|
||||
this.list.push(item);
|
||||
|
||||
this.renderListItems();
|
||||
if (window.innerWidth > 1024){
|
||||
this.removeSlick();
|
||||
}
|
||||
if (window.innerWidth > 1024){
|
||||
this.addSlick();
|
||||
}
|
||||
this.resetInputs();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
renderListItems() {
|
||||
@ -70,17 +97,32 @@ export class Form {
|
||||
this.list.forEach(function (item) {
|
||||
itemsSlider += `
|
||||
<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>
|
||||
<p data-test="description-item-list">${item.description}</p>
|
||||
<figcaption data-test="description-item-list">${item.description}</figcaption>
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
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() {
|
||||
this.preview.value = "";
|
||||
this.imagePreview[0].innerHTML = "";
|
||||
this.itemTitle.value = "";
|
||||
this.itemDescription.value = "";
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -128,7 +128,7 @@ $breakpoint-desk: 2500px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 65.6909%;
|
||||
width: 60.072%;
|
||||
height: 416px;
|
||||
.form-container {
|
||||
.form-inputs {
|
||||
|
||||
@ -47,7 +47,7 @@ h2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
& p {
|
||||
& figcaption {
|
||||
padding: 0 24px 0 24px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@ -142,7 +142,7 @@ $breakpoint-desk: 2500px;
|
||||
line-height: 56px;
|
||||
height: 120px;
|
||||
}
|
||||
& p {
|
||||
& figcaption {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
@ -212,7 +212,7 @@ $breakpoint-tablet: 1024px;
|
||||
& h3 {
|
||||
color: $title-item-list-color;
|
||||
}
|
||||
& p {
|
||||
& figcaption {
|
||||
padding: 0 24px 24px 24px;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
@ -268,7 +268,7 @@ $breakpoint-mobile: 375px;
|
||||
& h3 {
|
||||
color: $title-item-list-color;
|
||||
}
|
||||
& p {
|
||||
& figcaption {
|
||||
padding: 0 24px 24px 24px;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
||||
@ -18,18 +18,18 @@
|
||||
<main>
|
||||
<section class="container">
|
||||
<h1 data-test="title-form">Adicionar um Ponto Turístico</h1>
|
||||
<form>
|
||||
<form class="form" runat="server">
|
||||
<div class="form-container">
|
||||
<div class="form-inputs">
|
||||
<div class="input-image-container" data-test="input-image">
|
||||
<input type="file" accept="image/*" class="input-image-content"/>
|
||||
<img src="" alt="preview da imagem" />
|
||||
<label for="filearea"><span class="image"></span></label>
|
||||
<input type="file" accept="image/*" class="input-image-content" name="filearea" id="inputImage" />
|
||||
</div>
|
||||
<div class="form-input-descricao">
|
||||
<input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
|
||||
<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>
|
||||
<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>
|
||||
@ -39,51 +39,6 @@
|
||||
<h2 data-test="title-list">Pontos Turísticos</h2>
|
||||
<div class="slider">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user