From f7ba9fb2bc2981698da53c25293c4f89582a968b Mon Sep 17 00:00:00 2001
From: Wender Azevedo <wenderazevedo28@gmail.com>
Date: Wed, 9 Nov 2022 23:24:52 -0300
Subject: [PATCH] Projeto finalizado.

---
 app.js           | 45 +++++++++++++++++++++++++++++++++++++++++++++
 index.html       |  9 +++++++++
 styles/form.css  |  3 +++
 styles/items.css | 22 ++++++++++++++++++++++
 styles/main.css  |  1 +
 5 files changed, 80 insertions(+)
 create mode 100644 styles/items.css

diff --git a/app.js b/app.js
index 02ff6a5..534201d 100644
--- a/app.js
+++ b/app.js
@@ -1,10 +1,16 @@
 document.addEventListener("DOMContentLoaded", function() {
+    const list = [];
+    
+    const form = document.querySelector(".shopping-form");
+    const itemInput = document.querySelector(".shopping-form-item-input");
     const quantityInput = document.querySelector(".shopping-form-quantity-input");
     const incrementButton = document.querySelector(".shopping-form-increment-button");
     const decrementButton = document.querySelector(".shopping-form-decrement-button");
+    const items = document.querySelector(".shopping-items");
 
     incrementButton.addEventListener("click", incrementQuantity);
     decrementButton.addEventListener("click", decrementQuantity);
+    form.addEventListener("submit", addItemToList);
 
     function incrementQuantity() {
         const currentValue = Number(quantityInput.value);
@@ -22,4 +28,43 @@ document.addEventListener("DOMContentLoaded", function() {
         }
         
     }
+
+    function addItemToList(event) {
+        event.preventDefault();
+
+        const itemName = event.target["item-name"].value;
+        const itemQuantity = event.target["item-quantity"].value;
+
+        if(itemName != "") {
+            const item = {
+                name: itemName,
+                quantity: itemQuantity, 
+            };
+    
+            list.push(item);
+            
+            renderListItems();
+            resetInputs();
+        }
+    }
+    
+    function renderListItems() {
+        let itemsStructure = "";
+    
+        list.forEach(function (item) {
+            itemsStructure += `
+                <li class="shopping-item">
+                    <span>${item.name}</span>
+                    <span>${item.quantity}</span>
+                </li>
+            `;
+        });
+
+        items.innerHTML = itemsStructure;
+    }
+
+    function resetInputs() {
+        itemInput.value = "";
+        quantityInput.value = 1;
+    }
 });
\ No newline at end of file
diff --git a/index.html b/index.html
index 272aa70..706b783 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,15 @@
 
                     <button class="shopping-form-submit-button" type="submit">Add to list</button>
                 </form>
+
+                <div class="shopping-result">
+                    <div class="shopping-result-head">
+                        <strong>Item</strong>
+                        <strong>Quantity</strong>
+                    </div>
+
+                    <ul class="shopping-items"></ul>
+                </div>
             </section>
         </main>
 
diff --git a/styles/form.css b/styles/form.css
index 93ddd1e..34b0c39 100644
--- a/styles/form.css
+++ b/styles/form.css
@@ -1,3 +1,6 @@
+.shopping-form {
+    margin-bottom: 32px;
+}
 .shopping-form-inputs {
     display: flex;
     align-items: flex-end;
diff --git a/styles/items.css b/styles/items.css
new file mode 100644
index 0000000..1134260
--- /dev/null
+++ b/styles/items.css
@@ -0,0 +1,22 @@
+.shopping-result {
+    max-width: 416px;
+}
+
+.shopping-result-head,
+.shopping-item {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    padding: 8px 16px;
+}
+
+.shopping-result-head {
+    background: var(--gray-100);
+}
+
+.shopping-item {
+    list-style: none;
+}
+
+.shopping-item:nth-child(even) {
+    background: var(--gray-100);
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index b786cb9..03cef1b 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,6 +1,7 @@
 @import "global.css";
 @import "variables.css";
 @import "form.css";
+@import "items.css";
 
 .shopping-container {
     max-width: 1200px;