[Projeto] Minha solução para esta aula

Com base nas aulas e com bastante dificuldade para realizar os códigos, consegui fazer e entender de forma semelhante ao do professor, fiz algumas anotações que me ajudaram a entender melhor o que fora passado, para pessoas com dificuldade no aprendizado como eu, esta sendo essencial essas anotações.

MAIN.JS

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

// MANTENDO OS ITENS CRIADOS NA PÁGINA, MESMO APÓS ATUALIZAR
itens.forEach( (elemento) => {    
    criaElemento(elemento)
} )

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

    const nome = evento.target.elements['nome']
    const quantidade = evento.target.elements['quantidade']

    // CRIA UM ARRAY PARA NOME E QUANTIDADE
    const itemAtual = {
    "nome": nome.value,
    "quantidade": quantidade.value
    }

    criaElemento(itemAtual)

    itens.push(itemAtual)

    // TRANSFORMA O "ITENS" EM STRING, VISTO QUE O LOCAL STORAGE APENAS ENTENDE ELEMENTOS DE TEXTOS (STRINGS)
    localStorage.setItem("itens", JSON.stringify(itens))

    // DEIXA OS ARRAYS VAZIOS ASSIM QUE UM NOVO ITEM É ADICIONADO
    nome.value = ""
    quantidade.value = ""
})

function criaElemento(item) {  

    // CRIA UMA 'LI' QUE GUARDARÁ OS ITENS
    // DA UMA CLASSE PARA A LI CRIADA 
    const novoItem = document.createElement('li')
    novoItem.classList.add("item")

    // CRIA UM ELEMENTO STRONG PARA A QUANTIDADE
    const numeroItem = document.createElement('strong')

    // FAZ COM QUE O ELEMENTO numeroItem RECEBA A ID DE QUANTIDADE
    // LOGO NA PÁGINA, O numeroItem FICARÁ NO CAMPO DE input QUANTIDADE RECEBENDO O VALOR NUMÉRICO
    numeroItem.innerHTML = item.quantidade

    // o appendChild INFILTRA UM ITEM DENTRO DE OUTRO NO HTML, NESSE CASO COLOCANDO A TAG STRONG DENTRO DA CONST = novoItem
    novoItem.appendChild(numeroItem)

    // FAZ COM QUE O NOME DO ITEM VENHA APÓS O NUMERO
    novoItem.innerHTML += item.nome


        /*OBS: ADICIONE O ID LISTA NO DOCUMENTO HTML PARA FUNCIONAR
    criaremos uma const = lista para armazenar o id 'lista' no HTML, ficando assim:

    const lista = document.getElementById('lista')

    podemos tirar essa const do escopo da função, pois o código abaixo irá chamar essa const lista
    e ela continuará funcionando mesmo fora da function.
    */

    // AQUI SERÁ ADICIONADO TUDO O QUE FOI FEITO ACIMA Á PÁGINA, PARA QUANDO DER O SUBMIT
    // CRIAR UM NOVO ITEM COM A QUANTIDADE E NOME E COM O ESTILO CONFORME O CSS E HTML.
    lista.appendChild(novoItem)
}