diff --git a/gulpfile.js b/gulpfile.js
index 7512b4c..2f9ad3e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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));
}
diff --git a/src/Assets/centroHistoricodeParaty.png b/src/assets/img1.png
similarity index 100%
rename from src/Assets/centroHistoricodeParaty.png
rename to src/assets/img1.png
diff --git a/src/Assets/cristoRedentor.png b/src/assets/img2.png
similarity index 100%
rename from src/Assets/cristoRedentor.png
rename to src/assets/img2.png
diff --git a/src/Assets/ilhaGrande.png b/src/assets/img3.png
similarity index 100%
rename from src/Assets/ilhaGrande.png
rename to src/assets/img3.png
diff --git a/src/Assets/paoDeAcucar.png b/src/assets/img4.png
similarity index 100%
rename from src/Assets/paoDeAcucar.png
rename to src/assets/img4.png
diff --git a/src/assets/setaDi.svg b/src/assets/setaDi.svg
new file mode 100644
index 0000000..74e9571
--- /dev/null
+++ b/src/assets/setaDi.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/scripts/components/TouristAttractions.js b/src/scripts/components/TouristAttractions.js
index 4ae6b01..d7f8608 100644
--- a/src/scripts/components/TouristAttractions.js
+++ b/src/scripts/components/TouristAttractions.js
@@ -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 = '';
- renderListItems () {
- let spotStructure = '';
-
- this.list.forEach( function (i) {
+ this.list.forEach((i) => {
spotStructure += `
-
-
-
-
-
+
${i.titulo}
+
${i.description}
+