LONDON | ITP-May-26 | Rizqah Popoola | Sprint 3 | Project TV Show by risikatpopoola · Pull Request #92 · CodeYourFuture/Project-TV-Show

risikatpopoola · 2026-08-19T21:05:03Z

##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

The changes satisfy the requirements:

Level-100: Episode Listing Display
Level-200: Live Episode Search
Level-300: Episode Selector Dropdown
Level-400: API Fetch and Show Selector
Level-500: Shows Listing Page and Caching, in detail:

Initial app load presents full listing of all shows.
Each show card displays name, image, summary, genres, status, rating, and runtime.
Clicking any show title switches to that show's episode view and hides shows listing.
Navigation button returns to shows listing and hides episode listing.
Free-text show search filters shows by name, summary, and genres.
Search and dropdown controls work cleanly when switching back and forth between views.
API response caching: no URL endpoint is fetched more than once per visit.
Netlify url: https://cyf-risikatpopoola-tv.netlify.app/
Partners name is Dipa Sarker

github username and name added to index.html

Tvproject level 100

…ring

LONDON | ITP-May-26 | Dipa Sarker| Sprint 2 | Project TV Show Level 200-Search

…ode-selector LONDON | ITP-May-26 | Dipa Sarker | Sprint 2 | Project TV Show level 200- episode selector

Level 300 apifetch

LONDON | ITP-May-26 | Dipa Sarker| Sprint 3 | Project TV Show-level 300-refactoring

LONDON | ITP-May-26 | Dipa Sarker | Sprint 3 | Project TV Show- level 400

Level 400 refactoring

LonMcGregor

Good work on this. You've used pretty good semantic HTML and templates. The code is generally well written and laid out. The functionality is pretty good.

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

LonMcGregor · 2026-09-07T14:43:36Z

+  <label for="show-selector">Choose A Show:</label>
+  <select id="show-selector"></select>
+  <label for="episode-selector">Choose an episode:</label>
+  <select id="episode-selector"></select>


Before a show is selected, the user is presented with this blank select menu. Is there a way we could improve the UI here?

LonMcGregor · 2026-09-07T14:44:50Z

+  color: var(--dark);
+}
+
+img {


When looking at this on a machine with a large screen, the images look very expanded and blurry. Could that be avoided?

LonMcGregor · 2026-09-07T14:46:45Z

+// BACK TO SHOWS
+
+backToShowsButton.addEventListener("click", function () {
+  viewingShows = true;


Is the application state being properly changed? e.g. When going "back to shows", are there any controls you can still interact with that are specific to episodes?

LonMcGregor · 2026-09-07T14:47:30Z

+    // SORT SHOWS ALPHABETICALLY
+
+    allShows.sort((show1, show2) => {
+      if (show1.name.toLowerCase() > show2.name.toLowerCase()) {


This block of code seems quite complex and contains some repetition. could it be simplified?

LonMcGregor · 2026-09-07T14:49:45Z

+    card.style.display = "none";
+  });
+
+  selectedCard.style.display = "block";


When searching, you re-make the elements. When picking an episode, you hide all but the selected one. What do you think of these two different approaches?

LonMcGregor · 2026-09-07T14:51:48Z

+
+  card.querySelector(".show-image").src = show.image?.medium || "";
+
+  card.querySelector(".show-image").alt = show.name;


Is this the best way to use this alt tag? See what https://axesslab.com/alt-texts/ has to say

LonMcGregor · 2026-09-07T14:52:02Z

+
+  card.querySelector(".show-image").alt = show.name;
+
+  card.querySelector(".show-summary").innerHTML =


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

risikatpopoola and others added 27 commits August 8, 2026 11:07

github username and name added to index.html

6d30a96

Merge pull request #1 from risikatpopoola/tvproject-level-0

b68a6b0

github username and name added to index.html

level 100 in progress

9ef990b

image added from film

57a521c

image added 2

b5bcd17

level 100 completed

38d5566

level 200 completed

af32695

Merge branch 'main' into tvproject-level-100

9ff37e3

Merge pull request #2 from risikatpopoola/tvproject-level-100

ff52ff3

Tvproject level 100

refactored level 100

61b6965

Refactor Level 100 code

2ca47ae

Merge pull request #3 from risikatpopoola/TV-Show-Risikat-100-refacto…

9e26887

…ring

add episode search functionality

81de37a

Merge pull request #4 from risikatpopoola/TV-Show-Level-200-Dipa-search

8f015d2

LONDON | ITP-May-26 | Dipa Sarker| Sprint 2 | Project TV Show Level 200-Search

add function for episode selector

f1d521d

Merge pull request #5 from risikatpopoola/TV-Show-Level-200-Dipa-epis…

1dccc2f

…ode-selector LONDON | ITP-May-26 | Dipa Sarker | Sprint 2 | Project TV Show level 200- episode selector

refactored to displaying current numbers of episodes

6e02ebc

async fetch used instead of episodes.js

1ec990e

Merge pull request #6 from risikatpopoola/level-300-apifetch

d6f71aa

Level 300 apifetch

refactored level 300 for loading message

51ecd56

Merge pull request #7 from risikatpopoola/level-300-refactoring-dipa

5c2476f

LONDON | ITP-May-26 | Dipa Sarker| Sprint 3 | Project TV Show-level 300-refactoring

implement functions for level 400

131aa86

Merge pull request #8 from risikatpopoola/TV-Show-Level-400-Dipa

11600f5

LONDON | ITP-May-26 | Dipa Sarker | Sprint 3 | Project TV Show- level 400

styling made to match

f257650

show moved to before episodes

74980a7

Merge pull request #9 from risikatpopoola/level-400-refactoring

7e3d578

Level 400 refactoring

level 500 completed

51e9067

risikatpopoola added 🏕 Priority Mandatory This work is expected 📅 Sprint 3 Assigned during Sprint 3 of this module labels Aug 19, 2026

risikatpopoola added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Aug 19, 2026

risikatpopoola mentioned this pull request Aug 21, 2026

26-MAY-ITP| DATA FLOWS | RIZQAH POPOOLA risikatpopoola/My-Coursework-Planner#31

Open

LonMcGregor added the Review in progress This review is currently being reviewed. This label will be replaced by "Reviewed" soon. label Sep 7, 2026

LonMcGregor reviewed Sep 7, 2026

View reviewed changes

Navigation Menu

Uh oh!

Uh oh!

LONDON | ITP-May-26 | Rizqah Popoola | Sprint 3 | Project TV Show - #92

LONDON | ITP-May-26 | Rizqah Popoola | Sprint 3 | Project TV Show#92
risikatpopoola wants to merge 27 commits into
CodeYourFuture:mainfrom
risikatpopoola:level-500

risikatpopoola commented Aug 19, 2026 •

edited

Loading

Uh oh!

LonMcGregor left a comment

Uh oh!

LonMcGregor Sep 7, 2026

Uh oh!

LonMcGregor Sep 7, 2026

Uh oh!

LonMcGregor Sep 7, 2026

Uh oh!

LonMcGregor Sep 7, 2026

Uh oh!

LonMcGregor Sep 7, 2026

Uh oh!

LonMcGregor Sep 7, 2026

Uh oh!

LonMcGregor Sep 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		card.querySelector(".show-image").src = show.image?.medium \|\| "";

		card.querySelector(".show-image").alt = show.name;


		card.querySelector(".show-image").alt = show.name;

		card.querySelector(".show-summary").innerHTML =

Uh oh!

Uh oh!

Conversation

risikatpopoola commented Aug 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelist

Uh oh!

LonMcGregor left a comment

Choose a reason for hiding this comment

Uh oh!

LonMcGregor Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

LonMcGregor Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

LonMcGregor Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

LonMcGregor Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

LonMcGregor Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

LonMcGregor Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

LonMcGregor Sep 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

risikatpopoola commented Aug 19, 2026 •

edited

Loading