Dúvida - função de busca não funciona

Olá Bruno! Tudo ok contigo?

Primeiro, devo dizer que você vai precisar usar uma versão mais antiga do Json-Server para fazer o curso, isso tendo em vista que a versão mais atual ainda possui algumas instabilidades, portanto vamos usar uma versão mais antiga e estável.

Portanto, abra o console onde o servidor Json está rodando e pare ele, depois use esse comando nele:

npm install -g json-server@0.17.4

Feito isso, agora você vai arrumar o erro "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')" que é o erro indicado no console, ele é originado na linha 61 do arquivo "mostrarVideos.js". Esse erro indica que você está tentando acessar a propriedade addEventListener de algo que é null. No seu código, a linha 61 está relacionada ao uso de addEventListener e à função excluirVideo. Parece que o elemento formularioExcluir (que é o elemento no qual você está tentando adicionar um event listener) pode estar sendo retornado como null.

Vamos verificar a linha 61 no seu código:

formularioExcluir.addEventListener("submit", evento => excluirVideo(evento));

O erro sugere que formularioExcluir é null. Isso pode acontecer se o elemento com o atributo data-formulario-remover não estiver presente no seu HTML ou se *o script está sendo executado antes que o DOM seja totalmente carregado.

Certifique-se de que:

1. O elemento com o atributo data-formulario-remover está presente no seu HTML.

   Eu verifiquei isso, e ele está presente, então o problema não é esse, mas fique atento a isso em ocasiões futuras.

2. O script está sendo executado após o carregamento completo do DOM.

   Esse sim é o problema, junto com a versão o Json-Server, esse era o outro problema, portanto a solução está abaixo:

Para garantir que o script seja executado após o carregamento do DOM, você pode envolver o código em um evento DOMContentLoaded. Modifique seu código da seguinte maneira:

document.addEventListener("DOMContentLoaded", () => {
    const formularioExcluir = document.querySelector("[data-formulario-remover]");

    async function excluirVideo(evento) {
        // ... (restante do código)
    }

    formularioExcluir.addEventListener("submit", evento => excluirVideo(evento));

    // Restante do seu código...
});

Isso garantirá que o código dentro da função seja executado apenas após o carregamento completo do DOM. Certifique-se de ajustar a estrutura do seu código de acordo com essa sugestão.

Era isso, se precisar eu estarei por aqui!

Abraços e bons estudos.

Boa tarde, muito obrigado pela ajuda.

Realizei as alterações porém o erro persiste após adicionar o vídeo e voltar a tela inicial:

Estou encontrando um erro também ao excluir um vídeo:

Poderia me ajudar novamente??

Você adicionou isso no seu código:

document.addEventListener("DOMContentLoaded", () => {});

E ele ainda não está funcionando?

Nesse caso, você poderia por favor atualizar o seu código no Github para eu baixar com as novas mudanças e testar aqui para poder lhe ajudar melhor?

Bom dia, exato kkkk.

Atualizei no Github.

Olá Bruno! Tudo bem?

Eu baixei seu código novamente, e testei por aqui e por incrível que pareça, ele está funcionando, eu testei adicionar um vídeo novo e funcionou, tentei excluir um vídeo e funcionou, tentei pesquisar os vídeos pelo título e funcionou também, tentei assistir os vídeos que aparecem no início e adivinha, funcionou também.

A única coisa é que temos sim um "erro" no console gerados pelo carregamento do Script. O erro ocorre porque o Script está sendo executado antes que o DOM seja totalmente carregado. Mas graças ao código que lhe passei antes isso não afeta o funcionamento.

Mas basicamente eu vou passar um passo a passo do que você deve fazer para manter tudo funcionando:

1. Baixe o código que está no seu repositório e deixe a versão que está lá;
2. Depois de extrair os arquivos em uma pasta para o projeto abra o projeto no VsCode
3. Feito isso, abra um novo terminal com " Ctrl + Shift + ' " ou "Cmd + Shift + ' ", após isso vamos iniciar o json-server, mas temos 2 opções:
   1. Instalar o Json-Server global:
      1. Nesse opção nós vamos após ter aberto o terminal digitar esse comando:

         npm install -g json-server@0.17.4
         

      2. E depois de terminar a execução do comando anterior, vamos executar esse outro comando:

         json-server -w db.json
         

      3. Agora é só continuar o desenvolvimento, mas o erro ainda vai continuar lá.
   2. Instalar o Json-Server localmente:
      1. Nessa opção após ter aberto o terminal vamos executar esse comando:

         npm install -g json-server@0.17.4
         

      2. E depois de acabar a execução do comando anterior, cole esse comando e execute-o:

         npx json-server -w db.json
         

      3. Pronto continue o desenvolvimento, e como na outra opção os erro ainda permanecem, mas não atrapalham a execução das funcionalidades do projeto.

Era isso. Abraços e bons estudos.

Muito obrigado Renan, me salvou mais uma vez kkkk.

Em uma aplicação normal teria alguma forma de eliminar aquelas mensagens de erro no console ou isso é normal no dia-a-dia??

Existiria sim uma maneira de contornar isso, mas envolve umas configurações no seu navegador e na IDE, e em outros locais, e em um caso pior, provavelmente uma ajudinha do pessoal de Back-End seria necessária, pois isso envolve carregamento e execução do script feita de forma conflitante com as outras partes do projeto, bem como outras coisas mais relacionadas ao operacional do navegador e ferramentas auxiliares de desenvolvimento mesmo.

Mas era isso, se precisar conte com o fórum! Fico feliz que pude ajudar, abraços e bons estudos.