[Sugestão] Inserir Tags

Ao me deparar com erro ao tentar fazer a atividade da aula de inserir tags ao projeto do curso, percebi que ao clicar em "enter" no teclado simplesmente não adicionava nada, e a tela atualizava. Logicamente algo não estava certo, e percebi um possível problema no código da aula (Aula inserir tags - modulo 03 Manipulando tags), o código JS estava assim:

...

const inputTags = document.getElementById("input-tags");
const listaTags = document.getElementById("lista-tags");

inputTags.addEventListener("keypress", (evento) => {
if (evento.key === "Enter") {
evento.preventDefault();
const tagTexto = inputTags.value.trim();
if (tagTexto !== "") {
const tagNova = document.createElement("li");
tagNova.innerHTML = <p>${tagTexto}</p> <img src="./img/close-black.svg" class="remove-tag">
listaTags.appendChild(tagNova);
inputTags.value = "";
}
}
})

E ao usar uma IA para me ajudar a encontrar possíveis erros, o Gemini me apontou duas coisas importantes:

1 - o evento padrão de um formulario ao apertar enter no teclado é justamente de submeter o mesmo e atualizar a tela, por isso o evento.preventDefault(). Mas segundo a IA, esse método não estava ocorrendo a tempo, ao realizar o evento Keypress e posteriormente evitar o comportamento padrão. A sugestão foi substituir "keypress" por "keydown", pois segundo a sugestão, este parâmetro impede isso.

2 - Trocar const listaTags = document.getElementById("lista-tags"); por
const listaTags = document.querySelector(".lista-tags");
Isto é necessário pois ao analisar o HTML, na linha 79, o elemento "ul" está usando uma "class" e não um "id"

Funciounou ! Apesar de saber os riscos envolvidos em usar ferramentas de IA como o copilot e gemini, neste caso especifico, foi a forma mais eficiente de achar o erro, aprender outras coisas valiosas (quando usar keypress, keydown, keyup...) e prosseguir com as aulas.