refactor: removendo erros do javascript

.editorconfig

@@ -1,13 +1,13 @@
 # EditorConfig is awesome: https://EditorConfig.org
 
 # top-most EditorConfig file
-root = true
+# root = true
 
-[*]
+# [*]
-indent_style = space
+# indent_style = space
-indent_size = 4
+# indent_size = 4
-end_of_line = lf
+# end_of_line = lf
-charset = utf-8
+# charset = utf-8
-trim_trailing_whitespace = true
+# trim_trailing_whitespace = true
-insert_final_newline = true
+# insert_final_newline = true
-max_line_length = 100
+# max_line_length = 100

src/scripts/app.js

@@ -1,8 +1,5 @@
 import {Form} from "./components/form";
-import {Slider} from "./components/slider";
-
 
 document.addEventListener("DOMContentLoaded",function(){
     new Form();
-    new Slider();
 });

src/scripts/components/form.js

@@ -25,32 +25,52 @@ export class Form {
         ];
         this.selectors();
         this.events();
+        this.renderListItems();
+        if (window.innerWidth > 1024){
+            this.addSlick();
+        }
     }
 
     selectors() {
-        this.preview = document.querySelector(".input-image-content");
+        this.inputImage = document.querySelector("#inputImage");
-        this.form = document.querySelector("form");
+        this.imagePreview = document.getElementsByClassName("image");
+        this.form = document.querySelector(".form");
         this.itemTitle = document.querySelector("#titleInput");
         this.itemDescription = document.querySelector("#descriptionText");
         this.slider = document.querySelector(".slider-list");
     }
 
     events() {
-        this.preview.addEventListener("change", (e) => {
+        this.inputImage.addEventListener("change", this.addImage.bind(this), false);
-            document.querySelector("img").src = URL.createObjectURL(e.target.files[0]);
-        });
         this.form.addEventListener("submit", this.addItemToList.bind(this));
+    }
 
+    addImage(event){
+        const inputFile = event.target;
+        const file = inputFile.files[0];
+        if (file){
+            const reader = new FileReader();
+            reader.addEventListener("load", (imagem) => {
+                const readerTarget = imagem.target;
+                const img = document.createElement("img");
+                img.src = readerTarget.result;
+                img.classList.add("image");
+                this.imagePreview[0].innerHTML = "";
+                this.imagePreview[0].appendChild(img);
+            });
+            reader.readAsDataURL(file);
+        } else{
+            this.imagePreview[0].innerHTML;
+        }
     }
 
     addItemToList(event) {
         event.preventDefault();
+        const itemImage = this.imagePreview[0].children[0].src;       
+        const itemTitle = event.target["titleInput"].value;
+        const itemDescription = event.target["descriptionText"].value;
        
-        const itemImage = event.target["buttonAdicionar"].value.src;
+        if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") {
-        const itemTitle = event.target["titleInput"].value.title;
-        const itemDescription = event.target["descriptionText"].value.description;
-
-        if (itemImage !== "") {
             const item = {
             src: itemImage,
             title: itemTitle,
@@ -60,8 +80,15 @@ export class Form {
         this.list.push(item);
 
         this.renderListItems();
+        if (window.innerWidth > 1024){
+            this.removeSlick();
+        }
+        if (window.innerWidth > 1024){
+            this.addSlick();
+        }
         this.resetInputs();
         }
+               
     }
 
     renderListItems() {
@@ -70,17 +97,32 @@ export class Form {
         this.list.forEach(function (item) {
             itemsSlider += `
                 <li class="slider-content" data-test="container-item-list">
-                    <img src="${item.src}" alt="" data-test="image-item-list"/>
+                    <figure><img src="${item.src}" alt="" data-test="image-item-list"/></figure>
                     <h3 data-test="title-item-list">${item.title}</h3>
-                    <p data-test="description-item-list">${item.description}</p>
+                    <figcaption data-test="description-item-list">${item.description}</figcaption>
                 </li>
             `;
         });
         this.slider.innerHTML = itemsSlider;
     }
 
+    addSlick () {       
+        $(".slider-list").slick({
+            infinite: true,
+            slidesToShow: 4,
+            slidesToScroll: 1,
+            variableWidth: true,
+            arrows: true,
+            dots: true,
+        });
+    }
+
+    removeSlick () {
+        $(".slider-list").slick('unslick');
+    }
+
     resetInputs() {
-        this.preview.value = "";
+        this.imagePreview[0].innerHTML = "";
         this.itemTitle.value = "";
         this.itemDescription.value = "";
     }

src/scripts/components/slider.js

@@ -1,50 +0,0 @@
-export class Slider {
-    constructor() {}
-
-    selectors() {}
-
-    events() {}
-}
-
-$(".slider-list").slick({
-    infinite: true,
-    slidesToShow: 4,
-    slidesToScroll: 4,
-    variableWidth: true,
-    arrows: true,
-    dots: true,
-    responsive: [
-        {
-            breakpoint: 1024,
-            settings: {
-                slidesToShow: 4,
-                slidesToScroll: 4,
-                infinite: true,
-                dots: false,
-                arrows: false,
-                vertical: true,
-                verticalScrolling: false,
-                swipe: false,
-                variableWidth: true,
-                draggable: false,
-
-
-            }
-        },
-        {
-            breakpoint: 375,
-            settings: {
-                slidesToShow: 4,
-                slidesToScroll: 4,
-                infinite: true,
-                dots: false,
-                arrows: false,
-                vertical: true,
-                verticalScrolling: false,
-                swipe: false,
-                variableWidth: true,
-                draggable: false
-            }
-        },
-    ],
-});

src/styles/partials/form.scss

@@ -128,7 +128,7 @@ $breakpoint-desk: 2500px;
     }
 
     form {
-        width: 65.6909%;
+        width: 60.072%;
         height: 416px;
         .form-container {
             .form-inputs {

src/styles/partials/slider.scss

@@ -47,7 +47,7 @@ h2 {
                         display: none;
                     }
                 }
-                & p {
+                & figcaption {
                     padding: 0 24px 0 24px;
                     font-weight: 400;
                     font-size: 16px;
@@ -142,7 +142,7 @@ $breakpoint-desk: 2500px;
                         line-height: 56px;
                         height: 120px;
                     }
-                    & p {
+                    & figcaption {
                         font-weight: 400;
                         font-size: 32px;
                         line-height: 48px;
@@ -212,7 +212,7 @@ $breakpoint-tablet: 1024px;
                     & h3 {
                         color: $title-item-list-color;
                     }
-                    & p {
+                    & figcaption {
                         padding: 0 24px 24px 24px;
                         &::-webkit-scrollbar {
                             display: none;
@@ -268,7 +268,7 @@ $breakpoint-mobile: 375px;
                     & h3 {
                         color: $title-item-list-color;
                     }
-                    & p {
+                    & figcaption {
                         padding: 0 24px 24px 24px;
                         &::-webkit-scrollbar {
                             display: none;

src/templates/index.html

@@ -18,18 +18,18 @@
         <main>
             <section class="container">
                 <h1 data-test="title-form">Adicionar um Ponto Turístico</h1>
-                <form>
+                <form class="form"  runat="server">
                     <div class="form-container">
                         <div class="form-inputs">
                             <div class="input-image-container" data-test="input-image">
-                                <input type="file" accept="image/*" class="input-image-content"/>
+                                 <label for="filearea"><span class="image"></span></label>
-                                <img src="" alt="preview da imagem" />
+                                <input type="file" accept="image/*" class="input-image-content" name="filearea"  id="inputImage" />                             
                             </div>
                             <div class="form-input-descricao">
                                 <input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
                                 <div class="description-content">
                                     <textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
-                                    <button id="buttonAdicionar" class="buttonSubmit" type="submit" data-test="button-submit">Adicionar</button>
+                                    <button id="buttonAdicionar" class="buttonSubmit" type="submit" name="submitInformation" data-test="button-submit">Adicionar</button>
                                 </div>
                             </div>
                         </div>
@@ -39,51 +39,6 @@
                     <h2 data-test="title-list">Pontos Turísticos</h2>
                     <div class="slider">
                         <ul class="slider-list" id="slider-content">                          
-                            <li class="slider-content" data-test="container-item-list">
-                                <img src="imgs/paodeacucar.png" alt="" data-test="image-item-list"
-                                />
-                                <h3 data-test="title-item-list">Pão de Açúcar</h3>
-                                <p data-test="description-item-list">
-                                    Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa
-                                    amet sint. Velit officia consece duis enim velit mollit.
-                                </p>
-                            </li>
-                            <li class="slider-content" data-test="container-item-list">
-                                <img
-                                    src="imgs/cristoredentor.png"
-                                    alt=""
-                                    data-test="image-item-list"
-                                />
-                                <h3 data-test="title-item-list">Cristo Redentor</h3>
-                                <p data-test="description-item-list">
-                                    Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa
-                                    amet sint. Velit officia consece duis enim velit mollit.
-                                </p>
-                            </li>
-                            <li class="slider-content" data-test="container-item-list">
-                                <img
-                                    src="imgs/ilhagrande.png"
-                                    alt=""
-                                    data-test="image-item-list"
-                                />
-                                <h3 data-test="title-item-list">Ilha Grande</h3>
-                                <p data-test="description-item-list">
-                                    Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa
-                                    amet sint. Velit officia consece duis enim velit mollit.
-                                </p>
-                            </li>
-                            <li class="slider-content" data-test="container-item-list">
-                                <img
-                                    src="imgs/centrohistoricodeparati.png"
-                                    alt=""
-                                    data-test="image-item-list"
-                                />
-                                <h3 data-test="title-item-list">Centro Histórico de Paraty</h3>
-                                <p data-test="description-item-list">
-                                    Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa
-                                    amet sint. Velit officia consece duis enim velit mollit.
-                                </p>
-                            </li>
                         </ul>
                     </div>
                 </div>