feat(TouristAttractions): Automatiza Img

gulpfile.js

@@ -12,6 +12,10 @@ const paths = {
         all: 'src/templates/**/*.html'
     },
 
+    img: {
+       all: 'src/assets/*.png',
+    },
+
     styles: {
         all: 'src/styles/**/*.scss',
         main: 'src/styles/main.scss',
@@ -26,19 +30,17 @@ const paths = {
 };
 
 function html () {
-  return src(paths.html.all,).pipe(dest(paths.output));
+  return src(paths.html.all).pipe(dest(paths.output));
 }
 
-
 function styles() {
     return src(paths.styles.main).pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest(paths.output));
-
   };
 
 
   function server () {
       connect.server({
-          root: paths.output,
+          root: 'dist',
           livereload: true,
           port: 3000,
         })
@@ -48,10 +50,16 @@ function styles() {
       watch(paths.html.all, {ignoreInitial: false}, html);
       watch(paths.styles.all, {ignoreInitial: false}, styles);
       watch(paths.scripts.all, {ignoreInitial: false}, scripts);
+      watch(paths.img.all, {ignoreInitial: false}, img);
     }
 
     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));
     }
 
+
+    function img () {
+        return src(paths.img.all).pipe(dest(paths.output));
+    }
+
   exports.default = parallel (server, sentinel);

src/scripts/components/TouristAttractions.js

@@ -71,7 +71,7 @@ export class TouristAttractions {
          addProperty (e) {
         e.preventDefault();
 
-        const spotImg = this.labelInput.querySelector('.img-result');
+        const spotImg = this.labelInput.children[0].src
         const spotTitle = e.target['input-title'].value
         const spotDescription = e.target['input-description'].value
 
@@ -79,7 +79,7 @@ export class TouristAttractions {
         if (this.spotImg != '' && spotTitle != '' && spotDescription != '') {
 
             const spot = {
-                image: spotImg.src,
+                image: spotImg,
                 titulo: spotTitle,
                 description: spotDescription,
             };
@@ -97,8 +97,6 @@ export class TouristAttractions {
 };
 
 
-
-
         renderListItems () {
        let spotStructure = '';
 
@@ -110,7 +108,7 @@ export class TouristAttractions {
                         <img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
                     </div>
 
-                    <div class="result-card__text">
+                    <div class="result-card__text">S
                     <div class="card__h2">
                         <p class="result-card__title">${i.titulo}</p>
                     </div>
@@ -135,4 +133,5 @@ export class TouristAttractions {
         this.labelInput.style.border = "";
     };
 
+
 }

src/templates/index.html

@@ -21,7 +21,7 @@
                     <label class="label-input" for="input__img">
                     </label>
 
-                    <input id="input__img" type="file" data-test="input-image">
+                    <input id="input__img" type="file" accept="image/*" data-test="input-image">
                 </div>
 
                 <div class="wrapper-input__text">
@@ -44,19 +44,14 @@
 
         <div class="container-cards">
 
-            <div class="container-cards__wrapper">
-
                 <ul class="wrapper-ul__cards"></ul>
 
-
-            </div>
-
-
         </div>
 
     </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="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="../scripts/components/slick.min.js"></script>
     <script src="bundle.js"></script>