feat(css): adiciona css dos resultados

feat(js): adiciona as funções de javascript a pagina
feat(style): adiciona style a pagina
2022-11-09 21:22:11 -03:00 · 2022-11-09 21:13:24 -03:00 · 2022-11-09 20:15:19 -03:00 · 2022-11-09 19:10:56 -03:00
7 changed files with 288 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Shopping List</title>
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles/main.css" />
+  </head>
+  <body>
+    <main>
+      <section class="shopping-container">
+        <h2 class="shopping-title">Shopping List</h2>
+        <form class="shopping-form">
+          <div class="shopping-form-inputs">
+            <div class="shopping-form-item-wrapper">
+              <label class="shopping-form-label" for="">Item name</label>
+              <input
+                class="shopping-form-item-input"
+                id="item-name"
+                type="text"
+                placeholder="Name"
+                name="item-name"
+              />
+            </div>
+
+            <div class="shopping-form-quantity-wrapper">
+              <button
+                class="shopping-from-quantity-button shopping-form-decrement-button"
+                type="button"
+              >
+                -
+              </button>
+              <input
+                class="shopping-form-quantity-input"
+                id="item-quantity"
+                name="item-quantity"
+                type="text"
+                placeholder="1"
+                value="1"
+                disabled
+              />
+              <button
+                class="shopping-from-quantity-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>
--- a/scripts/app.js
+++ b/scripts/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 quantifyInput = 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(quantifyInput.value);
+        const newValue = currentValue + 1;
+
+        quantifyInput.value = newValue;
+    }
+
+    function decrementQuantity() {
+        const currentValue = Number(quantifyInput.value);
+        const newValue = currentValue - 1;
+
+        if (newValue > 0) {
+            quantifyInput.value = newValue;
+        }
+    }
+
+    function addItemToList(event) {
+        event.preventDefault();
+
+        const itemName = event.target["item-name"].value;
+        const itemQuantify = event.target["item-quantity"].value
+
+        if (itemName !== "") {
+            const item = {
+                name: itemName,
+                quantity: itemQuantify
+            }
+            list.push(item);
+            renderListItems();
+            resetInputs();
+        }
+    }
+
+    function renderListItems() {
+        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() {
+        itemInput.value = "";
+        quantifyInput.value = 1;
+    }
+})
--- a/styles/form.css
+++ b/styles/form.css
@ -0,0 +1,80 @@
+.shopping-form {
+  margin-bottom: 32px;
+}
+
+.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-quantity-wrapper {
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+}
+
+.shopping-form-quantity-input {
+  max-width: 64px;
+  text-align: center;
+  margin: 0 4px;
+}
+
+.shopping-from-quantity-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 4px;
+  background: var(--gray-100);
+}
+
+.shopping-from-quantity-button:hover {
+  background: var(--orange-500);
+}
+
+.shopping-from-quantity-button:active {
+  background: var(--orange-300);
+}
+
+.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.2 linear;
+}
+
+.shopping-form-submit-button:hover {
+  background: var(--orange-300);
+}
+
+.shopping-form-submit-button:active {
+  background: var(--orange-500);
+}
--- a/styles/global.css
+++ b/styles/global.css
@ -0,0 +1,17 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body,
+input,
+button {
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  color: var(--gray-500);
+}
+
+button {
+  cursor: pointer;
+}
--- a/styles/items.css
+++ 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(event) {
+  background: var(--gray-100);
+}
--- a/styles/main.css
+++ 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;
+}
--- a/styles/variables.css
+++ 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;
+}
Author	SHA1	Message	Date
amanda almeida	e68ad13ada	feat(css): adiciona css dos resultados	2022-11-09 21:22:11 -03:00
amanda almeida	588bd0d584	feat(js): adiciona as funções de javascript a pagina	2022-11-09 21:13:24 -03:00
amanda almeida	fe4bc2329f	feat(style): adiciona style a pagina	2022-11-09 20:15:19 -03:00
amanda almeida	4f6db2b868	feat(form): Adiciona o form da pagina html	2022-11-09 19:10:56 -03:00