Merge pull request 'feat(logica) Implementacao da logica em JS' (#1) from feature/shopping-list into development

Reviewed-on: #1

index.html

@@ -40,7 +40,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>
     </main>
+
+    <script src="scripts/app.js"></script>
 </body>
 </html>

scripts/app.js

@@ -0,0 +1,79 @@
+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)
+
+    // BOTOES DE + e -
+    function incrementQuantity() {
+        const currentValue = Number(quantityInput.value);
+        const newValue = currentValue + 1;
+
+        quantityInput.value = newValue;
+    }
+
+    function decrementQuantity() {
+        const currentValue = Number(quantityInput.value);
+        const newValue = currentValue - 1;
+
+        if(newValue > 0){
+            quantityInput.value = newValue;
+        }
+    }
+
+    // SUBMIT 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();
+        }
+    }
+
+    // RENDER LIST
+    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;
+    }
+
+    // Resetar inputs
+    function resetInputs() {
+        console.log(itemInput)
+        //itemInput.value = "";
+        //quantityInput.value = 1;
+    }
+
+        
+});

styles/form.css

@@ -1,3 +1,6 @@
+.shopping-form {
+    margin-bottom: 32px;
+}
 .shopping-form-inputs{
     display: flex;
     align-items: flex-end;

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);
+}

styles/main.css

@@ -1,6 +1,7 @@
 @import "global.css";
 @import "variables.css";
 @import "form.css";
+@import "items.css";
 
 .shopping-container{
     max-width: 1200px;