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

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));
     }

src/assets/setaDi.svg

@@ -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>

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 += `
-                <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">S
-                    <div class="card__h2">
-                        <p class="result-card__title">${i.titulo}</p>
-                    </div>
-                    <div class="card__p">
-                        <p class="result-card__description">${i.description}</p>
-                    </div>
-                    </div>
-
-                </li>
-            `;
-        });
-
-         this.ulList.innerHTML = spotStructure;
-    };
+            <li class="wrapper-cards__li">
+            <figure class="container-card__img">
+            <img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
+            </figure>
+            <div class="container__text">
+            <h3 class="result-card__title">${i.titulo}</h3>
+            <p class="result-card__description">${i.description}</p>
+            </div>
+                    </li>
+                    `;
+                });
 
 
-        resetInputs () {
-        this.inputTitle.value = '';
-        this.inputDescription.value = '';
-
-        this.labelInput.innerText = this.textLabelInput;
-        this.labelInput.style.border = "";
-    };
+            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.style.border = "";
+
+                this.spanInput.innerText = this.textSpanInput;
+                this.spanInput.style.border = "";
+            };
+
+
+        }

src/styles/partials/form.scss

@@ -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;
@@ -144,57 +152,55 @@
 
   }
 
-  .container-cards {
-    display: flex;
-    padding: 41px 63px;
+    .container-cards {
+        padding:41px 63px;
 
-    .wrapper-ul__cards {
-        display: flex;
-        column-gap: 10px;
+        .wrapper-ul__cards {
+            display: flex;
 
-        .wrapper-cards__li {
-            width: 279px;
+            .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;
 
-            box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
-            border-radius: 8px;
-
-            .result-card__img {
-                object-fit: cover;
-                width: 100%;
-            }
-
-            .result-card__text {
-                margin: 24px;
-
-                .card__h2 {
-                    margin-bottom: 8px;
-                    width: 231px;
-                    height: 60px;
-
-                    font-family: 'Poppins', sans-serif;
-                    font-style: normal;
-                    font-weight: 700;
-                    font-size: 24px;
-                    line-height: 28px;
-                    color: $black-500;
+                    .result-card__img {
+                        width: 100%;
+                    }
                 }
 
-                .card__p {
-                    width: 231px;
-                    height: 96px;
+                .container__text {
+                    margin: 24px;
 
-                    font-family: 'Roboto', sans-serif;
-                    font-style: normal;
-                    font-weight: 400;
-                    font-size: 16px;
-                    line-height: 24px;
-                    color: $grey-500;
+                    .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;
+                    }
+
+                    .result-card__description {
+                        font-family: 'Roboto', sans-serif;
+                        font-style: normal;
+                        font-weight: 400;
+                        font-size: 16px;
+                        line-height: 24px;
+                        color: $grey-500;
+                    }
                 }
 
+
             }
+
+
         }
-
-
     }
-  }

src/templates/index.html

@@ -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>