From abc20e2fb449813bfaf5d47f63d5244157f97412 Mon Sep 17 00:00:00 2001 From: RodrigoJorge Date: Tue, 15 Nov 2022 10:40:35 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20cria=C3=A7=C3=A3o=20de=20shopping=20lis?= =?UTF-8?q?t?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 45 +++++++++++++++++++++ scripts/app.js | 62 +++++++++++++++++++++++++++++ styles/form.css | 94 ++++++++++++++++++++++++++++++++++++++++++++ styles/global.css | 17 ++++++++ styles/items.css | 22 +++++++++++ styles/main.css | 15 +++++++ styles/variables.css | 11 ++++++ 7 files changed, 266 insertions(+) create mode 100644 index.html create mode 100644 scripts/app.js create mode 100644 styles/form.css create mode 100644 styles/global.css create mode 100644 styles/items.css create mode 100644 styles/main.css create mode 100644 styles/variables.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..7d7be99 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + Shopping List + + + +
+
+

Shopping List

+
+
+
+ + +
+
+ + + +
+
+ + +
+
+
+ Item + Quantity +
+ +
    +
    +
    +
    + + + + \ No newline at end of file diff --git a/scripts/app.js b/scripts/app.js new file mode 100644 index 0000000..2c37799 --- /dev/null +++ b/scripts/app.js @@ -0,0 +1,62 @@ +document.addEventListener('DOMContentLoaded', function(){ + const list = []; + const form = document.querySelector(".shopping-form"); + const itemInput = document.querySelector(".shopping-form-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 decrementQuantity(){ + const currentValue = Number(quantityInput.value); + const newValue = currentValue - 1; + if(newValue > 0){ + quantityInput.value = newValue; + } + } + + function incrementQuantity() { + const currentValue = Number(quantityInput.value); + const newValue = currentValue + 1; + + 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 itemStructure = ""; + list.forEach(function (item){ + itemStructure += ` +
  • + ${item.name} + ${item.quantity} +
    • ` + }); + items.innerHTML = itemStructure; + }; + function resetInputs(){ + itemInput.value = ""; + quantityInput.value = 1; + } +}) \ No newline at end of file diff --git a/styles/form.css b/styles/form.css new file mode 100644 index 0000000..55d947d --- /dev/null +++ b/styles/form.css @@ -0,0 +1,94 @@ +.shopping-form-inputs{ + display: flex; + align-items: flex-end; + margin-bottom: 24px; +} +.shopping-form{ + margin-bottom: 32px; +} + +.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: 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: backgroun-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..2e4c33c --- /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/items.css b/styles/items.css new file mode 100644 index 0000000..8fc701a --- /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 new file mode 100644 index 0000000..7c42818 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,15 @@ +@import "global.css"; +@import "variables.css"; +@import "form.css"; +@import "items.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..291b2d5 --- /dev/null +++ b/styles/variables.css @@ -0,0 +1,11 @@ +:root { + --white: #ffffff; + + --gray-100: #e5e5e5; + --gray-300:#bdbdbd; + --gray-500: #333333; + + --orange-300: #f6ad55; + --orange-500: #ed8936; + +} \ No newline at end of file