Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

TV Show Project Level 400: Fetch much more data

Offen
#478 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 10 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
35/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript
Bereich
api, frontend

Rechercherichtung

Beginne im Repository deines Partners, indem du den neuesten main-Branch holst und seine Level-300-Implementierung liest, bevor du sie mit deiner vergleichst. Füge die Show-Auswahl, das Abrufen von TVmaze-Shows und -Episoden, alphabetische Optionen, eine funktionierende Suche und Episodensteuerungen sowie eine Anfrage pro URL hinzu; validiere das Ergebnis über den erforderlichen, von deinem Partner überprüften pull request.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

🏕 Priority Mandatory 📅 Sprint 3 Core Submit:None

Level 400

For level 400, you should work in the repo of your partner from level 200.

You do not need to re-add yourself as a collaborator.

Remember to change to the right directory on your machine, and pull the latest changes from their main branch.

Before writing any new code, look at their level 300 implementation.

Compare their implementation to yours. Think:

  1. How is it different?
  2. What do you prefer about your implementation?
  3. What do you prefer about their implementation?
  4. What did you learn that you didn't know before?

They should do the same with your repository.

Have a discussion about your answers to these questions. In class, together you should give a 3 minute talk about your conclusions.

Refactoring

Feel free to change anything in your codebase which you think will make it easier to work with, or to build new features.

Make a branch and pull request for yourself, and then have your partner review, making sure they understand the changes made.

Adding new functionality

Level 400 is about expanding beyond one TV show.

Until now, your site has only showed information about the episode of one TV show.

But TVmaze has information about lots of TV shows, all in the same format.

We want to display any of them.

Requirements
  1. Add a select element to your page so the user can choose a show.
  2. When the user first loads the page, make a fetch request to https://api.tvmaze.com/shows (documentation) to get a list of available shows, and add an entry to the drop-down per show.
  3. When a user selects a show, display the episodes for that show, just like the earlier levels of this project.

You will need to perform a fetch to get the episode list.
4. Make sure that your search and episode selector controls still work correctly when you change shows.
5. Your select must list shows in alphabetical order, case-insensitive.
6. During one user's visit to your website, you should never fetch any URL more than once.

[!NOTE]
Be careful when developing with fetch. By default, every time you make a small change to your app it will be restarted by live server - if you are fetching JSON on page load, the JSON will be downloaded again and again. These frequent HTTP requests may lead to the API permanently banning your IP address from further requests, or "throttling" it for some time. Worse, if they don't, they may cause performance issues for the API service we are using.

Send a pull request to your partner's repo with this functionality. Have them review, and when happy, merge your PR.

Screenshot of minimal version

Note: Provided your project meets the above requirements, it can look however you want.

Here is one example layout.

Screenshot of a website with a drop-down list with the show "Breaking Bad" selected

Screenshot of a website with a drop-down list showing multiple TV shows

Vorherrschende Sprache
JavaScript
Sterne
0
Forks
276
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus CodeYourFuture/Module-Data-Flows

Alle Issues in CodeYourFuture/Module-Data-Flows

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.