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

[LonMcGregor]

Good work on this. The functionality is all present and works properly. The code is okay, but see my remark about comments below.

Some of the formatting looks a little inconsistent, did you try running a formatter before opening the PR?

I have spotted a few things, and have some extra questions. if you want an extra challenge now the ITP is over, you can try to address them.

[LonMcGregor]

This file contains a lot of comments. There are some cases where your comments are really good, such as explaining how the keys and values are used in your caches, or when you give an overview what each function is meant to do.

However, there are also places where every single line of code is commented, and this gets a bit superfluous. For example, the comment explaining what .style.display = "none" means should be obvious enough. For comments in line with code I would typically expect you only to have a comment when the code is doing something difficult to understand.

If you're using this as a learning tool, that's fine, but just be aware we wouldn't typically see code commented quite to this level in the "real world" of coding.

[LonMcGregor]

This is not the only thing the alt tag is used for. Have a look at https://axesslab.com/alt-texts/ and let me know what you think about your current approach

[LonMcGregor]

Do you think there are any potential side effects of setting the HTML this way?