From c042c1f52600a9fe12ade18fee71e4af4963d709 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 8 Nov 2022 11:26:57 -0300 Subject: [PATCH 1/3] =?UTF-8?q?feat(index.html):adi=C3=A7=C3=A3o=20do=20ht?= =?UTF-8?q?ml,=20estrutural,=20inicial=20da=20p=C3=A1gina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..8d48003 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + Shopping List + + + + + +
+
+

Shopping List

+ +
+
+
+ + +
+ +
+ + + +
+
+ + +
+
+
+ + \ No newline at end of file From 187196500e5c79b708ded5c6a9059947e6bd3969 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 8 Nov 2022 16:20:47 -0300 Subject: [PATCH 2/3] =?UTF-8?q?feat(practice-time-shopping-list):=20adi?= =?UTF-8?q?=C3=A7=C3=A3o=20das=20pastas=20styles,=20form,=20global,=20main?= =?UTF-8?q?,=20varibles.=20Adicionando=20em=20si=20o=20css=20da=20p=C3=A1g?= =?UTF-8?q?ina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 +- styles/form.css | 89 +++++++++++++++++++++++++++++++++++++++++++++ styles/global.css | 15 ++++++++ styles/main.css | 14 +++++++ styles/varibles.css | 10 +++++ 5 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 styles/form.css create mode 100644 styles/global.css create mode 100644 styles/main.css create mode 100644 styles/varibles.css diff --git a/index.html b/index.html index 8d48003..f2d600b 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - +
@@ -29,7 +29,7 @@
- +
diff --git a/styles/form.css b/styles/form.css new file mode 100644 index 0000000..3aa8d89 --- /dev/null +++ b/styles/form.css @@ -0,0 +1,89 @@ +.shopping-form-inputs{ + display: flex; + align-items: flex-end; + margin-bottom: 24px; +} +.shopping-form-item-wrapper{ + flex: 1; + max-width: 256px; +} + +.shopping-form-label{ + display: block; + margin-bottom: 4px; +} + +.shopping-form-item-input, +.shopping-form-quantity-input{ + width: 100%; + height: 32px; + padding: 0 12px; + border: 1px solid var(--gray-300); + border-radius: 4px; + background: var(--white); +} + +.shopping-form-quatity-wrapper{ + display: flex; + align-items: center; + margin-left: 24px; +} +.shopping-form-quantity-input{ + max-width: 64px; + text-align: center; + margin: 0 4px; +} + +.shopping-form-quantity-button{ + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 32px; + height: 32px; + border: 0; + border-radius: 4px; + background: var(--gray-100); + transition: background-color 0.2s linear; +} + +.shopping-form-quantity-button:hover{ + background: var(--orange-500); +} + +.shopping-form-quantity-button:active{ + background: var(--orange-300); +} + +.shopping-form-quantity-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-color: var(--orange-500); + transition: background-color .2s linear; +} + +.shopping-form-submit-button:hover{ + background-color: var(--orange-300); +} + +.shopping-form-submit-button:active{ + background-color: var(--orange-500); +} \ No newline at end of file diff --git a/styles/global.css b/styles/global.css new file mode 100644 index 0000000..b1f6d1e --- /dev/null +++ b/styles/global.css @@ -0,0 +1,15 @@ +*{ + box-sizing: border-box; + margin: 0; + padding: 0; +} +body, +input, +button{ + font-family: 'Roboto', sans-serif; + font-size: 16px; + color: var(--gray-500); +} +button{ + cursor: pointer; +} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..1730ec8 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,14 @@ +@import "/styles/global.css"; +@import "/styles/varibles.css"; +@import "/styles/form.css"; + +.shopping-container { + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; +} + +.shopping-title{ + margin: 32px 0; + font-size: 32px; +} \ No newline at end of file diff --git a/styles/varibles.css b/styles/varibles.css new file mode 100644 index 0000000..0e39d09 --- /dev/null +++ b/styles/varibles.css @@ -0,0 +1,10 @@ +:root{ + --white:#fff; + --gray-100: #e5e5ee; + --gray-300: #bdbdbd; + --gray-500: #333; + + --orange-300: #f6ad55; + --orange-500: #ed8936; + +} \ No newline at end of file From 55824ba162a899c6c5d0fc877a2a618ca45b9026 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 8 Nov 2022 18:53:12 -0300 Subject: [PATCH 3/3] =?UTF-8?q?feat(practice-time-shopping-list):=20adi?= =?UTF-8?q?=C3=A7=C3=A3o=20das=20pastas=20js,=20com=20o=20arquivo=20app.js?= =?UTF-8?q?,=20implementando=20o=20js=20da=20p=C3=A1gina=20e=20adi=C3=A7?= =?UTF-8?q?=C3=A3o=20de=20mais=20linhas=20nos=20arquivos=20items.css,=20fo?= =?UTF-8?q?rm.css=20e=20no=20main.css,=20implementando=20mais=20um=20pouco?= =?UTF-8?q?=20da=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 += ` +
  • + ${item.name} + ${item.quantity} +
    • + `; + }); + + 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 @@ + +
    +
    + Item + Quantity +
    + +
      +
      + + \ 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;