Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 3 | Project - TV - Show - Level-500 - #66
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 3 | Project - TV - Show - Level-500#66SandzSoft wants to merge 45 commits into
Conversation
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 1 | TV Show Project
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 1 | Project TV Show
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 1 | Add performance improvements for Level 100
Enhance TV show page design
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 1 | Enhance TV show page design
Level 200 Search
Move search input event listener into function setup()
Level 200 drop down
Refactor setup by creating separate functions for search and selector
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 2 | Refactor episode rendering and event handling
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 2 | Level 300: Fetch episodes from TVMaze API
Level 400
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 3 | Level 400: Refactor TV Show data flow
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 2 | Level 500: Implement show and episode browser
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 3 | Level 500 – Load All Shows on Initial Page Load and Scroll to Top
Glasgow | 26-ITP-May | Sandani Kannangara | Sprint 3 | Fix: Scroll to Top When Opening Episode View
SandzSoft
added
Needs Review
LonMcGregor
left a comment
LonMcGregor
left a comment
There was a problem hiding this comment.
- Appropriate use of some semantic HTML elements
- The deployed page has all the required functionality
- The code is generally well organised, but I have some suggestions if you see my comments
I notice you are creating a lot of HTML elements for cards in the js, are there any alternatives you can think of, or can you suggest advantages for your current approach?
Good work on this. ITP is complete now, but if you want an extra challenge, feel free to respond to my comments.
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>TV Show Project | My Name (My GitHub username)</title> | ||
| <title>TV Show Project | Sandani Kannangara (SandzSoft)</title> | ||
| <link rel="preconnect" href="https://api.tvmaze.com" crossorigin /> |
There was a problem hiding this comment.
Good idea to add a preconnect
| "input", | ||
| handleEpisodeSearch, | ||
| ); | ||
| elements.episodeSelect.addEventListener("change", handleEpisodeSelection); |
There was a problem hiding this comment.
Thinking about the order of events here, is it necessary for these addEventListeners to come inside the block of code that happens when the fetch is being done?
| switchToEpisodesView(); | ||
| state.selectedShow = Number(showId); | ||
|
|
||
| if (state.cachedEpisodes[state.selectedShow]) { |
There was a problem hiding this comment.
The approach taken here works, but see how there's a lot of repetition in the structure? That could be an indicator that it could be reorganised a bit. Think also about task-specific functions. You're responding the fetch activity here in a function about changing the apps state. Could these functions be reorganised at all?
|
|
||
| const img = document.createElement("img"); | ||
| img.src = image?.medium || ""; | ||
| img.alt = `${name} episode image`; |
There was a problem hiding this comment.
Is this an appropriate use of an alt tag? See what https://axesslab.com/alt-texts/ has to say
|
|
||
| const summaryElement = document.createElement("div"); | ||
| summaryElement.classList.add("summary"); | ||
| summaryElement.innerHTML = summary || "No summary available."; |
There was a problem hiding this comment.
This isn't wrong, but can you think of any potential side effects of inserting the summary from the API directly into your HTML like this?
LonMcGregor
added
Reviewed
3 participants
Self checklist
🌐 Netlify Link
🚀 Live Project:
https://cyf-sandzsoft-tv.netlify.app/
👩💻👨💻 Contributors
This project was developed collaboratively by:
SandzSoft
Niangh-Ciang
We worked together through the different levels of the TV Show Project, including refactoring, show/episode navigation, searching, and responsive UI improvements.
Changelist
Level 500 – Show & Episode Browser
🔎 Added show search and show selection
📺 Added navigation between show and episode views
🔎 Added episode search and episode selection
🌐 Integrated the TVMaze API for shows and episodes
⚡ Added episode caching to avoid unnecessary API requests
🎬 Added detailed show cards with:
Show images
Summaries
Ratings
Genres
Status
⏳ Added loading and error handling
⬆️ Added smooth scroll-to-top when opening the episode view
🧹 Refactored state management and rendering logic
🔢 Added accurate show and episode result counts
🛠️ Technologies
HTML
CSS
JavaScript
TVMaze API
Git & GitHub
Netlify
🚀 Live Demo
👉 View the TV Show Project