From 55824ba162a899c6c5d0fc877a2a618ca45b9026 Mon Sep 17 00:00:00 2001
From: Gabriel Ferraz <gabrielferraznog@gmail.com>
Date: Tue, 8 Nov 2022 18:53:12 -0300
Subject: [PATCH] =?UTF-8?q?feat(practice-time-shopping-list):=20adi=C3=A7?=
 =?UTF-8?q?=C3=A3o=20das=20pastas=20js,=20com=20o=20arquivo=20app.js,=20im?=
 =?UTF-8?q?plementando=20o=20js=20da=20p=C3=A1gina=20e=20adi=C3=A7=C3=A3o?=
 =?UTF-8?q?=20de=20mais=20linhas=20nos=20arquivos=20items.css,=20form.css?=
 =?UTF-8?q?=20e=20no=20main.css,=20implementando=20mais=20um=20pouco=20da?=
 =?UTF-8?q?=20estiliza=C3=A7=C3=A3o=20na=20p=C3=A1gina?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Js/app.js        | 67 ++++++++++++++++++++++++++++++++++++++++++++++++
 index.html       | 11 ++++++++
 styles/form.css  |  4 +++
 styles/items.css | 22 ++++++++++++++++
 styles/main.css  |  1 +
 5 files changed, 105 insertions(+)
 create mode 100644 Js/app.js
 create mode 100644 styles/items.css

diff --git a/Js/app.js b/Js/app.js
new file mode 100644
index 0000000..fae8c5b
--- /dev/null
+++ b/Js/app.js
@@ -0,0 +1,67 @@
+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", incremetQuantity);
+    decrementButton.addEventListener("click", decremetQuantity);
+    form.addEventListener('submit', addItemToList);
+
+    function incremetQuantity() {
+        const currentValue = Number(quantityInput.value);
+        const newValue = currentValue +1;
+        quantityInput.value = newValue;
+    }
+
+    function decremetQuantity(){
+        const currentValue = Number(quantityInput.value);
+        const newValue = currentValue -1; 
+        if(newValue>0){
+            quantityInput.value = newValue;
+        }
+    }
+    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 f2d600b..58b5b11 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,18 @@
 
                     <button class="shopping-form-submit-button" type="submit">Add to list</button>
                 </form>
+
+                <div class="shopping-ressult">
+                    <div class="shopping-result-head">
+                        <strong>Item</strong>
+                        <strong>Quantity</strong>
+                    </div>
+
+                    <ul class="shopping-items"></ul>
+                </div>
             </section>
         </main>
+
+        <script src="/Js/app.js"></script>
     </body> 
 </html>
\ No newline at end of file
diff --git a/styles/form.css b/styles/form.css
index 3aa8d89..b3d9fd3 100644
--- a/styles/form.css
+++ b/styles/form.css
@@ -1,3 +1,7 @@
+
+.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..b16fd5a
--- /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-items{
+    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 1730ec8..f6cfc6a 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,6 +1,7 @@
 @import "/styles/global.css";
 @import "/styles/varibles.css";
 @import "/styles/form.css";
+@import "/styles/items.css";
 
 .shopping-container {
     max-width: 1200px;