WilliamSimao/challenge-tourist-attractions-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Feature/TouristAttractions): Soluciona erro js Preview, e aplica Slick.js

Browse Source
This commit is contained in:
William Simão Cavalcante 2022-11-23 13:00:43 -03:00
parent 11e908c703
commit f9b0dac146
10 changed files with 163 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
gulpfile.js
View File

@ -26,15 +26,19 @@ const paths = {
main: 'src/scripts/app.js',
},
utilities: {
all: 'src/scripts/utilities/*.js'
},
output: 'dist',
};
function html () {
return src(paths.html.all).pipe(dest(paths.output));
return src(paths.html.all).pipe(dest(paths.output)).pipe(connect.reload());
}
function styles() {
return src(paths.styles.main).pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest(paths.output));
return src(paths.styles.main).pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest(paths.output)).pipe(connect.reload());
};
@ -51,13 +55,17 @@ function styles() {
watch(paths.styles.all, {ignoreInitial: false}, styles);
watch(paths.scripts.all, {ignoreInitial: false}, scripts);
watch(paths.img.all, {ignoreInitial: false}, img);
watch(paths.utilities.all, {ignoreInitial: false}, utilities);
}
function utilities () {
return src(paths.utilities.all).pipe(dest(paths.output));
}
function scripts () {
return browserify(paths.scripts.main).transform(Babelify.configure({presets: ['@babel/preset-env'],})).bundle().pipe(source('bundle.js')).pipe(buffer()).pipe(uglify()).pipe(dest(paths.output));
return browserify(paths.scripts.main).transform(Babelify.configure({presets: ['@babel/preset-env'],})).bundle().pipe(source('bundle.js')).pipe(buffer()).pipe(uglify()).pipe(dest(paths.output)).pipe(connect.reload());
}
function img () {
return src(paths.img.all).pipe(dest(paths.output));
}

0
src/Assets/centroHistoricodeParaty.png → src/assets/img1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 460 KiB

After

Width:  |  Height:  |  Size: 460 KiB

0
src/Assets/cristoRedentor.png → src/assets/img2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 KiB

After

Width:  |  Height:  |  Size: 255 KiB

0
src/Assets/ilhaGrande.png → src/assets/img3.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 397 KiB

After

Width:  |  Height:  |  Size: 397 KiB

0
src/Assets/paoDeAcucar.png → src/assets/img4.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 337 KiB

After

Width:  |  Height:  |  Size: 337 KiB

3
src/assets/setaDi.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="30" viewBox="0 0 14 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.6447 14.8168L0.33028 4.58192e-05L-5.61424e-07 2.36213L10.8373 14.8168L-6.44363e-06 27.1104L0.330273 29.4725L13.6447 14.8168Z" fill="#858585"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

122
src/scripts/components/TouristAttractions.js
View File

@ -1,16 +1,42 @@
export class TouristAttractions {
constructor () {
this.list = [];
this.list = [
{
image: 'img1.png',
titulo: 'Pão de Açucar',
description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
},
{
image: 'img2.png',
titulo: 'Cristo Redentor',
description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
},
{
image: 'img3.png',
titulo: 'Ilha Grande',
description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
},
{
image: 'img4.png',
titulo: 'Centro Histórico de Paraty',
description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
},
];
this.selectors();
this.events();
this.carrossel();
this.renderListItems();
}
selectors () {
this.inputFile = document.querySelector('#input__img');
this.labelInput = document.querySelector('.label-input');
this.textLabelInput = "Imagem";
this.labelInput.innerText = this.textLabelInput;
this.spanInput = document.querySelector('.input__span');
this.textSpanInput = "Imagem";
this.spanInput.innerText = this.textSpanInput;
this.labelInput = document.querySelector('.label-input')
this.form = document.querySelector('.form__tourist-attractions');
this.ulList = document.querySelector('.wrapper-ul__cards');
@ -19,64 +45,50 @@ export class TouristAttractions {
this.inputDescription = document.querySelector('.input-text__descricao');
}
events () {
this.inputFile.addEventListener('change', this.imgPreview.bind(this));
this.inputFile.addEventListener('change', this.imgPreview.bind(this), false);
this.form.addEventListener('submit', this.addProperty.bind(this));
}
imgPreview (e) {
const inputTarget = e.target;
imgPreview (i) {
const inputTarget = i.target;
const file = inputTarget.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener('load', (e) => {
const readerTarget = e.target;
const img = document.createElement('img');
img.src = readerTarget.result;
img.classList.add('img-result');
this.labelInput.appendChild(img);
this.spanInput.innerHTML = "";
this.labelInput.style.border = "none";
this.spanInput.appendChild(img);
});
reader.readAsDataURL(file);
this.labelInput.innerText = "";
this.labelInput.style.border = "none";
i.target.value = '';
}else {
this.labelInput.innerText = this.textLabelInput;
this.spanInput.innerText = this.textSpanInput;
this.labelInput.style.border = "";
}
};
addProperty (e) {
e.preventDefault();
const spotImg = this.labelInput.children[0].src
const spotImg = this.spanInput.children[0].src
const spotTitle = e.target['input-title'].value
const spotDescription = e.target['input-description'].value
if (this.spotImg != '' && spotTitle != '' && spotDescription != '') {
if (spotImg != '' && spotTitle != '' && spotDescription != '') {
const spot = {
image: spotImg,
@ -84,8 +96,8 @@ export class TouristAttractions {
description: spotDescription,
};
this.list.push(spot);
this.list.push(spot);
this.renderListItems();
this.resetInputs();
@ -94,44 +106,64 @@ export class TouristAttractions {
}
};
};
renderListItems () {
let spotStructure = '';
this.list.forEach( function (i) {
this.list.forEach((i) => {
spotStructure += `
<li class="wrapper-cards__li">
<div class="result-card__img">
<figure class="container-card__img">
<img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
</div>
<div class="result-card__text">S
<div class="card__h2">
<p class="result-card__title">${i.titulo}</p>
</div>
<div class="card__p">
</figure>
<div class="container__text">
<h3 class="result-card__title">${i.titulo}</h3>
<p class="result-card__description">${i.description}</p>
</div>
</div>
</li>
`;
});
this.removeSlick();
this.ulList.innerHTML = spotStructure;
this.carrossel();
};
carrossel () {
if(window.innerWidth >= 1024) {
$('.wrapper-ul__cards').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
variableWidth: true,
})
}
};
removeSlick () {
if(window.innerWidth >= 1024) {
$('.wrapper-ul__cards').slick('unslick');
}
};
resetInputs () {
this.inputTitle.value = '';
this.inputDescription.value = '';
this.labelInput.innerText = this.textLabelInput;
this.labelInput.style.border = "";
this.spanInput.innerText = this.textSpanInput;
this.spanInput.style.border = "";
};
}
}

0
src/scripts/components/slick.min.js → src/scripts/utilities/slick.min.js vendored
View File

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

@ -40,6 +40,14 @@
cursor: pointer;
}
.input__span {
display: flex;
justify-content: center;
align-items: center;
width: 343px;
height: 212px;
}
.wrapper-input__img input {
display: none;
margin-right: 20px;
@ -145,45 +153,42 @@
}
.container-cards {
display: flex;
padding: 41px 63px;
padding:41px 63px;
.wrapper-ul__cards {
display: flex;
column-gap: 10px;
.wrapper-cards__li {
width: 279px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
border-radius: 8px;
margin: 0 10.5px;
.container-card__img {
object-fit: cover;
border-radius: 8px;
.result-card__img {
object-fit: cover;
width: 100%;
}
}
.result-card__text {
.container__text {
margin: 24px;
.card__h2 {
margin-bottom: 8px;
width: 231px;
height: 60px;
.result-card__title {
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
color: $black-500;
margin-bottom: 8px;
width: 231px;
}
.card__p {
width: 231px;
height: 96px;
.result-card__description {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-weight: 400;
@ -191,8 +196,9 @@
line-height: 24px;
color: $grey-500;
}
}
}

7
src/templates/index.html
View File

@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.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="slick/slick-theme.css"/>
<title>Tourist Attractions</title>
</head>
@ -19,13 +21,14 @@
<div class="wrapper-input__img">
<label class="label-input" for="input__img">
<span class="input__span"></span>
</label>
<input id="input__img" type="file" accept="image/*" data-test="input-image">
</div>
<div class="wrapper-input__text">
<input name="input-title" class="input-text__titulo" type="text" placeholder="Titulo" data-test="input-titulo">
<input name="input-title" class="input-text__titulo" type="text" accept="text/*" placeholder="Titulo" data-test="input-titulo">
<input name="input-description" class="input-text__descricao" type="text" placeholder="Descrição" data-test="input-descrição">
<div class="wrapper-button-submit">
@ -51,7 +54,7 @@
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../scripts/components/slick.min.js"></script>
<script src="slick.min.js"></script>
<script src="bundle.js"></script>