From f481aad592c90dae4b4f415f4e541b58a4b358e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Gabriel?= <=>
Date: Sun, 13 Nov 2022 10:35:37 -0300
Subject: [PATCH] feat(terminei): Feito todas as partes funcionais do shopping
 list

---
 index.html       | 17 ++++++++++------
 scripts/app.js   | 52 +++++++++++++++++++++++++++++++++++++++++-------
 styles/form.css  |  4 ++++
 styles/itens.css | 21 +++++++++++++++++++
 styles/style.css |  1 +
 5 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 1b9312e..b2cbd76 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
                         <label class="shopping-form-label" for="item-name">Item name</label>
                         <input class="shopping-form-item-input" type="text" name="item-name" id="item-name">
                     </div>
-
+ 
                     <div class="shopping-form-quatity-warapper">
                         <button class="shopping-form-quatity-button shopping-form-decrement-button" type="button"></button>
                         <input class="shopping-form-quantity-input" name="item-quatity" type="text" value="1" disabled>
@@ -31,13 +31,18 @@
                 <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>
 
-        <div>
-            <ul>
-                
-            </ul>
-        </div>
+
     </main>
 
     <script src="scripts/app.js"></script>
diff --git a/scripts/app.js b/scripts/app.js
index d4265f9..376fff9 100644
--- a/scripts/app.js
+++ b/scripts/app.js
@@ -1,13 +1,16 @@
 document.addEventListener('DOMContentLoaded', function(){
-    const quantityInput = document.querySelector('.shopping-form-quantity-input');
+ const list = [];
 
+    const quantityInput = document.querySelector('.shopping-form-quantity-input');
     const increment = document.querySelector('.shopping-form-increment-button');
     const decrement = document.querySelector('.shopping-form-decrement-button');
-    const textValue = document.querySelector('.shopping-form-submit-button');
+    const form = document.querySelector('.shopping-form');
+    const itemInput = document.querySelector('.shopping-form-item-input');
+    const items = document.querySelector('.shopping-items')
 
-    increment.addEventListener('click', addIcrement)
-    decrement.addEventListener('click', addDecrement)
-    textValue.addEventListener('click', addTextValue)
+    increment.addEventListener('click', addIcrement);
+    decrement.addEventListener('click', addDecrement);
+    form.addEventListener('submit', addTextValue);
 
     function addIcrement() {
         const valueQuantityInput = Number(quantityInput.value);
@@ -23,14 +26,49 @@ document.addEventListener('DOMContentLoaded', function(){
             }
             
         }
-
+        const ul = document.querySelector('ul')
         const li = createElement('li');
         
 
-    function addTextValue () {
+    function addTextValue(event) {
+        event.preventDefault();
 
+        const itemName = event.target['item-name'].value
+        const itemQuantity = event.target['item-quatity'].value
+        
+        if(itemName != "") {
+            const item = {
+                nome: itemName,
+                quantity: itemQuantity
+            };
+    
+            list.push(item);
+            renderListItems()
+            resetInput()
+        }
     }
 
+    function renderListItems() {
+        let itemStructure = "";
+
+        list.forEach(function (item) {
+            itemStructure += `
+                <li class="shopping-item">
+                    <span>${item.nome}</span>
+                    <span>${item.quantity}</span>
+                </li>
+            `;
+        })
+        items.innerHTML = itemStructure
+    }
+
+
+    function resetInput() {
+        itemInput.value = "";
+        quantityInput.value = 1;
+    }
+
+
     
 
 })
\ No newline at end of file
diff --git a/styles/form.css b/styles/form.css
index 426d764..e4200cc 100644
--- a/styles/form.css
+++ b/styles/form.css
@@ -1,7 +1,11 @@
+.shopping-form {
+    margin-bottom: 32px;
+}
 .shopping-form-inputs {
     display: flex;
     align-items: flex-end;
     margin-bottom: 24px;
+  
 }
 
 .shopping-form-item-wrapper {
diff --git a/styles/itens.css b/styles/itens.css
index e69de29..eaa3a11 100644
--- a/styles/itens.css
+++ b/styles/itens.css
@@ -0,0 +1,21 @@
+.shopping-result {
+    max-width: 416px;
+}
+.shopping-result-head, .shopping-item{
+   display: grid;
+   grid-template-columns: 3fr 1fr;
+   padding: 8px 16px;
+   border-radius: 5px;
+}
+
+.shopping-result-head {
+    background: var(--gray-100);
+}
+
+.shopping-items {
+    list-style: none;
+}
+
+.shopping-item:nth-child(even) {
+    background: var(--gray-100);
+}
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index ec15a98..c7cf3fa 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,6 +1,7 @@
 @import "global.css";
 @import "variables.css";
 @import "form.css";
+@import "itens.css";
 
 .shopping-container {
     max-width: 500px;