Coleção de Filmes Interativa | Tutorial de Desenvolvimento Web

Introdução

Neste projeto, você aprenderá a criar uma aplicação web interativa de coleção de filmes usando HTML, CSS e JavaScript (jQuery). A aplicação permite que os usuários marquem seus filmes favoritos e, quando uma coleção de filmes favoritos é criada, uma mensagem de sucesso é exibida.

👀 Pré-visualização

Demonstração da coleção interativa de filmes

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar os arquivos do projeto e abrir o projeto no editor
Como implementar a funcionalidade para o ícone de favorito, permitindo que os usuários alternem entre os estados oco e sólido
Como implementar a funcionalidade para o ícone de coleção, exibindo uma mensagem de sucesso quando pelo menos um filme favorito é adicionado

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Manipular o DOM usando jQuery
Lidar com interações e eventos do usuário
Exibir e ocultar elementos com base em condições específicas
Usar temporizadores para ocultar elementos automaticamente após uma determinada duração

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos do projeto e abrirá o projeto no editor.

Abra o editor e você deverá ver os seguintes arquivos: index.html, style.css, jquery.min.js e a pasta images.
Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.
Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Estrutura do projeto inacabado

Implementar a Funcionalidade do Ícone de Favorito

Nesta etapa, você implementará a funcionalidade para o ícone de favorito.

No arquivo index.html, localize o código para o ícone de favorito:

<div class="card-body-option card-body-option-favorite">
  <img src="./images/hollow.svg" alt="" />
</div>

Adicione o seguinte código JavaScript na seção <script> na parte inferior do arquivo index.html:

window.timer = null;
let flag = false;
$(".card-body-option-favorite").click(function () {
  flag = !flag;
  if (flag) {
    $(this).find("img").attr("src", "./images/solid.svg");
    $("#toast__container").show();
    timer = setTimeout(() => {
      $("#toast__container").fadeOut();
    }, 2000);
  } else {
    $(this).find("img").attr("src", "./images/hollow.svg");
  }
});

$(".toast__close img").click(function () {
  $("#toast__container").fadeOut();
});

Este código alternará o ícone de favorito entre os estados oco e sólido quando o usuário clicar no ícone de favorito. Quando o ícone de favorito é clicado, a caixa de sucesso (class=toast__container) é exibida somente se o ícone de favorito estiver sólido, após 2 segundos a caixa é automaticamente ocultada, ou a caixa é ocultada clicando no botão de fechar acima da caixa (class=toast__close).