Interactive Film Collection Web App

Introduction

In this project, you will learn how to create an interactive collection of films web application using HTML, CSS, and JavaScript (jQuery). The application allows users to mark their favorite films, and when a collection of favorite films is created, a success message is displayed.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the project files and open the project in the editor
• How to implement the functionality for the favorite icon, allowing users to toggle between hollow and solid states
• How to implement the functionality for the collection icon, displaying a success message when at least one favorite film is added

🏆 Achievements

After completing this project, you will be able to:

• Manipulate the DOM using jQuery
• Handle user interactions and events
• Display and hide elements based on specific conditions
• Use timers to automatically hide elements after a certain duration

Set Up the Project Structure

In this step, you will set up the project files and open the project in the editor.

1. Open the editor and you should see the following files: index.html, style.css, jquery.min.js, and the images folder.
2. Click on Go Live button in the bottom right corner of WebIDE, to run the project.
3. Open "Web 8080" on the top of the VM and manually refresh it to see the page.

Implement the Favorite Icon Functionality

In this step, you will implement the functionality for the favorite icon.

1. In the index.html file, locate the code for the favorite icon:

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

2. Add the following JavaScript code in the <script> section at the bottom of the index.html file:

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();
});

This code will toggle the favorite icon between the hollow and solid states when the user clicks on the favorite icon. When the favorite icon is clicked, the success box (class=toast__container) element is only displayed if the favorite icon is solid, after 2 seconds the box is automatically hidden, or the box is hidden by clicking the close button above the box (class=toast__close).

3. Save the index.html file.
4. Refresh the browser to see the finished result.

The effect looks like this:

Congratulations! You have successfully completed the "Collection of Films" project.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.