feat: Implementa o javascript na pagina

This commit is contained in:
Filipe Quintanilha Evangelista 2022-11-08 11:57:03 -03:00
parent 7a3a7fe4a6
commit ea86a5c37d
5 changed files with 108 additions and 0 deletions

View File

@ -37,7 +37,18 @@
<button class="shopping-form-submit-button" type="submit">Add to list</button> <button class="shopping-form-submit-button" type="submit">Add to list</button>
</form> </form>
<div class="shopping-result">
<div class="shopping-result-head">
<strong>Item</strong>
<strong>Quantity</strong>
</div>
<ul class="shopping-items"></ul>
</div>
</section> </section>
</main> </main>
<script src="scripts/app.js"></script>
</body> </body>
</html> </html>

71
scripts/app.js Normal file
View File

@ -0,0 +1,71 @@
document.addEventListener('DOMContentLoaded', function(){
const list = [];
const form = document.querySelector('.shopping-form');
const itemInput = document.querySelector('.shopping-form-item-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 incrementQuantity() {
const currentValue = Number(quantityInput.value);
const newValue = currentValue + 1;
quantityInput.value = newValue;
}
function decrementQuantity(){
const currentValue = Number(quantityInput.value);
const newValue = currentValue - 1;
if(newValue > 0){
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 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 = "";
quantityInput.value = 1;
}
});

View File

@ -1,3 +1,6 @@
.shopping-form{
margin-bottom: 32px;
}
.shopping-form-inputs{ .shopping-form-inputs{
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;

22
styles/items.css 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: var(--gray-100);
}
.shopping-item{
list-style: none;
}
.shopping-item:nth-child(even){
background: var(--gray-100);
}

View File

@ -1,6 +1,7 @@
@import "global.css"; @import "global.css";
@import "variables.css"; @import "variables.css";
@import "form.css"; @import "form.css";
@import "items.css";
.shopping-container{ .shopping-container{
max-width: 1200px; max-width: 1200px;