GitHub-Repository ansehen
Live-Vorschau ansehen

Dieses Projekt gehört zu meinem ersten Modul an der Code Academy Berlin. Ziel war, sich mit Vanilla JavaScript und DOM-Manipulation wohlzufühlen. Die Vorgabe war eine Seite, die dynamisch mit Daten aus einer API befüllt wird. Dazu sollten Filter und/oder ein Sortiermenü kommen, mit dem Besuchende die Daten bedienen können.

Ich habe die sehr bekannte Pokémon API genommen. Zuerst hole ich die Namen der ersten 1154 Pokémon und baue daraus ein <datalist>. Die Idee war, eine Art Vorschlagssuche für Leute nachzubauen, die vielleicht keine konkreten Pokémon-Namen kennen.

Ein Klick auf "more" öffnet eine Shuffle-Funktion, die bis zu 5 zufällige Pokémon aus der aktuell aktiven Liste wählt. Ein Typ-Filter begrenzt Suche und Shuffle auf die gewählten Typen (das zweite select wird erst befüllt, wenn bereits ein erster Typ gewählt wurde).

Ein Klick auf die Pokémon-Karte öffnet ein Modal mit mehr Informationen. Für die Moves-Tabelle und die Sprite-Anzeige im Modal gibt es eigene Filter.

Das Projekt hat mir die Grundlagen von JavaScript beigebracht und wie man damit Interaktivität auf eine Webseite bringt. Besonders knifflig war, Werte aus mehreren Inputs zusammenzuführen und damit die Daten zu filtern. Ich habe den Call Stack und die Event Loop von JavaScript kennengelernt sowie Promises für asynchrone Abläufe, inklusive der fetch()-API für Aufrufe an eine externe API.