Genre Filters in TMDB API based site | Part 2 | HTML CSS JS | 50Projects50Days

Tutorial: Implementing Genre Filters in TMDB API-based Site

Title of the Video: Genre Filters in TMDB API based site | Part 2 | HTML CSS JS | 50Projects50Days

Channel Name: Asish George Tech

Summary Overview: In this tutorial, Asish George demonstrates how to implement Genre-based filters for the TMDB API using HTML, CSS, and JavaScript. The video is an extension of a project from Traversy Media's course 50Projects50Days. Asish provides step-by-step guidance on API logic, creating genre tags, styling them, dynamically adding tags, making tags clickable, handling broken images, displaying a "No Results Found" section, creating a clear button, and more.

Instructions:

1. Introduction (0:00):

   • Familiarize yourself with the project and the goal of implementing Genre-based filters for the TMDB API.

2. API Logic (0:40):

   • Understand the logic behind interacting with the TMDB API to fetch movie data based on genres.

3. Get Genre List (1:20):

   • Retrieve the list of genres available in the TMDB API.

4. Create Genre Tags (4:15):

   • Create HTML elements to represent the genre tags.

5. Style Genre Tag (5:46):

   • Apply CSS styles to make the genre tags visually appealing.

6. Dynamically Add Genre Tag (9:36):

   • Use JavaScript to dynamically add genre tags to the webpage.

7. Make Tags Clickable (14:33):

   • Implement functionality to make the genre tags clickable for filtering.

8. Highlight Selected Tag (23:44):

   • Add CSS styling to highlight the selected genre tag.

9. Fix Broken Image (28:45):

   • Handle cases where movie images are missing or broken.

10. No Results Found Section (30:27):

    • Create a section to display a message when no results are found for the selected genre.

11. Create Clear Button (32:59):

    • Implement a button to clear the selected genre filter.

12. Search with Genre? (39:07):

    • Explore options for enhancing the search functionality with genres.

13. Reset Filter on Search (39:53):

    • Ensure that the genre filter resets when a new search is initiated.

14. Conclusion (40:40):

    • Wrap up the tutorial and review the key concepts covered.

15. Additional Resources:

    • Check out the Udemy course "50 Projects in 50 Days" by Traversy Media.
    • Access the GitHub repository for the project: https://github.com/asishgeorge/50Projects50Days

16. Follow Asish George:

    • Stay connected with Asish George on social media platforms like Instagram, LinkedIn, and Twitter for more updates.

By following these steps, you can successfully implement Genre Filters for the TMDB API on your website using HTML, CSS, and JavaScript.