1
resposta

[Projeto] Manipulando Dados - Consolidando conhecimento- Exercício 01

Imagem mostrando o add de itens na lista

Não houve muito desafio nesse exercício, somente aplicação do que foi passado em aula:

codigo JS:

const form = document.getElementById('novoItem');
const lista = document.getElementById('lista')


form.addEventListener('submit', (evento) => {
    evento.preventDefault()

    criaElemento(evento.target.elements['nome'].value, evento.target.elements['quantidade'].value)
})

function criaElemento(nome, quantidade) {
    const novoItem = document.createElement('li')
    novoItem.classList.add("item")

    const numeroItem = document.createElement('strong')
    numeroItem.innerHTML = quantidade

    novoItem.appendChild(numeroItem)
    novoItem.innerHTML += nome

    lista.appendChild(novoItem)
}
1 resposta

Oi Neto, tudo bem?

Muito obrigada por compartilhar com a gente o seu código.

O código que você postou é um exemplo de como adicionar novos itens em uma lista no navegador utilizando JavaScript. Ele utiliza o método addEventListener para "escutar" o evento de submissão do formulário e, quando isso acontece, chama a função criaElemento para criar um novo elemento na lista.

A função criaElemento recebe dois parâmetros, nome e quantidade, que são os valores dos campos do formulário. Ela cria um novo elemento li e adiciona a classe item a ele. Depois, cria um elemento strong para exibir a quantidade e adiciona o nome do item ao final.

Por fim, a função adiciona o novo item à lista.

Seu código está bem completo!

Um abraço e bons estudos.