Executando verificação de segurança...
1
TheDevick
4 min de leitura ·

Imersão Dev - Aula 3 | Expandindo os Conhecimentos

Olá a todos. Como sabem, essa semana, está rolando a Imersão Dev, e tivemos a terceira 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:

var listaFilmesCartaz = [
  // 1917
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABU4wEIvObVTokOAN_EaFVbYCCq9oCtGbdMTXVpwTLqJ1_P38CRhK-Hfbl0mW9MM4_Xw1VtSgSoYBqr_M_LpLo77_lPhgD207lew.jpg",

  // Extraordinário
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABfz4wF9loZPwS07jPenvOlfYrgr6a6QDcPZOa9OUUyZtArUv1y4VBBie6BzH1b2pggvIVDcyByOMWo5rtdPjhrJB_Yud6FP6IO0.jpg",

  // De Volta ao Espaço
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABVxggiEVJqjdnSPawrC456xIWThbUJuKb1NLo-9Dw2IqU6QnWM30scDDa8gWMCq88TbHw-3MJ1GuNKmMAkwk2TG5wSW65him0azfQL0d8yAAsF-kan2nmno8TPqsYpHlksuY.jpg",

  // Kart Nervoso
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABduDt-a8_pctipPIdyG8e3pSkocqK7Pxt6AyvKaMptLzx0yA-K76FkgHcyFgXXBmdTTAJhpDd8EPmZXXm1nTuT1zRGIQPh72f4Kc4Gnx8VrH4fOqiZ2tdD0U5yQEv7wA9k0e.jpg",

  // Next Gen
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABZRVxTEKJi-2Ht1ow6p0Kks3pXYeQlHV1gXlGuflX90p5zUqDi78wiOCbO7MAqkDZVwC3IAdJDf-jk0237FV5kRa-M-r5d4WFAFFk7Qi4TBxwmVJkDjFWIz3sUQfxnFFLrIT.jpg"
];

for (var i = 0; i < listaFilmesCartaz.length; i++) {
  document.write("<img src=" + listaFilmesCartaz[i] + " />");
}

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

Conteúdos

  • Desafio: Nomes dos Filmes
  • Adicionando Link aos Filmes

Desafio: Nomes dos Filmes

Desafio feito pelo instrutor Guilherme Lima, aos 31:35 do Vídeo.

Precisamos colocar um nome acima da imagem da capa do filme.

A Ideia

Colocaremos vários subtítulos (h2) com uma cor verde, e para cada filme, mostraremos o nome dele.

Implementação

Criaremos uma segunda lista com os nomes dos filmes.
O filme de índice 0 do listaFilmesCartaz tem o nome no índice 0 do listaFilmesNomes.

Estilização: A Cor Verde

Há várias maneiras de fazer a estilização na Web. Uma delas é mudar o arquivo CSS. Por mais que essa seja a mais recomendade, iremos usar uma outra: A estilização pelo HTML.
Quando estamos abrindo a tag do subtítulo, colocamos um style='REGRA: VALOR'. No nosso caso, queremos mudar a cor do texto, então a regra é color. Podemos colocar green como valor, para transformar a cor do texto em verde.
Um desafio interessante para se fazer é, ao invés de usar a estilização pelo HTML, fazer a estilização pelo próprio arquivo CSS.

var listaFilmesNomes = [
  "1917",
  "Extraordinário",
  "De Volta ao Espaço",
  "Kart Nervoso",
  "Next Gen"
];

for (var i = 0; i < listaFilmesCartaz.length; i++) {
  document.write("<h2 style='color: green'>" + listaFilmesNomes[i] + "</h2>");
  document.write("<img src=" + listaFilmesCartaz[i] + " />");
}

Adicionando Link aos Filmes

Colocaremos um link para assistir os filmes

Ideia

Colocaremos um link, abaixo da imagem do poster, com a cor branca, que quando clicamos, ele abre uma nova guia no navegador para assistir o filme.

Implementação

Âncoras na Web

Para adicionarmos links à nossa página web, utilizamos a tag <a>. Colocaremos três atributos nessa tag.

  • O href='https://site.com/exemplo', que significa o link do site
  • O target='_blank', que é usado para abrir o link em uma nova guia.
  • O style, que já foi explicado.

Quebra de Linha

Para o link ficar abaixo da imagem, precisamos colocar uma quebra de linha. Para isso, usaremos a tag <br />

var listaFilmesCartaz = [
  // 1917
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABU4wEIvObVTokOAN_EaFVbYCCq9oCtGbdMTXVpwTLqJ1_P38CRhK-Hfbl0mW9MM4_Xw1VtSgSoYBqr_M_LpLo77_lPhgD207lew.jpg",

  // Extraordinário
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABfz4wF9loZPwS07jPenvOlfYrgr6a6QDcPZOa9OUUyZtArUv1y4VBBie6BzH1b2pggvIVDcyByOMWo5rtdPjhrJB_Yud6FP6IO0.jpg",

  // De Volta ao Espaço
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABVxggiEVJqjdnSPawrC456xIWThbUJuKb1NLo-9Dw2IqU6QnWM30scDDa8gWMCq88TbHw-3MJ1GuNKmMAkwk2TG5wSW65him0azfQL0d8yAAsF-kan2nmno8TPqsYpHlksuY.jpg",

  // Kart Nervoso
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABduDt-a8_pctipPIdyG8e3pSkocqK7Pxt6AyvKaMptLzx0yA-K76FkgHcyFgXXBmdTTAJhpDd8EPmZXXm1nTuT1zRGIQPh72f4Kc4Gnx8VrH4fOqiZ2tdD0U5yQEv7wA9k0e.jpg",

  // Next Gen
  "https://occ-0-5500-559.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABZRVxTEKJi-2Ht1ow6p0Kks3pXYeQlHV1gXlGuflX90p5zUqDi78wiOCbO7MAqkDZVwC3IAdJDf-jk0237FV5kRa-M-r5d4WFAFFk7Qi4TBxwmVJkDjFWIz3sUQfxnFFLrIT.jpg"
];
var listaFilmesNomes = [
  "1917",
  "Extraordinário",
  "De Volta ao Espaço",
  "Kart Nervoso",
  "Next Gen"
];

var listaFilmesLink = [
  // 1917
  "https://www.netflix.com/title/81140931",

  // Extraordinário
  "https://www.netflix.com/title/80147986",

  // De Volta ao Espaço
  "https://www.netflix.com/title/81111324",

  // Kart Nervoso
  "https://www.netflix.com/title/80241136",

  // Next Gen
  "https://www.netflix.com/title/80988892"
];

for (var i = 0; i < listaFilmesCartaz.length; i++) {
  document.write("<h2 style='color: green'>" + listaFilmesNomes[i] + "</h2>");
  document.write("<img src=" + listaFilmesCartaz[i] + " />");
  document.write("<br />");
  document.write("<a href=" +listaFilmesLink[i] +" style='color: white'>Assistir Agora</a>");
}

Sobre Mim 🐘

Me Chamo Erick. Desenvolvedor PHP (Symfony).

Carregando publicação patrocinada...