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.description}
+