Mudei o nomes de alguns ids mas esse é meu código
// encontra o formulário
const _form = document.getElementById("formNewItem");
// encontra a lista de itens <ul>
const _ulBagItens = document.getElementById('bagItens');
// array para guardar os itens salvos
let _addedItemsInBag = [];
_form.addEventListener("submit", (evento) => {
evento.preventDefault();
const inputName = evento.target.elements.name;
const inputQty = evento.target.elements.quantity;
// para capturar os valores dos campos do formulário
const newItem = {
name: inputName.value,
qty: inputQty.value
};
saveNewItem(newItem);
addItemInBag(newItem);
clearForm(inputName, inputQty);
});
loadBag();
function saveNewItem(newItem) {
loadFromStorage();
_addedItemsInBag.push(newItem);
// save itens in local storage
localStorage.setItem('items', JSON.stringify(_addedItemsInBag));
}
function loadFromStorage(){
const storagedItems = localStorage.getItem('items');
if (storagedItems != null && storagedItems.length > 0) {
_addedItemsInBag = JSON.parse(storagedItems);
}
}
function loadBag(){
loadFromStorage();
_addedItemsInBag.forEach((item) => {
addItemInBag(item);
});
}
function clearForm(inputName, inputQty) {
inputName.value = '';
inputQty.value = '';
}
function addItemInBag(item){
// cria um novo elemento de lista
const liTag = document.createElement('li');
// adiciona a classe chamada item ao novo item para aplicar o css
liTag.classList.add("item");
// cria uma nova tag <strong>
const strongTag = document.createElement('strong');
// adiciona a quantidade ao conteúdo interno da tag strong
strongTag.innerHTML = item.qty;
// adiciona o elemento <strong> dentro do novo item da lista <li>
liTag.appendChild(strongTag);
// adiciona ao conteúdo interno do HTML o texto 'nome'
liTag.innerHTML += item.name;
// adiciona o novo <li> a lista <ul>
_ulBagItens.appendChild(liTag);
}