Imersão Dev - Aula 4 | Expandindo os Conhecimentos · TheDevick

Olá a todos. Como sabem, essa semana, está rolando a Imersão Dev, e tivemos a quarta aula, então, iremos expandir os conhecimentos.

Alguns desafios serão mostrados nesse artigo, pois eles são necessários para os conteúdos do post.

Código

O Código entregue no final da aula foi:

function adicionarFilme() {
  var filmeFavorito = document.getElementById('filme').value
  var elementoListaFilmes = document.getElementById('listaFilmes')
  elementoListaFilmes.innerHTML = elementoListaFilmes.innerHTML + '<img src=' + filmeFavorito + '>'
  document.getElementById('filme').value = ''
}

Perceba que eu mudei a lista de filmes, além do nome da variável.

Conteúdos

Refatorando o Código
Desafio: Link para o Trailer

Refatorando o Código

O código, do jeito que está, fica um pouco bagunçado. Vamos mudar algumas coisas

A Ideia

Vamos criar algumas variáveis, para melhorar a legibilidade do código

A Implementação

listaFilmesExistenteHTML - É o HTML existente da lista de filmes
imagemTag - É a tag de Imagem

function adicionarFilme() {
  var filmeFavorito = document.getElementById("filme").value;
  var elementoListaFilmes = document.getElementById("listaFilmes");
  var listaFilmesExistenteHTML = elementoListaFilmes.innerHTML;
  var imagemTag = "<img src=" + filmeFavorito + ">"
  elementoListaFilmes.innerHTML = listaFilmesExistenteHTML + imagemTag;
  document.getElementById("filme").value = "";
}

Desafio: Link para o Trailer

Desafio feito pela instrutora Rafaella Ballerini, aos 29:26 do Vídeo.

Precisamos colocar uma funcionalidade para colocar um link para o trailer no banner do filme

A Ideia

Adicionaremos mais um input, que vai servir para o link do Trailer. Quando o usuário adicionar um novo filme, colocaremos o link para clicar na imagem do banner

Implementação

Precisaremos colocar um novo input no HTML para o usuário poder digitar o trailer. Após isso, no JavaScript, colocaremos a tag de link com o caminho para o trailer.

Para mais detalhes sobre o link, verifique o meu artigo: Imersão Dev - Aula 3 | Expandindo os Conhecimentos.

O Input no HTML

Primeiro, iremos ao código HTML e encontraremos o input que já existe:

<input type="text" id="filme" name="filme" placeholder="Insira endereço de imagem">

Copiaremos esse input e colaremos em baixo, mas vamos mudar alguns valores.

Trocaremos o id por filme-trailer. Isso vai ser usado para capturarmos o valor do trailer, como fizemos com a imagem
Trocaremos o name por filme-trailer Isso mostra para o HTML que o nome desse input é filme-trailer
Trocaremos o placeholder por Insira endereço do trailer Essa é a mensagem que aparecerá no input quando o usuário digitar.

<input type="text" id="filme" name="filme" placeholder="Insira endereço de imagem">
<input type="text" id="filme-trailer" name="filme-trailer" placeholder="Insira endereço do trailer">

Adicionando o Link

Buscaremos o valor do trailer do filme. Após isso, colocaremos o conteúdo da Imagem, com a tag de âncora em volta. Por último, removeremos o valor do input.

function adicionarFilme() {
  var filmeFavoritoTrailer = document.getElementById("filme-trailer").value;
  var filmeFavorito = document.getElementById("filme").value;
  var elementoListaFilmes = document.getElementById("listaFilmes");
  var listaFilmesExistenteHTML = elementoListaFilmes.innerHTML;
  var imagemTag = "<img src=" + filmeFavorito + ">";
  var linkTag =
    "<a href=" +
    filmeFavoritoTrailer +
    " target='_blank'>" +
    imagemTag +
    "</a>";
  elementoListaFilmes.innerHTML = listaFilmesExistenteHTML + linkTag;
  document.getElementById("filme").value = "";
  document.getElementById("filme-trailer").value = "";
}

Sobre Mim 🐘

Me Chamo Erick. Desenvolvedor PHP (Symfony).