Interactive Film Collection | Web Development Tutorial

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/ToolsandEnvironmentGroup(["`Tools and Environment`"]) jquery(("`jQuery`")) -.-> jquery/EventHandlingGroup(["`Event Handling`"]) jquery(("`jQuery`")) -.-> jquery/DOMManipulationGroup(["`DOM Manipulation`"]) jquery(("`jQuery`")) -.-> jquery/UserInterfaceInteractionGroup(["`User Interface Interaction`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/AdvancedConceptsGroup -.-> javascript/closures("`Closures`") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("`Browser Object Model`") jquery/EventHandlingGroup -.-> jquery/event_methods("`Event Methods`") jquery/DOMManipulationGroup -.-> jquery/dom_traversal("`DOM Traversal`") jquery/DOMManipulationGroup -.-> jquery/element_management("`Element Creation and Removal`") jquery/UserInterfaceInteractionGroup -.-> jquery/ui_effects("`UI Effects`") subgraph Lab Skills javascript/variables -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/data_types -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/arith_ops -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/comp_ops -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/cond_stmts -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/loops -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/functions -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/obj_manip -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/async_prog -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/closures -.-> lab-300287{{"`Interactive Film Collection Web App`"}} javascript/bom -.-> lab-300287{{"`Interactive Film Collection Web App`"}} jquery/event_methods -.-> lab-300287{{"`Interactive Film Collection Web App`"}} jquery/dom_traversal -.-> lab-300287{{"`Interactive Film Collection Web App`"}} jquery/element_management -.-> lab-300287{{"`Interactive Film Collection Web App`"}} jquery/ui_effects -.-> lab-300287{{"`Interactive Film Collection Web App`"}} end

Set Up the Project Structure

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

Open the editor and you should see the following files: index.html, style.css, jquery.min.js, and the images folder.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

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.

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>

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).

Save the index.html file.

Refresh the browser to see the finished result.

The effect looks like this:

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