ThiagoDutraSampaioLeite/practice-time-shopping-list
1
0
Fork 0
forked from M3-Academy/practice-time-shopping-list
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature' (#8) from feature into main

Browse Source 
Reviewed-on: #8
This commit is contained in:
ThiagoDutraSampaioLeite 2022-11-14 14:36:28 +00:00
commit 53ef019c0d
21 changed files with 8142 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.editorconfig Normal file
View File

@ -0,0 +1,13 @@
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = crlf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
dist
node_modules

29
gulpfile.js Normal file
View File

@ -0,0 +1,29 @@
const { src, dest, watch } = require("gulp");
const sass = require("gulp-sass")(
require("sass")
);
function style() {
return src("src/style/main.scss")
.pipe(
sass({
outputStyle: "compressed",
}).on("error", sass.logError)
)
.pipe(dest("dist"));
// chamar o caminho do arquivo, conectar com o pipe, chama o gulp, e chama o dest para os arquivos finais
}
//Para fazer tudo automaticamente
function sentinel() {
//quais arquivos serão observados (), um objeto com algumas confifurações e depois a função que será executada
watch(
"src/style/*.scss",
{
ignoreInitial: false,
},
style
);
}
exports.sentinel = sentinel;

45
index.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<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 rel="stylesheet" href="style/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">Item name</label>
<input id="item-name" class="shopping-form-item-input" name="item-name" type="text" />
</div>
<div class="shopping-form-quantity-wrapper">
<button class="shopping-form-quantity-button shopping-form-decrement-button"
type="button"></button>
<input class="shopping-form-quantity-input" name="item-quantity" type="text" value="1"
disabled />
<button class="shopping-form-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="main.js"></script>
</body>
</html>

68
main.js
View File

@ -1,68 +0,0 @@
document.addEventListener("DOMContentLoaded", () => {
const list = [];
const form = document.querySelector(".shopping-form");
const inputItem = document.querySelector(".shopping-form-item-input");
const quantityInput = document.querySelector(".shopping-form-quantity-input");
const incrementBtn = document.querySelector(
".shopping-form-increment-button"
);
const decrementBtn = document.querySelector(
".shopping-form-decrement-button"
);
const items = document.querySelector(".shopping-items");
incrementBtn.addEventListener("click", increment);
decrementBtn.addEventListener("click", decrement);
form.addEventListener("submit", addItemToList);
function increment() {
const currentValue = Number(quantityInput.value);
const newValue = currentValue + 1;
quantityInput.value = newValue;
}
function decrement() {
const currentValue = Number(quantityInput.value);
const newValue = currentValue - 1;
if (newValue > 0) {
quantityInput.value = newValue;
}
}
function addItemToList(e) {
e.preventDefault();
const itemName = e.target["item-name"].value; /* name do input */
const itemQuantity = e.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 += `
<li class="shopping-item">
<span>${item.name}</span>
<span>${item.quantity}</span>
</li>
`;
});
items.innerHTML = itemsStructure;
}
function resetInputs() {
inputItem.value = "";
quantityInput.value = 1;
}
});

7804
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
package.json Normal file
View File

@ -0,0 +1,21 @@
{
"name": "practice-time-shopping-list",
"version": "1.0.0",
"description": "To make it easy for you to get started with GitLab, here's a list of recommended next steps.",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "gulp sentinel"
},
"repository": {
"type": "git",
"url": "ssh://git@gitea.ecommercetools.com.br:22022/ThiagoDutraSampaioLeite/practice-time-shopping-list.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-sass": "^5.1.0",
"sass": "^1.56.1"
}
}

57
public/index.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<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 rel="stylesheet" href="../dist/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">Item name</label>
<input
id="item-name"
class="shopping-form-item-input"
name="item-name"
type="text"
/>
</div>
<div class="shopping-form-quantity-wrapper">
<button
class="shopping-form-quantity-button shopping-form-decrement-button"
type="button"
></button>
<input
class="shopping-form-quantity-input"
name="item-quantity"
type="text"
value="1"
disabled
/>
<button
class="shopping-form-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="main.js"></script>
</body>
</html>

64
src/scripts/main.js Normal file
View File

@ -0,0 +1,64 @@
document.addEventListener("DOMContentLoaded", () => {
const list = [];
const form = document.querySelector(".shopping-form");
const inputItem = document.querySelector(".shopping-form-item-input");
const quantityInput = document.querySelector(".shopping-form-quantity-input");
const incrementBtn = document.querySelector(".shopping-form-increment-button");
const decrementBtn = document.querySelector(".shopping-form-decrement-button");
const items = document.querySelector(".shopping-items");
incrementBtn.addEventListener("click", increment);
decrementBtn.addEventListener("click", decrement);
form.addEventListener("submit", addItemToList);
function increment() {
const currentValue = Number(quantityInput.value);
const newValue = currentValue + 1;
quantityInput.value = newValue;
}
function decrement() {
const currentValue = Number(quantityInput.value);
const newValue = currentValue - 1;
if (newValue > 0) {
quantityInput.value = newValue;
}
}
function addItemToList(e) {
e.preventDefault();
const itemName = e.target["item-name"].value; /* name do input */
const itemQuantity = e.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 += `
<li class="shopping-item">
<span>${item.name}</span>
<span>${item.quantity}</span>
</li>
`;
});
items.innerHTML = itemsStructure;
}
function resetInputs() {
inputItem.value = "";
quantityInput.value = 1;
}
});

11
src/style/common/global.scss Normal file
View File

@ -0,0 +1,11 @@
body,
input,
button {
font-family: "Roboto", sans-serif;
font-size: 16px;
color: $gray-500;
}
button {
cursor: pointer;
}

5
src/style/common/reset.scss Normal file
View File

@ -0,0 +1,5 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

10
src/style/main.scss Normal file
View File

@ -0,0 +1,10 @@
@import "utils/variables.scss";
@import "common/reset.scss";
@import "common/global.scss";
@import "partials/container.scss";
@import "partials/form.scss";
@import "partials/items.scss";
@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap";

10
src/style/partials/container.scss Normal file
View File

@ -0,0 +1,10 @@
.shopping-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
.shopping-title {
margin: 32px 0;
font-size: 32px;
}
}

84
src/style/partials/form.scss Normal file
View File

@ -0,0 +1,84 @@
.shopping-form {
margin-bottom: 32px;
.shopping-form-inputs {
display: flex;
align-items: flex-end;
margin-bottom: 24px;
.shopping-form-item-wrapper {
flex: 1; /*A div ocupe todo espaço disponível, fazendo que o outro elemento vá para o final*/
max-width: 256px;
.shopping-form-label {
display: block;
margin-bottom: 3px;
}
}
.shopping-form-item-input,
.shopping-form-quantity-input {
width: 100%;
height: 32px;
padding: 0 12px;
border: 1px solid $gray-300;
border-radius: 4px;
background: $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: none;
border-radius: 4px;
transition: background-color 0.2s linear;
background: $gray-100;
&:hover {
background: $orange-500;
}
&:active {
background: $orange-300;
}
}
.shopping-form-quantity-button::before,
.shopping-form-increment-button::after {
content: "";
position: absolute;
width: 16px;
height: 4px;
border-radius: 4px;
background: $white;
}
.shopping-form-increment-button {
&::after {
transform: rotate(90deg);
}
}
}
}
.shopping-form-submit-button {
max-width: 128px;
width: 100%;
height: 32px;
border: none;
border-radius: 4px;
color: $white;
font-weight: 700;
background: $orange-500;
transition: background-color 0.2s linear;
&:hover {
background: $orange-300;
}
&:active {
background: $orange-500;
}
}
}

22
src/style/partials/items.scss Normal file
View File

@ -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: $gray-100;
}
.shopping-items {
list-style: none;
/*intercalar com os pares*/
.shopping-item {
&:nth-child(even) {
background: $gray-100;
}
}
}
}

10
src/style/utils/variables.scss Normal file
View File

@ -0,0 +1,10 @@
// Colors
$white: #fff;
$gray-100: #e5e5e5;
$gray-300: #bdbdbd;
$gray-500: #333;
$orange-300: #f6ad55;
$orange-500: #ed8936;

96
style/form.css
View File

@ -1,96 +0,0 @@
.shopping-form {
margin-bottom: 32px;
}
.shopping-form-inputs {
display: flex;
align-items: flex-end;
margin-bottom: 24px;
}
.shopping-form-item-wrapper {
flex: 1; /*A div ocupe todo espaço disponível, fazendo que o outro elemento vá para o final*/
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: none;
border-radius: 4px;
transition: background-color 0.2s linear;
background: var(--gray-100);
}
.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 {
max-width: 128px;
width: 100%;
height: 32px;
border: none;
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);
}

17
style/global.css
View File

@ -1,17 +0,0 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body,
input,
button {
font-family: "Roboto", sans-serif;
font-size: 16px;
color: var(--gray-500);
}
button {
cursor: pointer;
}

23
style/items.css
View File

@ -1,23 +0,0 @@
.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;
}
/*intercalar com os pares*/
.shopping-item:nth-child(even) {
background: var(--gray-100);
}

16
style/main.css
View File

@ -1,16 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("global.css");
@import url("variables.css");
@import url("form.css");
@import url("items.css");
.shopping-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.shopping-title {
margin: 32px 0;
font-size: 32px;
}

10
style/variables.css
View File

@ -1,10 +0,0 @@
:root {
--white: #fff;
--gray-100: #e5e5e5;
--gray-300: #bdbdbd;
--gray-500: #333;
--orange-300: #f6ad55;
--orange-500: #ed8936;
}