London | ITP-May-26 | Dipa Sarker | Sprint 3 | Project TV Show - Level 500

[Dipa-Sarker]

Learners, PR Template

Self checklist

• I have committed my files one by one, on purpose, and for a reason
• I have titled my PR with REGION | COHORT_NAME | FIRST_NAME LAST_NAME | SPRINT NUM | PROJECT NAME
• I have tested my changes
• My changes follow the style guide
• My changes meet the requirements of this task

Changelist

Description

Completed the TV Show Project from Levels 100–500.

Level 100

• Display episodes as cards
• Show episode name and episode code (SxxExx)
• Display episode image and summary
• Format season and episode numbers with leading zeros

Level 200

• Added episode search functionality
• Search episodes by name and summary
• Added episode count display
• Added episode selector dropdown
• Added "Show all episodes" button

Level 300

• Replaced local episode data with TVMaze API data
• Fetch episodes using async/await
• Added loading and error messages
• Removed dependency on episodes.js

Level 400

• Added show selector dropdown
• Fetch all shows from TVMaze API
• Load episodes for the selected show
• Sort shows alphabetically (case-insensitive)
• Implemented episode caching to avoid fetching the same URL more than once
• Ensured search and episode selector work correctly when changing shows

Level 500

• Display all shows on the front page as show cards
• Added show search functionality
• Search shows by name, genre and summary
• Added show count display
• Made show titles clickable to load episodes
• Added "Show all shows" button to return to the shows listing
• Added show information including:
  • Genres
  • Status
  • Rating
  • Runtime
  • Summary

Refactoring

• Added reusable helper functions:
  • formatEpisodeCode()
  • getEpisodeUrl()
  • clearMessages()
  • searchShows()
  • searchEpisodes()
• Moved repeated strings into constants
• Improved code organisation and readability
• Fixed episode selector and search interaction by tracking current rendered episode cards

Testing

• Tested episode search
• Tested show search
• Tested episode selector
• Tested show selector
• Tested loading and error handling
• Tested cached episode loading
• Tested navigation between shows and episodes

*** Netlify Link:
https://project-tv-show-dipa.netlify.app/

***Project Partner:
https://github.com/risikatpopoola