feat(home):Enviando o arquivo

2022-12-04 20:21:40 -03:00 · 2022-12-04 20:21:40 -03:00 · fcec955431
commit fcec955431
parent e7f704f8e7
6 changed files with 208 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<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="shopp-container">
+        <h2 class="shopp-title">Shopping List</h2>
+        <form class="shopping-form" action="">
+            <div class="shopping-form-inputs">
+                <div class="shopping-form--item-wrapper">
+                    <label class="shopping-form-label" for="item-name">Item name</label>
+                    <input class="shopping-form-item-input" id="item-name"
+                     type="text" name="item-name">
+                </div>
+
+                <div class="shopping-form-quantity-wrapper">
+                    <button class="shopping-form-quantity-button decremente-button" 
+                    type="button"></button>
+                    <input class="shopping-form-quality-input" type="text" name="item-qualitity" id="" value="1" disabled/>
+                    <button class="shopping-form-quantity-button incremente-button" 
+                    type="button"></button>
+                </div>
+            </div>
+            <button class="shopping-form-submit-button" type="submit">Add to list</button>
+        </form>
+    </section>
+</main>
+<script src="./script/app.js"></script>
+</body>
+
+</html>
--- a/script/app.js
+++ b/script/app.js
@ -0,0 +1,38 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const lista = []
+    const form = document.querySelector("shopping-form");
+    const itenInput = document.querySelector("shopping-form-item-input");
+  const qualitityInput = document.querySelector(".shopping-form-quality-input");
+  const incrementeButton = document.querySelector(".incremente-button");
+  const decrementeButton = document.querySelector(".decremente-button");
+
+  incrementeButton.addEventListener("click", incrementeQuantity);
+  decrementeButton.addEventListener("click", decrementeQuantity);
+  form.addEventListener("submit", addItemToList);
+
+  function incrementeQuantity() {
+    const currentValue = Number(qualitityInput.value);
+    const newValue = currentValue + 1;
+
+    qualitityInput.value = newValue;
+  }
+
+  function decrementeQuantity() {
+     const currentValue = Number(qualitityInput.value);
+    const newValue = currentValue - 1;
+    
+    if (newValue > 0) {
+      qualitityInput.value = newValue;
+    }
+  }
+
+function addItemToList(event){
+    event.preventDefault();
+
+    const itemName = event.target["item-name"].value;
+
+    console.log(itemName);
+
+}
+
+});
--- a/styles/form.css
+++ b/styles/form.css
@ -0,0 +1,85 @@
+.shopping-form-inputs{
+    display: flex;
+    margin-bottom: 24px;
+    align-items: flex-end;
+}
+
+.shopping-form--item-wrapper{
+    flex:1;
+    max-width: 256px;
+}
+
+.shopping-form-label{
+    display: block;
+    margin-bottom: 4px;
+}
+
+.shopping-form-item-input,
+.shopping-form-quality-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-quality-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: backgroud-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,
+.incremente-button::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 4px;
+    border-radius: 4px;
+    background-color: var(--white);
+}
+
+.incremente-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-300);
+}
+.shopping-form-submit-button:hover{
+    background: var(--orange-500);
+}
--- a/styles/global.css
+++ b/styles/global.css
@ -0,0 +1,16 @@
+*{
+    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;
+}
--- a/styles/main.css
+++ b/styles/main.css
@ -0,0 +1,15 @@
+@import "global.css";
+@import "variables.css";
+@import "form.css";
+
+.shopp-container{
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+.shopp-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;
+}