ImersãoDev - AluraFlix

Analisei detalhadamente o seu código e precisei fazer algumas mudanças. Espero que me desculpe por isso. Vamos lá:

A função listar() é a responsável por colocar os filmes na tela, né? Você estava dando append no body do documento. Isso dificultaria, e muito, a ação de EXCLUIR elementos da lista. Então, é melhor ter uma div só pra isso, e eu percebi que você já tinha feito esta div. ela atende pelo id listaFilmes.

Então, o que a função deve fazer?

• limpar a lista de filmes (a div)
• limpar o select (é um bom lugar para fazer isso)
• repopular a lista
• repopular o select

Então, o código dela ficou assim:

function listar() {
  //Atualiza lista de filmes
  const divLista = document.querySelector('#listaFilmes');
  var select = document.querySelector("#removeFilmes");

  //Limpa o select
  for(var i = select.options.length - 1; i >= 0; i--) {
    select.remove(i);
  }

  //limpa a div que vai receber os nomes dos filmes
  divLista.innerHTML = '';

  for (var i = 0; i < listaDeFilmes.length; i++) {
    divLista.innerHTML += "<figure><img src=" + listaDeFilmes[i] + "><figcaption>" + nomeDeFilmes[i] + "</figcaption></figure>";

      //Insere uma nova option no select
      select.add(new Option(nomeDeFilmes[i],nomeDeFilmes[i]));
  }
}

Depois, percebi que você estava duplicando código desnecessariamente na função adicionarFilme(). Ora, se listar() já insere os filmes na tela, por que fazer isso também em outro lugar? Então, eu substituí essa redundância por uma simples chamada a listar(). A função ficou assim (atente para a linha abaixo do comentário "imprime na tela"):

//Função que insere novos filmes no catálogo
function adicionarFilme(filmeFavorito, nomeFilmeFavorito) {
  var elementoFilmeFavorito = "<img src=" + filmeFavorito + ">";
  var elementoNomeFilmeFavorito = nomeFilmeFavorito;
  //Verifica se o filme desejado já não foi inserido
  if (
    listaDeFilmes.includes(filmeFavorito) ||
    nomeDeFilmes.includes(nomeFilmeFavorito)
  ) {
    var mensagem = document.getElementById("mensagem");
    mensagem.innerHTML = "Esse filme já está no catálogo.";
    document.getElementById("listaFilmes").value = "";
  } else {
    //Insere nome do filme no select para caso queira remover
    var mensagem = document.getElementById("mensagem");
    mensagem.innerHTML = "Ok, filme inserido.";
    //empurra para o array
    listaDeFilmes.push(filmeFavorito);
    nomeDeFilmes.push(nomeFilmeFavorito);
    //imprime na tela
    listar();

    document.getElementById("filme").value = "";
    document.getElementById("nomeFilme").value = "";
  }
}

Por fim, a exclusão de filmes tava com um código meio confuso. Não sei em que nível do curso você está, mas acho que você já sabe tudo o que eu usei. A função ficou assim:

//função para remover filme do catálogo
function removeFilme() {

  var elementoRemoveFilme = document.querySelector("#removeFilmes").value;

  if (nomeDeFilmes.indexOf(elementoRemoveFilme) > -1) {

    var posicao = nomeDeFilmes.indexOf(elementoRemoveFilme)
    nomeDeFilmes.splice(posicao, 1);
    listaDeFilmes.splice(posicao, 1);
  }
  listar();
}

Claro que existem milhões de formas diferentes de resolver o mesmo problema (e essa é a graça dessa nossa área!). Esta é só uma delas. Espero ter ajudado.

Falta fazer umas coisinhas. Por exemplo, a mensagem "Ok, filme inserido" não muda para "Filme excluído", por exemplo. Mas isso eu deixo pra você fazer, já que estamos em "pair programming". :)

O código inteiro ficou assim:

//Definindo Arrays
var listaDeFilmes = [];
var nomeDeFilmes = [];

function listar() {
  //Atualiza lista de filmes
  const divLista = document.querySelector('#listaFilmes');
  var select = document.querySelector("#removeFilmes");

  for(var i = select.options.length - 1; i >= 0; i--) {
    select.remove(i);
  }
  divLista.innerHTML = '';

  for (var i = 0; i < listaDeFilmes.length; i++) {
    divLista.innerHTML +=
      "<figure><img src=" +
      listaDeFilmes[i] +
      "><figcaption>" +
      nomeDeFilmes[i] +
      "</figcaption></figure>";

      select.add(new Option(nomeDeFilmes[i],nomeDeFilmes[i]));

  }


}

//Função que verifica se há erros de input pelo usuário
function verificaFilme() {
  var filmeFavorito = document.getElementById("filme").value;
  var nomeFilmeFavorito = document.getElementById("nomeFilme").value;
  if (filmeFavorito.endsWith(".jpg") || filmeFavorito.endsWith(".png")) {
    //Caso não há erros, chama a função a seguir
    adicionarFilme(filmeFavorito, nomeFilmeFavorito);
  } else {
    var erro = document.getElementById("mensagem");
    mensagem.innerHTML = "Poxa, essa imagem não termina com jpg.";
  }
  document.getElementById("filme").value = "";
  document.getElementById("nomeFilme").value = "";
}

//Função que insere novos filmes no catálogo
function adicionarFilme(filmeFavorito, nomeFilmeFavorito) {
  var elementoFilmeFavorito = "<img src=" + filmeFavorito + ">";
  var elementoNomeFilmeFavorito = nomeFilmeFavorito;
  //Verifica se o filme desejado já não foi inserido
  if (
    listaDeFilmes.includes(filmeFavorito) ||
    nomeDeFilmes.includes(nomeFilmeFavorito)
  ) {
    var mensagem = document.getElementById("mensagem");
    mensagem.innerHTML = "Esse filme já está no catálogo.";
    document.getElementById("listaFilmes").value = "";
  } else {
    //Insere nome do filme no select para caso queira remover
    var mensagem = document.getElementById("mensagem");
    mensagem.innerHTML = "Ok, filme inserido.";
    //empurra para o array
    listaDeFilmes.push(filmeFavorito);
    nomeDeFilmes.push(nomeFilmeFavorito);
    //imprime na tela
    listar();

    document.getElementById("filme").value = "";
    document.getElementById("nomeFilme").value = "";
  }
}

//função para remover filme do catálogo
function removeFilme() {

  var elementoRemoveFilme = document.querySelector("#removeFilmes").value;

  if (nomeDeFilmes.indexOf(elementoRemoveFilme) > -1) {

    var posicao = nomeDeFilmes.indexOf(elementoRemoveFilme)
    nomeDeFilmes.splice(posicao, 1);
    listaDeFilmes.splice(posicao, 1);
  }
  listar();
}

/* Desafios da Aula
- Criar um botão para remover um filme na tela
- Além de colocar a imagem do filme, também adicionar o nome por meio de outro input - Ok
- Guardar todos os filmes adicionados em uma lista/array e percorrer essa lista toda vez que quiser imprimir ou remover o filme - Ok */

Leandro,

Primeiramente gostaria de te agradecer por toda essa explicação (como é bom ter alguem como você que dispôs seu tempo para me dar uma baita aula dessa).

Ainda sou muito leiga em programação, mas quero que saiba que o que me ensinou aqui, já vou levar para a vida!

Obrigada!

Boa sorte em seus estudos. Deixa eu dizer algumas coisinhas:

• TUDO na vida parece difícil no começo. Português, por exemplo, não é fácil. Porém, quase todo mundo que eu conheço aprendeu a falar;
• Desenvolvimento de sistemas (sobretudo front-end) tem vaga sobrando e as empresas estão disputando talentos na tapa!;
• Estou sempre à disposição pra ajudar todas as pessoas que entram nessa área. Ensinar ensina mais a quem ensina do que a quem aprende.

Leandro, parabéns pela disposição em ensinar. Também sou iniciante e passeio pelo forum para aprender um pouco mais e sempre encontro algo para agregar conhecimentos. É muito bom poder contar com pessoas como você. Quero chegar nesse nível de saber explicar e corrigir um código. Na imersão sofri também, se apagava uma chave { errada bugava todo o código e o debbuging era nível hard, hahahaha.

Obrigado, Camila! Já passei (um bocado!) da metade da minha carreira, então, nada mais justo do que passar adiante um pouco do conhecimento que a própria comunidade me deu, né? Saber e guardar pra si é jogar a vida fora. Tenho algumas pessoas pelas quais torço e ajudo sempre que eles precisam. Atualmente, conheço dois devs jr que precisavam aprender Linux, PHP e Laravel pra se empregar. E pra mim foi uma felicidade muito grande poder ajudá-los e hoje vê-los empregados (e me trazendo broncas da vida real!) Boa sorte nos estudos!