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

Apaguei para aprender

Browse Source
This commit is contained in:
Vinícius Gabriel 2022-11-12 15:04:04 -03:00
parent 8d50dda3be
commit f1eca3c967
6 changed files with 2 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -8,34 +8,7 @@
<link rel="stylesheet" href="./styles/style.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-for-item-wrapper">
<label class="shopping-for-label" for="item-name">Item name</label>
<input class="shopping-form-item-input" type="text" id="item-name" name="item-name">
</div>
<div class="shopping-form-quantity-wrapper">
<button class="shopping-form-quatity-button shopping-form-decrement-button" type="button"></button>
<input class="shopping-for-quantity-input" name="item-quatity" type="text" value="1" disabled>
<button class="shopping-form-quatity-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>

66
scripts/app.js
View File

@ -1,66 +0,0 @@
document.addEventListener('DOMContentLoaded',function(){
const list = [];
const form = document.querySelector('.shopping-form');
const itemImput = document.querySelector('.shopping-form-item-input')
const quatityinput = document.querySelector('.shopping-for-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(quatityinput.value);
const newValue = currentValue + 1;
quatityinput.value = newValue
}
function decrementQuantity(){
const currentValue = Number(quatityinput.value);
const newValue = currentValue - 1;
if(newValue > 0){
quatityinput.value = newValue
}
}
function addItemToList(event) {
event.preventDefault();
const itemName = event.target['item-name'].value;
const itemQuantity = event.target['item-quatity'].value;
if(itemName != ''){
const item = {
name: itemName,
quantity: itemQuantity,
}
list.push(item);
renderListItens();
resetInputs();
}
}
function renderListItens(){
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(){
itemImput.value = '';
quatityinput.value = 1;
}
})

80
styles/form.css
View File

@ -1,80 +0,0 @@
.shopping-form{
margin-bottom: 32px;
}
.shopping-form-inputs {
display: flex;
margin-bottom: 24px;
align-items: flex-end;
}
.shopping-for-item-wrapper {
flex: 1;
max-width: 256px;
}
.shopping-for-label {
display: block;
margin-bottom: 4px;
}
.shopping-form-item-input, .shopping-for-quantity-input {
width: 100%;
height: 32px;
padding: 0 12px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background-color: var(--white);
}
.shopping-form-quantity-wrapper {
display: flex;
align-items: center;
margin-left: 24px;
}
.shopping-for-quantity-input {
max-width: 64px;
text-align: center;
margin: 0 4px
}
.shopping-form-quatity-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-quatity-button:hover {
background: var(--orange-5500);
}
.shopping-form-quatity-button:active {
background: var(--orange-300);
}
.shopping-form-quatity-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-5500);
transition: background-color 0.2s linear;
}
.shopping-form-submit-button:hover{
background: var(--orange-300);
}
.shopping-form-submit-button:active{
background: var(--orange-500);
}

20
styles/itens.css
View File

@ -1,20 +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);
border-radius: 8px;
}
.shopping-item {
list-style: none;
}
.shopping-item:nth-child(even) {
background-color: var(--gray-100);
border-radius: 8px;
}

15
styles/style.css
View File

@ -1,15 +0,0 @@
@import "global.css";
@import "variables.css";
@import "form.css";
@import "itens.css";
.shopping-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.shopping-title {
margin: 32px 0;
font-size: 32px;
}

11
styles/variables.css
View File

@ -1,11 +0,0 @@
:root {
--white: #ffffff;
--gray-100: #e5e5e5;
--gray-300: #bdbdbd;
--gray-500: #333333;
--orange-300: #f6ad55;
--orange-5500: #ed8936;
}