feat: colocando conteúdo do slider com javascript

src/scripts/components/form.js

@@ -1,34 +1,58 @@
 export class Form {
     constructor() {
-        this.list = [];
+
+        this.list = [
+            {
+                src: "imgs/paodeacucar.png",
+                title: "Pão de Açúcar",
+                description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.",
+            },
+            {
+                src: "imgs/cristoredentor.png",
+                title: "Cristo Redentor",
+                description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.",
+            },
+            {
+                src: "imgs/ilhagrande.png",
+                title: "Ilha Grande",
+                description: "Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.",
+            },
+            {
+                src: "imgs/centrohistoricodeparati.png",
+                title: "Centro Histórico de Parati",
+                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();
     }
 
     selectors() {
-        this.image = document.querySelector(".input-image-content");
-        this.itemInput = document.querySelectorAll("div.input-image-container");
+        this.src = document.querySelector(".input-image-content");
         this.form = document.querySelector(".form");
+        this.itemTitle = document.getElementById("titleInput");
+        this.itemDescription = document.getElementById("descriptionText");
         this.slider = document.querySelector(".slider-list");
     }
 
     events() {
-        this.form.addEventListener("submit", this.addItemToList.bind(this));
-        this.image.addEventListener("change", (e) => {
+        this.src.addEventListener("change", (e) => {
             document.querySelector("img").src = URL.createObjectURL(e.target.files[0]);
         });
+        this.form.addEventListener("submit", this.addItemToList.bind(this));
+
     }
 
     addItemToList(event) {
         event.preventDefault();
 
-        const itemImage = event.target["buttonAdicionar"].value.img;
+        const itemImage = event.target["buttonAdicionar"].value.src;
         const itemTitle = event.target["titleInput"].value.title;
         const itemDescription = event.target["descriptionText"].value.description;
 
-        if (itemImage != "") {
+        if (itemImage !== "") {
             const item = {
-                img: itemImage,
+                src: itemImage,
                 title: itemTitle,
                 description: itemDescription,
             };
@@ -46,7 +70,7 @@ export class Form {
         this.list.forEach(function (item) {
             itemsSlider += `
                 <li class="slider-content" data-test="container-item-list">
-                    <img src="${item.img}" alt="" data-test="image-item-list"/>
+                    <img src="${item.src}" alt="" data-test="image-item-list"/>
                     <h3 data-test="title-item-list">${item.title}</h3>
                     <p data-test="description-item-list">${item.description}</p>
                 </li>
@@ -56,6 +80,8 @@ export class Form {
     }
 
     resetInputs() {
-        this.itemInput.value = "";
+        this.src.value = "";
+        this.itemTitle.value = "";
+        this.itemDescription.value = "";
     }
 }

src/styles/partials/slider.scss

@@ -38,8 +38,14 @@ h2 {
                     font-size: 24px;
                     line-height: 28px;
                     color: $title-item-list-color;
-                    height: 60px;
+                    max-height: 60px;
                     margin: 24px 24px 8px 24px;
+                    overflow-y: auto;
+                    -ms-overflow-style: none;
+                    scrollbar-width: none;
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                 }
                 & p {
                     padding: 0 24px 0 24px;

src/templates/index.html

@@ -22,7 +22,7 @@
                     <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" />
+                                <input type="file" accept="image/*" class="input-image-content" id="input-images"/>
                                 <img src="" alt="" />
                             </div>
                             <div class="form-input-descricao">
@@ -38,9 +38,9 @@
                 <div class="slider-container">
                     <h2 data-test="title-list">Pontos Turísticos</h2>
                     <div class="slider">
-                        <ul class="slider-list">
+                        <ul class="slider-list" id="slider-content">
                             <li class="slider-content" data-test="container-item-list">
-                                <img src="imgs/image-item-list-1.png" alt="" data-test="image-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">
@@ -50,7 +50,7 @@
                             </li>
                             <li class="slider-content" data-test="container-item-list">
                                 <img
-                                    src="imgs/image-item-list-2.png"
+                                    src="imgs/cristoredentor.png"
                                     alt=""
                                     data-test="image-item-list"
                                 />
@@ -62,7 +62,7 @@
                             </li>
                             <li class="slider-content" data-test="container-item-list">
                                 <img
-                                    src="imgs/image-item-list-3.png"
+                                    src="imgs/ilhagrande.png"
                                     alt=""
                                     data-test="image-item-list"
                                 />
@@ -74,7 +74,7 @@
                             </li>
                             <li class="slider-content" data-test="container-item-list">
                                 <img
-                                    src="imgs/image-item-list-4.png"
+                                    src="imgs/centrohistoricodeparati.png"
                                     alt=""
                                     data-test="image-item-list"
                                 />
@@ -84,7 +84,7 @@
                                     amet sint. Velit officia consece duis enim velit mollit.
                                 </p>
                             </li>
-                            <li class="slider-content" data-test="container-item-list">
+                            <!-- <li class="slider-content" data-test="container-item-list">
                                 <img
                                     src="imgs/image-item-list-4.png"
                                     alt=""
@@ -95,7 +95,7 @@
                                     Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa
                                     amet sint. Velit officia consece duis enim velit mollit.
                                 </p>
-                            </li>
+                            </li> -->
                         </ul>
                     </div>
                 </div>