feat(js): adiciona as funções de javascript a pagina

index.html

@@ -20,7 +20,7 @@
     <main>
       <section class="shopping-container">
         <h2 class="shopping-title">Shopping List</h2>
-        <form class="shopping-from">
+        <form class="shopping-form">
           <div class="shopping-form-inputs">
             <div class="shopping-form-item-wrapper">
               <label class="shopping-form-label" for="">Item name</label>
@@ -38,10 +38,11 @@
                 class="shopping-from-quantity-button shopping-form-decrement-button"
                 type="button"
               >
-                +
+                -
               </button>
               <input
                 class="shopping-form-quantity-input"
+                id="item-quantity"
                 name="item-quantity"
                 type="text"
                 placeholder="1"
@@ -52,7 +53,7 @@
                 class="shopping-from-quantity-button shopping-form-increment-button"
                 type="button"
               >
-                -
+                +
               </button>
             </div>
           </div>
@@ -61,7 +62,16 @@
             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,67 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const list = []
+
+    const form = document.querySelector('.shopping-form');
+    const itemInput = document.querySelector('.shopping-form-item-input')
+    const quantifyInput = 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(quantifyInput.value);
+        const newValue = currentValue + 1;
+
+        quantifyInput.value = newValue;
+    }
+
+    function decrementQuantity() {
+        const currentValue = Number(quantifyInput.value);
+        const newValue = currentValue - 1;
+
+        if (newValue > 0) {
+            quantifyInput.value = newValue;
+        }
+    }
+
+    function addItemToList(event) {
+        event.preventDefault();
+
+        const itemName = event.target["item-name"].value;
+        const itemQuantify = event.target["item-quantity"].value
+
+        if (itemName !== "") {
+            const item = {
+                name: itemName,
+                quantity: itemQuantify
+            }
+            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 = "";
+        quantifyInput.value = 1;
+    }
+})