From ac7d1ccaebc8c8e5164b95d8bf0cf67fb212299f Mon Sep 17 00:00:00 2001 From: devartes Date: Sat, 19 Nov 2022 07:17:48 -0300 Subject: [PATCH] feat: adicionando javascript --- src/assets/svgs/image-item-list-1.svg | 9 ---- src/assets/svgs/image-item-list-2.svg | 9 ---- src/assets/svgs/image-item-list-3.svg | 9 ---- src/assets/svgs/image-item-list-4.svg | 9 ---- src/assets/svgs/left arrow big.svg | 3 ++ src/assets/svgs/right arrow big.svg | 3 ++ src/scripts/components/form.js | 68 ++++++++++++++++++++++----- src/scripts/components/slider.js | 2 +- src/styles/partials/slider.scss | 10 ++-- src/templates/index.html | 47 ++++-------------- 10 files changed, 77 insertions(+), 92 deletions(-) delete mode 100644 src/assets/svgs/image-item-list-1.svg delete mode 100644 src/assets/svgs/image-item-list-2.svg delete mode 100644 src/assets/svgs/image-item-list-3.svg delete mode 100644 src/assets/svgs/image-item-list-4.svg create mode 100644 src/assets/svgs/left arrow big.svg create mode 100644 src/assets/svgs/right arrow big.svg diff --git a/src/assets/svgs/image-item-list-1.svg b/src/assets/svgs/image-item-list-1.svg deleted file mode 100644 index f6512e9..0000000 --- a/src/assets/svgs/image-item-list-1.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svgs/image-item-list-2.svg b/src/assets/svgs/image-item-list-2.svg deleted file mode 100644 index c9d018a..0000000 --- a/src/assets/svgs/image-item-list-2.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svgs/image-item-list-3.svg b/src/assets/svgs/image-item-list-3.svg deleted file mode 100644 index f7f789c..0000000 --- a/src/assets/svgs/image-item-list-3.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svgs/image-item-list-4.svg b/src/assets/svgs/image-item-list-4.svg deleted file mode 100644 index 0e410ff..0000000 --- a/src/assets/svgs/image-item-list-4.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/svgs/left arrow big.svg b/src/assets/svgs/left arrow big.svg new file mode 100644 index 0000000..94c5dc4 --- /dev/null +++ b/src/assets/svgs/left arrow big.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svgs/right arrow big.svg b/src/assets/svgs/right arrow big.svg new file mode 100644 index 0000000..3632b66 --- /dev/null +++ b/src/assets/svgs/right arrow big.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scripts/components/form.js b/src/scripts/components/form.js index 2782185..f7233b1 100644 --- a/src/scripts/components/form.js +++ b/src/scripts/components/form.js @@ -1,15 +1,61 @@ export class Form { - constructor() {} + constructor() { + this.list = []; + this.selectors(); + this.events(); + } - selectors() {} + selectors() { + 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() {} + 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 += ` +
  • + +

    ${item.title}

    +

    ${item.description}

    +
    • + `; + }); + this.slider.innerHTML = itemsSlider; + } + + resetInputs() { + this.itemInput.value = ""; + } } - -document.querySelector('input').addEventListener('change', e => { - document.querySelector('img').src = URL.createObjectURL(e.target.files[0]); -}); - - - - diff --git a/src/scripts/components/slider.js b/src/scripts/components/slider.js index 50df290..6cb4ead 100644 --- a/src/scripts/components/slider.js +++ b/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, diff --git a/src/styles/partials/slider.scss b/src/styles/partials/slider.scss index cd90587..0552acb 100644 --- a/src/styles/partials/slider.scss +++ b/src/styles/partials/slider.scss @@ -148,18 +148,16 @@ $breakpoint-desk: 2500px; } .slick-prev { - left: -40px; + left: -70px; &:before { - width: 26px; - height: 58px; + content: url("svgs/left arrow big.svg"); } } .slick-next { - right: -40px; + right: -70px; &:before { - width: 26px; - height: 58px; + content: url("svgs/right arrow big.svg"); } } diff --git a/src/templates/index.html b/src/templates/index.html index 0416933..1cba0d1 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -9,27 +9,16 @@ - - - + + +

    Adicionar um Ponto Turístico

    -
    +
    @@ -37,25 +26,10 @@
    - +
    - - + +
    @@ -64,12 +38,9 @@

    Pontos Turísticos

    -
      +
      • -

        Pão de Açúcar