diff --git a/index.html b/index.html index 0fea818..4e6c5c2 100644 --- a/index.html +++ b/index.html @@ -8,35 +8,8 @@ -
-
-

Shopping List

-
-
-
- - -
- -
- - - -
-
- -
- -
-
- Item - Quantity -
-
    -
    -
    -
    - + + \ No newline at end of file diff --git a/scripts/app.js b/scripts/app.js index ee4b75e..e69de29 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -1,66 +0,0 @@ -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 += ` -
  • - ${item.name} - ${item.quantity} -
    • - ` - }); - items.innerHTML = itemsStructure; - } - - function resetInputs(){ - itemImput.value = ''; - quatityinput.value = 1; - - } -}) \ No newline at end of file diff --git a/styles/form.css b/styles/form.css index 577ee29..e69de29 100644 --- a/styles/form.css +++ b/styles/form.css @@ -1,80 +0,0 @@ -.shopping-form{ - margin-bottom: 32px; -} -.shopping-form-inputs { - display: flex; - margin-bottom: 24px; - align-items: flex-end; -} -.shopping-for-item-wrapper { - flex: 1; - max-width: 256px; -} -.shopping-for-label { - display: block; - margin-bottom: 4px; -} -.shopping-form-item-input, .shopping-for-quantity-input { - width: 100%; - height: 32px; - padding: 0 12px; - border: 1px solid var(--gray-300); - border-radius: 4px; - background-color: var(--white); -} -.shopping-form-quantity-wrapper { - display: flex; - align-items: center; - margin-left: 24px; -} -.shopping-for-quantity-input { - max-width: 64px; - text-align: center; - margin: 0 4px - -} -.shopping-form-quatity-button { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border: 0; - border-radius: 4px; - background: var(--gray-100); - transition: background-color 0.2s linear; -} -.shopping-form-quatity-button:hover { - background: var(--orange-5500); -} -.shopping-form-quatity-button:active { - background: var(--orange-300); -} -.shopping-form-quatity-button::before, .shopping-form-increment-button::after { - content: ''; - position: absolute; - width: 16px; - height: 4px; - border-radius: 4px; - background: var(--white); -} -.shopping-form-increment-button::after { - transform: rotate(90deg); -} -.shopping-form-submit-button{ - width: 100%; - max-width: 128px; - height: 32px; - border: 0; - border-radius: 4px; - color: var(--white); - font-weight: 700; - background: var(--orange-5500); - transition: background-color 0.2s linear; -} -.shopping-form-submit-button:hover{ - background: var(--orange-300); -} -.shopping-form-submit-button:active{ - background: var(--orange-500); -} \ No newline at end of file diff --git a/styles/itens.css b/styles/itens.css index 51c496c..e69de29 100644 --- a/styles/itens.css +++ b/styles/itens.css @@ -1,20 +0,0 @@ -.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; -} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 2ad540b..e69de29 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,15 +0,0 @@ -@import "global.css"; -@import "variables.css"; -@import "form.css"; -@import "itens.css"; -.shopping-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.shopping-title { - margin: 32px 0; - font-size: 32px; -} \ No newline at end of file diff --git a/styles/variables.css b/styles/variables.css index 983b369..e69de29 100644 --- a/styles/variables.css +++ b/styles/variables.css @@ -1,11 +0,0 @@ -:root { - --white: #ffffff; - - --gray-100: #e5e5e5; - --gray-300: #bdbdbd; - --gray-500: #333333; - - --orange-300: #f6ad55; - --orange-5500: #ed8936; - -} \ No newline at end of file