gulpfile.js

@@ -1,5 +1,12 @@
 const { src, dest, watch } = require('gulp');
 const sass = require('gulp-sass')(require('sass'));
+const browserify = require('browserify');
+const Babelify = require('babelify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const uglify = require('gulp-uglify');
+
+
 
 function styles() {
     return src('src/styles/main.scss').pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest('dist'));
@@ -7,8 +14,14 @@ function styles() {
   };
 
 
+  function scripts () {
+    return browserify('src/scripts/app.js').transform(Babelify.configure({presets: ['@babel/preset-env'],})).bundle().pipe(source('bundle.js')).pipe(buffer()).pipe(uglify()).pipe(dest('dist'));
+  }
+
+
   function sentinel () {
-    watch('src/styles/*.scss', {ignoreInitial: false}, styles);
+    watch('src/styles/**/*.scss', {ignoreInitial: false}, styles);
+    watch('src/scripts/**/*.js', {ignoreInitial: false}, scripts);
   }
 
 

package.json

@@ -14,8 +14,15 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "babelify": "^10.0.0",
+    "browserify": "^17.0.0",
     "gulp": "^4.0.2",
     "gulp-sass": "^5.1.0",
-    "sass": "^1.56.1"
+    "gulp-uglify": "^3.0.2",
+    "sass": "^1.56.1",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
   }
 }

public/index.html

@@ -55,7 +55,7 @@
 
     </main>
 
-    <script src="../src/scripts/js.js"></script>
+    <script src="../dist/bundle.js"></script>
 
 </body>
 </html>

src/scripts/app.js

@@ -0,0 +1,6 @@
+import { TouristAttractions } from "./components/TouristAttractions";
+
+
+document.addEventListener('DOMContentLoaded', function () {
+    new TouristAttractions();
+    });

src/scripts/components/TouristAttractions.js

@@ -0,0 +1,121 @@
+export class TouristAttractions {
+    constructor () {
+        this.list = [];
+
+        this.selectors();
+        this.events();
+    }
+
+    selectors () {
+        this.inputFile = document.querySelector('#input__img');
+        this.labelInput = document.querySelector('.label-input');
+        this.textLabelInput = "Imagem";
+        this.labelInput.innerText = this.textLabelInput;
+
+        this.form = document.querySelector('.form__tourist-attractions');
+        this.ulList = document.querySelector('.wrapper-ul__cards');
+
+        this.inputTitle = document.querySelector('.input-text__titulo');
+        this.inputDescription = document.querySelector('.input-text__descricao');
+    }
+
+    events () {
+        this.inputFile.addEventListener('change', this.imgPreview.bind(this));
+        this.form.addEventListener('submit', this.addProperty.bind(this));
+    }
+
+         imgPreview (e) {
+        const inputTarget = e.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);
+
+            });
+
+            reader.readAsDataURL(file);
+
+            this.labelInput.innerText = "";
+            this.labelInput.style.border = "none";
+
+
+        }else {
+            this.labelInput.innerText = this.textLabelInput;
+            this.labelInput.style.border = "";
+        }
+
+    };
+
+
+         addProperty (e) {
+        e.preventDefault();
+
+        const spotImg = this.labelInput.querySelector('.img-result');
+        const spotTitle = e.target['input-title'].value
+        const spotDescription = e.target['input-description'].value
+
+
+        if (spotImg != '' && spotTitle != '' && spotDescription != '') {
+
+            const spot = {
+                image: spotImg.src,
+                titulo: spotTitle,
+                description: spotDescription,
+            };
+
+            this.list.push(spot);
+
+            this.renderListItems();
+            this.resetInputs();
+
+        }else {
+            alert('Preencha todos os campos')
+        }
+
+
+};
+
+
+        renderListItems () {
+       let spotStructure = '';
+
+        this.list.forEach( function (i) {
+            spotStructure += `
+                <li class="wrapper-cards__li">
+
+                    <div class="result-card__img">
+                        <img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
+                    </div>
+
+                    <div class="result-card__text">
+                        <h2 class="result-card__title">${i.titulo}</h2>
+                        <p class="result-card__description">${i.description}</p>
+                    </div>
+
+                </li>
+            `;
+        });
+
+         this.ulList.innerHTML = spotStructure;
+    };
+
+
+        resetInputs () {
+        this.inputTitle.value = '';
+        this.inputDescription.value = '';
+
+        this.labelInput.innerText = this.textLabelInput;
+        this.labelInput.style.border = "";
+    };
+
+}

src/scripts/js.js

@@ -1,116 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-
-    const list = [];
-
-    const inputFile = document.querySelector('#input__img');
-    const labelInput = document.querySelector('.label-input');
-    const textLabelInput = "Imagem";
-    labelInput.innerText = textLabelInput;
-
-    const form = document.querySelector('.form__tourist-attractions');
-    const ulList = document.querySelector('.wrapper-ul__cards');
-
-    const inputTitle = document.querySelector('.input-text__titulo');
-    const inputDescription = document.querySelector('.input-text__descricao');
-
-    //Image Preview
-    inputFile.addEventListener('change', (e) => {
-        const inputTarget = e.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');
-
-                labelInput.appendChild(img);
-
-            });
-
-            reader.readAsDataURL(file);
-
-            labelInput.innerText = "";
-            labelInput.style.border = "none";
-
-
-        }else {
-            labelInput.innerText = textLabelInput;
-            labelInput.style.border = "";
-        }
-
-    });
-
-    //----------------------------------------------------------
-
-
-
-
-
-    form.addEventListener('submit', (e) => {
-        e.preventDefault();
-
-        const spotImg = labelInput.querySelector('.img-result');
-        const spotTitle = e.target['input-title'].value
-        const spotDescription = e.target['input-description'].value
-
-
-        if (spotImg != '' && spotTitle != '' && spotDescription != '') {
-
-            const spot = {
-                image: spotImg.src,
-                titulo: spotTitle,
-                description: spotDescription,
-            };
-
-            list.push(spot);
-
-            renderListItems();
-            resetInputs();
-
-        }else {
-            alert('Preencha todos os campos')
-        }
-
-
-});
-
-
-    function renderListItems () {
-       let spotStructure = '';
-
-        list.forEach(function (i) {
-            spotStructure += `
-                <li class="wrapper-cards__li">
-
-                    <div class="result-card__img">
-                        <img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
-                    </div>
-
-                    <div class="result-card__text">
-                        <h2 class="result-card__title">${i.titulo}</h2>
-                        <p class="result-card__description">${i.description}</p>
-                    </div>
-
-                </li>
-            `;
-        });
-
-         ulList.innerHTML = spotStructure;
-    };
-
-    function resetInputs () {
-        inputTitle.value = '';
-        inputDescription.value = '';
-
-        labelInput.innerText = textLabelInput;
-        labelInput.style.border = "";
-    };
-
-
-    });