1
resposta

[Projeto] Segue o código do projeto para analise e auxílio/evolução

Segue o código para evolução ou sugestões:

const form = document.getElementById("novoItem");
const listPage = document.getElementById("lista");
const itens = JSON.parse(localStorage.getItem("itens")) || [];


itens.forEach(element => {
    if(element != null)
        createElementHTML(element)
});

form.addEventListener("submit", (event) => {
    event.preventDefault();
    const nome = event.target.elements['nome'];
    const quantidade = event.target.elements['quantidade'];

    fillPage(nome.value.trim(), quantidade.value);

    nome.value = "";
    quantidade.value = "";
});

function updateElementHTML(obj){
    const txt = `[data-id='${obj.id}']`;
    document.querySelector(txt).innerHTML = obj.quantidade;
}

function createElementHTML(obj){
    const liTag = document.createElement('li');
    liTag.classList.add('item');

    const strongTag = document.createElement('strong');
    strongTag.innerHTML = obj.quantidade;
    strongTag.dataset.id = obj.id;

    liTag.appendChild(strongTag);
    liTag.innerHTML += obj.nome;
    liTag.appendChild(createBtnDelHTML());

    listPage.appendChild(liTag);
}

function createBtnDelHTML(){
    const btn = document.createElement('button');
    btn.innerText = 'X';
    btn.addEventListener("click", function (){
       removeItem(this);
    });
    return btn;
}

function fillPage(nome, quantidade){
    let index = containsObj(nome);
    if(index > -1){
        updateItem(nome, quantidade, index);
    }else{
        insertItem(nome, quantidade);
    }
    createLocalStorage();
}

function insertItem(nome, quantidade){
    const obj = {'nome':nome, 'quantidade':quantidade, 'id':itens.length};
    itens.push(obj);
    createElementHTML(obj);
}

function updateItem(nome, quantidade, index){
    const obj = {'nome':nome, 'quantidade':quantidade, 'id':index};
    itens.splice(index, 1, obj);
    updateElementHTML(obj);
}

function removeItem(el){
    const parent = el.parentNode;
    let id = parent.firstChild.getAttribute('data-id');
    itens.splice(id, 1, null);
    parent.remove();
    createLocalStorage();
}

//Existe a função "findIndex(el => el.nome == nome)" 
function containsObj(nome){
    const values = itens.map(el => el.nome.toLowerCase()) || [];
    return values.indexOf(nome.toLowerCase());
}

function createLocalStorage(){
    localStorage.setItem('itens', JSON.stringify(itens));
}
1 resposta
const form = document.getElementById("novoItem");
const listPage = document.getElementById("lista");
const itens = JSON.parse(localStorage.getItem("itens")) || [];

//Aqui faz a mesma coisa só simplifiquei;
itens.forEach(element => element != null && createElementHTML(element));

form.addEventListener("submit", (event) => {
    event.preventDefault();
    const nome = event.target.elements['nome'];
    const quantidade = event.target.elements['quantidade'];

    // Adicionei um trim() em quantidade.value
    fillPage(nome.value.trim(), quantidade.value.trim());

    // Isso reseta todos os campos de um formulário
    form.reset();
});

function updateElementHTML(obj){
    // Para ficar mais legível mudei aqui
    const text = document.querySelector(`[data-id='${obj.id}']`);
    text.innerHTML = obj.quantidade;
}

function createElementHTML(obj){

    const liTag = document.createElement('li');
    liTag.classList.add('item');

    const strongTag = document.createElement('strong');
    strongTag.innerHTML = obj.quantidade;
    strongTag.dataset.id = obj.id;

    liTag.appendChild(strongTag);
    liTag.innerHTML += obj.nome;
    liTag.appendChild(createBtnDelHTML());

    listPage.appendChild(liTag);
}

function createBtnDelHTML(){
    const btn = document.createElement('button');
    btn.innerText = 'X';
    btn.addEventListener("click", function (){
       removeItem(this);
    });
    return btn;
}

function fillPage(nome, quantidade){
    let index = containsObj(nome);
    if(index > -1){
        updateItem(nome, quantidade, index);
    }else{
        insertItem(nome, quantidade);
    }
    createLocalStorage();
}

function insertItem(nome, quantidade){
    const obj = {'nome':nome, 'quantidade':quantidade, 'id':itens.length};
    itens.push(obj);
    createElementHTML(obj);
}

function updateItem(nome, quantidade, index){
    const obj = {'nome':nome, 'quantidade':quantidade, 'id':index};
    itens.splice(index, 1, obj);
    updateElementHTML(obj);
}

function removeItem(el){
    const parent = el.parentNode;
    let id = parent.firstChild.getAttribute('data-id');
    itens.splice(id, 1, null);
    parent.remove();
    createLocalStorage();
}

//Existe a função "findIndex(el => el.nome == nome)" 
function containsObj(nome){
    const values = itens.map(el => el.nome.toLowerCase()) || [];
    return values.indexOf(nome.toLowerCase());
}

function createLocalStorage(){
    localStorage.setItem('itens', JSON.stringify(itens));
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software