feat(app.js): implementa functions para renderizar os items
This commit is contained in:
parent
d93292e8a4
commit
d7dea7ffad
@ -7,6 +7,7 @@ document.addEventListener('DOMContentLoaded', function(){
|
|||||||
const quantityInput = document.querySelector('.shopping-form-quantity-input');
|
const quantityInput = document.querySelector('.shopping-form-quantity-input');
|
||||||
const incrementButton = document.querySelector('.shopping-form-increment-button');
|
const incrementButton = document.querySelector('.shopping-form-increment-button');
|
||||||
const decrementButton = document.querySelector('.shopping-form-decrement-button');
|
const decrementButton = document.querySelector('.shopping-form-decrement-button');
|
||||||
|
const items = document.querySelector('.shopping-items');
|
||||||
|
|
||||||
incrementButton.addEventListener("click", incrementQuantity);
|
incrementButton.addEventListener("click", incrementQuantity);
|
||||||
decrementButton.addEventListener("click", decrementQuantity);
|
decrementButton.addEventListener("click", decrementQuantity);
|
||||||
@ -41,8 +42,29 @@ document.addEventListener('DOMContentLoaded', function(){
|
|||||||
}; //criar objeto com os parametros recebidos
|
}; //criar objeto com os parametros recebidos
|
||||||
|
|
||||||
list.push(item); //adicionar o objeto no array
|
list.push(item); //adicionar o objeto no array
|
||||||
}
|
|
||||||
|
|
||||||
|
renderListItems(); //chamar a funcao que renderiza os itens
|
||||||
|
resetInputs(); //chamar a funcao que reseta os inputs
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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; //adiciona na const items(que é a div), um foreach do itemsstruture
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetInputs(){ //resetar valor inputs
|
||||||
|
itemInput.value = "";
|
||||||
|
quantityInput.value = 1;
|
||||||
}
|
}
|
||||||
})
|
})
|
Loading…
Reference in New Issue
Block a user