src/assets/svgs/left arrow big.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="58" viewBox="0 0 26 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.25454e-06 28.8415L25.3707 58L26 53.3516L5.34947 28.8415L26 4.64845L25.3707 -3.2965e-08L4.25454e-06 28.8415Z" fill="#858585"/>
+</svg>

src/assets/svgs/right arrow big.svg

@@ -0,0 +1,3 @@
+<svg width="27" height="59" viewBox="0 0 27 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.6445 29.631L1.27388 0.472534L0.64453 5.12098L21.295 29.631L0.644519 53.8241L1.27387 58.4725L26.6445 29.631Z" fill="#858585"/>
+</svg>

src/scripts/components/form.js

@@ -1,15 +1,61 @@
 export class Form {
-    constructor() {}
+    constructor() {
-
+        this.list = [];
-    selectors() {}
+        this.selectors();
-
+        this.events();
-    events() {}
     }
 
-document.querySelector('input').addEventListener('change', e => {
+    selectors() {
-	document.querySelector('img').src = URL.createObjectURL(e.target.files[0]);
+        this.image = document.querySelector(".input-image-content");
+        this.itemInput = document.querySelectorAll("div.input-image-container");
+        this.form = document.querySelector(".form");
+        this.slider = document.querySelector(".slider-list");
+    }
+
+    events() {
+        this.form.addEventListener("submit", this.addItemToList.bind(this));
+        this.image.addEventListener("change", (e) => {
+                document.querySelector("img").src = URL.createObjectURL(e.target.files[0]);
             });
+    }
 
+    addItemToList(event) {
+        event.preventDefault();
 
+        const itemImage = event.target["buttonAdicionar"].value.img;
+        const itemTitle = event.target["titleInput"].value.title;
+        const itemDescription = event.target["descriptionText"].value.description;
 
+        if (itemImage != "") {
+            const item = {
+                img: itemImage,
+                title: itemTitle,
+                description: itemDescription,
+            };
 
+            this.list.push(item);
+
+            this.renderListItems();
+            this.resetInputs();
+        }
+    }
+
+    renderListItems() {
+        let itemsSlider = "";
+
+        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"/>
+                    <h3 data-test="title-item-list">${item.title}</h3>
+                    <p data-test="description-item-list">${item.description}</p>
+                </li>
+            `;
+        });
+        this.slider.innerHTML = itemsSlider;
+    }
+
+    resetInputs() {
+        this.itemInput.value = "";
+    }
+}

src/scripts/components/slider.js

@@ -6,7 +6,7 @@ export class Slider {
     events() {}
 }
 
-$(".slider-info").slick({
+$(".slider-list").slick({
     infinite: true,
     slidesToShow: 4,
     slidesToScroll: 1,

src/styles/partials/slider.scss

@@ -148,18 +148,16 @@ $breakpoint-desk: 2500px;
     }
 
     .slick-prev {
-        left: -40px;
+        left: -70px;
         &:before {
-            width: 26px;
+            content: url("svgs/left arrow big.svg");
-            height: 58px;
         }
     }
 
     .slick-next {
-        right: -40px;
+        right: -70px;
         &:before {
-            width: 26px;
+            content: url("svgs/right arrow big.svg");
-            height: 58px;
         }
     }
 

src/templates/index.html

@@ -9,27 +9,16 @@
 
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
-            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
-            rel="stylesheet"
+        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.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="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
-        />
         <link rel="stylesheet" href="main.css" />
     </head>
     <body>
         <main>
             <section class="container">
                 <h1 data-test="title-form">Adicionar um Ponto Turístico</h1>
-                <form>
+                <form class="form">
                     <div class="form-container">
                         <div class="form-inputs">
                             <div class="input-image-container" data-test="input-image">
@@ -37,25 +26,10 @@
                                 <img src="" alt="" />
                             </div>
                             <div class="form-input-descricao">
-                                <input
+                                <input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
-                                    type="text"
-                                    placeholder="Título"
-                                    data-test="input-titulo"
-                                    class="input-titulo"
-                                    name="item-title"
-                                />
                                 <div class="description-content">
-                                    <textarea
+                                    <textarea id="descriptionText" placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
-                                        placeholder="Descrição"
+                                    <button id="buttonAdicionar" class="buttonSubmit" type="submit" data-test="button-submit">Adicionar</button>
-                                        class="input-descricao"
-                                        data-test="input-descricao"
-                                        name="item-description"
-                                        rows="10"
-                                        cols="30"
-                                    ></textarea>
-                                    <button type="submit" data-test="button-submit">
-                                        Adicionar
-                                    </button>
                                 </div>
                             </div>
                         </div>
@@ -64,12 +38,9 @@
                 <div class="slider-container">
                     <h2 data-test="title-list">Pontos Turísticos</h2>
                     <div class="slider">
-                        <ul class="slider-info">
+                        <ul class="slider-list">
                             <li class="slider-content" data-test="container-item-list">
-                                <img
+                                <img src="imgs/image-item-list-1.png" alt="" data-test="image-item-list"
-                                    src="imgs/image-item-list-1.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">