In typeScript/poketypefilter.ts hatten wir vor einiger Zeit eine Funktion geschrieben, die eine nach einem Typ gefilterte Liste an Pokémon ausgibt.
Jetzt, da wir dynamisch unser DOM manipulieren können, wollen wir diese Funktion nutzen, um besagte Infos nicht nur über die Konsole auszugeben, sondern im Browser zu visualisieren.
Erstellen einer statischen Liste
Dafür machen wir nacheinander folgende Dinge:
[x] Erstelle eine neue Seite pokemon.html im public Verzeichnis (wieder mit leerem Body)
[x] Erstelle eine neue Datei pokemon.ts im src Verzeichnis, die du in pokemon.html einbindest
[x] Erstelle einen neuen Ordner utils in deinem src Order und verschiebe poketypefilter.ts dahin
[x] Anlegen und Einbinden einer PokemonCard Komponente
Die PokemonCard soll ein UI Element / eine Komponente sein, die alle Eigenschaften eines Pokemon rendert – also den Namen und die Typen.
Beim Design darfst du dich hier frei austoben.
Die Komponente soll benutzt und in den Body eingefügt werden, sodass sie im Browser sichtbar wird
[x] Auflisten aller Pokémon
Du hast in poketypefilter.ts nicht nur die Filterfunktion, sondern auch einen pokedex definiert, der die Infos zu allen Gen 1 Pokémon enthält. Benutze diese Liste um in pokemon.ts für jeden Eintrag eine PokemonCard zu rendern.
[x] Wrapper der Liste in ein extra Element
Erstelle ein neues div Element mit der id pokemon-list-wrapper. Füge nun deine Liste an Pokémon in dieses Element an Stelle des Bodies ein.
Filtern der Liste durch Buttons
[x] Button Komponente erstellen
Es soll eine Komponente Button gebaut werden, die 2 Props enthält:
label: string für den Text, den der Button anzeigen soll
onClick: () => void für die Funktion, die ausgeführt werden soll, wenn der Button geklickt wird
Als Hilfestellung dazu hier nochmal 2 Ressourcen für Buttons und Click Events:
[x] Button Komponente statisch einbinden
Rendere deine Button Komponente einmal für den Typ water statisch über deine Pokémonliste.
Definiere die onClick Funktion so, dass die Liste der Pokémon nur noch Wasserpokémon anzeigt.
Technisch gehst du das Ganze am besten so an, dass du zuerst den Inhalt von pokemon-list-wrapper löscht, indem du die innerHTML Variable des Elements auf "" setzt.
Anschließend kannst du die gefilterten Daten deines pokedex benutzen um erneut deine Liste zu rendern.
[x] Alle Buttons dynamisch rendern
Natürlich willst du auch hier wieder nicht händisch für jeden Typen einen neuen Button anlegen, sondern das ganze dynamisch rendern.
Du hast zwar in poketypefilter.ts schon deinen TypeScript-Typen type Type = "water" | ..." angelegt, aber da man über Typen nicht schleifen kann, weil es kein Array ist, sondern eben nur ein Typ, legst du am besten einfach ein Array an, welches die Strings als tatsächliche Werte bereitstellt. Also const types = ["water", ...].
Dieses Array kannst du dann benutzen, um in pokemon.ts drüberzuschleifen und deine Buttons dynamisch zu rendern.
Ziel
In
typeScript/poketypefilter.tshatten wir vor einiger Zeit eine Funktion geschrieben, die eine nach einem Typ gefilterte Liste an Pokémon ausgibt. Jetzt, da wir dynamisch unser DOM manipulieren können, wollen wir diese Funktion nutzen, um besagte Infos nicht nur über die Konsole auszugeben, sondern im Browser zu visualisieren.Erstellen einer statischen Liste
Dafür machen wir nacheinander folgende Dinge:
pokemon.htmlimpublicVerzeichnis (wieder mit leerem Body)pokemon.tsimsrcVerzeichnis, die du inpokemon.htmleinbindestutilsin deinemsrcOrder und verschiebepoketypefilter.tsdahinPokemonCardKomponente DiePokemonCardsoll ein UI Element / eine Komponente sein, die alle Eigenschaften einesPokemonrendert – also den Namen und die Typen. Beim Design darfst du dich hier frei austoben. Die Komponente soll benutzt und in den Body eingefügt werden, sodass sie im Browser sichtbar wirdpoketypefilter.tsnicht nur die Filterfunktion, sondern auch einenpokedexdefiniert, der die Infos zu allen Gen 1 Pokémon enthält. Benutze diese Liste um inpokemon.tsfür jeden Eintrag einePokemonCardzu rendern.divElement mit der idpokemon-list-wrapper. Füge nun deine Liste an Pokémon in dieses Element an Stelle des Bodies ein.Filtern der Liste durch Buttons
Buttongebaut werden, die 2 Props enthält:label: stringfür den Text, den der Button anzeigen sollonClick: () => voidfür die Funktion, die ausgeführt werden soll, wenn der Button geklickt wird Als Hilfestellung dazu hier nochmal 2 Ressourcen für Buttons und Click Events:waterstatisch über deine Pokémonliste. Definiere dieonClickFunktion so, dass die Liste der Pokémon nur noch Wasserpokémon anzeigt. Technisch gehst du das Ganze am besten so an, dass du zuerst den Inhalt vonpokemon-list-wrapperlöscht, indem du dieinnerHTMLVariable des Elements auf""setzt. Anschließend kannst du die gefilterten Daten deinespokedexbenutzen um erneut deine Liste zu rendern.poketypefilter.tsschon deinen TypeScript-Typentype Type = "water" | ..."angelegt, aber da man über Typen nicht schleifen kann, weil es kein Array ist, sondern eben nur ein Typ, legst du am besten einfach ein Array an, welches die Strings als tatsächliche Werte bereitstellt. Alsoconst types = ["water", ...]. Dieses Array kannst du dann benutzen, um inpokemon.tsdrüberzuschleifen und deine Buttons dynamisch zu rendern.