Feat(Finalizado): Finalizado o to list

index.html

@@ -20,13 +20,23 @@
 
                     <div class="shopping-form-quantity-wrapper">
                         <button class="shopping-form-quatity-button shopping-form-decrement-button" type="button"></button>
-                        <input class="shopping-for-quantity-input" aria-multiline="item-quatity" type="text" value="1" disabled>
+                        <input class="shopping-for-quantity-input" name="item-quatity" type="text" value="1" disabled>
                         <button class="shopping-form-quatity-button shopping-form-increment-button" type="button"></button>
                     </div>
                 </div>
                 <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,66 @@
+document.addEventListener('DOMContentLoaded',function(){
+    const list = [];
+
+    const form = document.querySelector('.shopping-form');
+    const itemImput = document.querySelector('.shopping-form-item-input')
+    const quatityinput = document.querySelector('.shopping-for-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(quatityinput.value);
+        const newValue = currentValue + 1;
+
+        quatityinput.value = newValue
+
+    }
+    function decrementQuantity(){
+        const currentValue = Number(quatityinput.value);
+        const newValue = currentValue - 1;
+        if(newValue > 0){
+            quatityinput.value = newValue
+        }
+        
+    }
+    function addItemToList(event) {
+        event.preventDefault();
+
+        const itemName = event.target['item-name'].value;
+        const itemQuantity = event.target['item-quatity'].value;
+
+        if(itemName != ''){
+            const item = {
+                name: itemName,
+                quantity: itemQuantity,
+            }
+            list.push(item);
+
+            renderListItens();
+            resetInputs();
+        }
+        
+    }
+
+    function renderListItens(){
+        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(){
+        itemImput.value = '';
+        quatityinput.value = 1;
+
+    }
+})

styles/form.css

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

styles/itens.css

@@ -0,0 +1,20 @@
+.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);
+    border-radius: 8px;
+}
+.shopping-item {
+    list-style: none;
+}
+.shopping-item:nth-child(even) {
+    background-color: var(--gray-100);
+    border-radius: 8px;
+}   

styles/style.css

@@ -1,11 +1,12 @@
 @import "global.css";
 @import "variables.css";
 @import "form.css";
-
+@import "itens.css";
 .shopping-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding:  0 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 .shopping-title {