From 2e572bc7add294a26915808f6dd9a5d759000b34 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 9 Nov 2022 18:17:11 -0300 Subject: [PATCH 1/6] docs: Cria estrutura base HTML --- index.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..35cf94a --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + Shopping List + + + + + + + \ No newline at end of file From 114e4a5be915a2ff88978a1137d5b2d9da53d8f0 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 9 Nov 2022 18:30:11 -0300 Subject: [PATCH 2/6] =?UTF-8?q?feat(main):=20Adiciona=20se=C3=A7=C3=A3o=20?= =?UTF-8?q?de=20formul=C3=A1rio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/index.html b/index.html index 35cf94a..bb6ac7a 100644 --- a/index.html +++ b/index.html @@ -15,5 +15,29 @@ +
+
+

+ Shopping List +

+ +
+
+
+ + +
+ +
+ + + +
+
+ + +
+
+
\ No newline at end of file From 7d91a7edf7eb7e8c2c23de95ffb9d5944e854307 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 9 Nov 2022 21:21:08 -0300 Subject: [PATCH 3/6] feat: Adiciona CSS --- index.html | 4 +- styles/form.css | 90 ++++++++++++++++++++++++++++++++++++++++++++ styles/global.css | 17 +++++++++ styles/main.css | 14 +++++++ styles/variables.css | 10 +++++ 5 files changed, 134 insertions(+), 1 deletion(-) create mode 100644 styles/form.css create mode 100644 styles/global.css create mode 100644 styles/main.css create mode 100644 styles/variables.css diff --git a/index.html b/index.html index bb6ac7a..f7f95aa 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,8 @@ Shopping List + + @@ -30,7 +32,7 @@
- +
diff --git a/styles/form.css b/styles/form.css new file mode 100644 index 0000000..3dc4edf --- /dev/null +++ b/styles/form.css @@ -0,0 +1,90 @@ +.shopping-form-inputs { + display: flex; + 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-quantity-wrapper { + display: flex; + align-items:flex-end; + 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; + 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: var(--orange-500); + 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/global.css b/styles/global.css new file mode 100644 index 0000000..d0414f8 --- /dev/null +++ b/styles/global.css @@ -0,0 +1,17 @@ +* { + 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..103007e --- /dev/null +++ b/styles/main.css @@ -0,0 +1,14 @@ +@import "global.css"; +@import "variables.css"; +@import "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/variables.css b/styles/variables.css new file mode 100644 index 0000000..266856c --- /dev/null +++ b/styles/variables.css @@ -0,0 +1,10 @@ +:root { + --white: #FFFFFF; + + --gray-100: #E5E5E5; + --gray-300: #BDBDBD; + --gray-500: #333333; + + --orange-300: #F6AD55; + --orange-500: #ED8936; +} \ No newline at end of file From 306240594f32488d327daaee0abb4fa6a0312bb9 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 10 Nov 2022 01:09:12 -0300 Subject: [PATCH 4/6] feat(main): Adiciona div para resultado dos itens e script --- index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/index.html b/index.html index f7f95aa..d4ebf36 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,18 @@ + +
+
+ Item + Quantity +
+ +
    +
    + + \ No newline at end of file From cbb8e32ab69455737059a76a8e70e83f0f2f272c Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 10 Nov 2022 01:12:41 -0300 Subject: [PATCH 5/6] feat: Adiciona Script --- scripts/app.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 scripts/app.js diff --git a/scripts/app.js b/scripts/app.js new file mode 100644 index 0000000..0a1df62 --- /dev/null +++ b/scripts/app.js @@ -0,0 +1,69 @@ +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) + + 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; + } + } + + 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 From 3b669b21a1d7a026886926ed402c1737124f1b4e Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 10 Nov 2022 01:36:18 -0300 Subject: [PATCH 6/6] feat: Adiciona CSS nos itens adicionados na lista --- styles/form.css | 4 ++++ styles/items.css | 22 ++++++++++++++++++++++ styles/main.css | 1 + 3 files changed, 27 insertions(+) create mode 100644 styles/items.css diff --git a/styles/form.css b/styles/form.css index 3dc4edf..4c71028 100644 --- a/styles/form.css +++ b/styles/form.css @@ -1,3 +1,7 @@ +.shopping-form { + margin-bottom: 32px; +} + .shopping-form-inputs { display: flex; margin-bottom: 24px; diff --git a/styles/items.css b/styles/items.css new file mode 100644 index 0000000..1e7dcd1 --- /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 103007e..71e6607 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,6 +1,7 @@ @import "global.css"; @import "variables.css"; @import "form.css"; +@import "items.css"; .shopping-container { max-width: 1200px;