Colección de películas interactiva | Tutorial de desarrollo web

Introducción

En este proyecto, aprenderás a crear una aplicación web interactiva de colección de películas utilizando HTML, CSS y JavaScript (jQuery). La aplicación permite a los usuarios marcar sus películas favoritas y, cuando se crea una colección de películas favoritas, se muestra un mensaje de éxito.

👀 Vista previa

Demostración de colección de películas interactiva

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar los archivos del proyecto y abrir el proyecto en el editor
Cómo implementar la funcionalidad del icono de favorito, permitiendo a los usuarios alternar entre estados huecos y sólidos
Cómo implementar la funcionalidad del icono de colección, mostrando un mensaje de éxito cuando se agrega al menos una película favorita

🏆 Logros

Después de completar este proyecto, podrás:

Manipular el DOM utilizando jQuery
Manejar interacciones y eventos del usuario
Mostrar y ocultar elementos según condiciones específicas
Utilizar temporizadores para ocultar automáticamente elementos después de una cierta duración

Configurar la estructura del proyecto

En este paso, configurarás los archivos del proyecto y abrirás el proyecto en el editor.

Abre el editor y deberías ver los siguientes archivos: index.html, style.css, jquery.min.js y la carpeta images.
Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.
Abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Estructura del proyecto sin terminar

Implementar la funcionalidad del icono de favorito

En este paso, implementarás la funcionalidad del icono de favorito.

En el archivo index.html, localiza el código del icono de favorito:

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

Agrega el siguiente código JavaScript en la sección <script> al final del archivo 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 cambiará el icono de favorito entre los estados hueco y sólido cuando el usuario haga clic en el icono de favorito. Cuando se hace clic en el icono de favorito, la caja de éxito (class=toast__container) solo se muestra si el icono de favorito es sólido, después de 2 segundos la caja se oculta automáticamente, o la caja se oculta al hacer clic en el botón de cierre encima de la caja (class=toast__close).