Transcription
Wir machen heute einen ganz einfachen Pokedex und zwar FT einfach die Pokémon an und wenn man drauf klickt, dann ändert sich der Hintergrund.
Z.B. wenn man jetzt abhaken will, welche Pokémon man schon gefangen hat, dafür verwenden wir die Pokémon API und diese URL. Das heißt, ihr seht das hier schon, hier gibt es dieses "Try now" und ihr seht auch immer das Result. Den bekommen wir, kopieren uns das Ganze hier einfach, weil wir das gleich brauchen werden.
Ihr stellt euch einfach ein Ordner, zieht den neee WS Code rein und und dann erstellt euch folgende drei Dateien: einmal eine index.html-Datei. Dort ist nicht viel drin, ganz normales Template, haben unser CSS hinzugefügt, haben dann noch einen Titel hinzugefügt, eine Liste, wo unsere Pokémon nachher gerendert werden und unser Script. Dann haben wir unsere JavaScript-Datei, der wir gleich kommen, und dann unsere style.css.
Da wir gehen jetzt in unsere JavaScript-Datei und haben uns ja von der Poke API Daten genommen. Deshalb machen wir jetzt erstmal ein paar Variablen. Das eine ist poke API URL und da kopieren wir jetzt einfach die URL hin. Wir möchten jetzt noch zwei weitere Sachen haben und zwar die poke API Limit. Da sagen wir, wir möchten jetzt mal auf die 151, die ersten begrenzen und poke API Offset und das ist jetzt null. Damit haben wir alles, was wir von der Poke API brauchen.
Und jetzt müssen wir noch hier, wenn wir in unser HTML schon haben, wir haben noch eine Liste mit Pokémon List, die wollen wir natürlich auch haben. Konst und das ist Pokémon List und das ist document.querySelector und wir gehen auf Klasse Pokémon List.
Was machen wir jetzt zuerst? Wir machen jetzt zuerst die fetch function und zwar ist es eine async Function und die nennen wir einfach fetchPokémons. Hars braucht man nicht und alles was wir machen ist erstmal holen und zwar mit fetch und dann die poke URL. Jetzt möchte ich aber das noch ein bisschen modifizieren und zwar das hier nehme ich weg und das hänge ich jetzt hier dran und zwar möchte ich hier das Limit nehmen, was in meiner Variable ist von der Poke API Limit und das Offset ebenfalls. Das heißt, hier kommt das poke API Offset hin, damit das Ganze ein bisschen variabel ist.
Dann machen wir noch eine if-Abfrage, falls irgendein Fehler auftrittt. response.ok, also ist nicht okay, dann return Console error, schreiben einfach mal ganz kurz API error hin. Fehlerbehebung könnte man dann natürlich noch mehr machen, aber für den Testzweck hier zum Vorzeigen war das erstmal so.
Das heißt, wir wollen jetzt das Ganze in JSON umwandeln. Das heißt, response.json ist gleich response.json und hier gehört natürlich eine await davor. await response.json. So und wir wissen, dass die Daten, die wir haben, befinden sich in response.json.results. Wir können uns das Ganze auch mal anschauen, ob das richtig ist, was wir zurückbekommen mit der Daten fetchPokémons rufen das Ganze auch und wenn wir jetzt im Browser schauen, dann sehen wir, wir haben unser Array. Das heißt, das passt alles gut.
Jetzt haben wir erstmal die Pokémon, wir haben diese Liste, das Fetch brauchen wir nicht mehr und wir kümmern uns jetzt um die Render function und die nennen wir einfach renderPokémon. Hier geben wir folgendes mit, wir geben mal das Pokémon mit und wir geben auch den Index mit. Den Index brauchen wir nachher, damit wir die richtigen Pokémon Bilder anzeigen können.
Jetzt erstellen wir erstmal ein neues li-Element mit document.createElement, das Ganze ist ein li. Da möchten wir natürlich erstmal die Klasse hinzufügen und zwar Pokémon List item und dann kommt der Content. liElement.innerHTML und jetzt verwenden wir folgendes und zwar diese Striche hier, damit wir uns das Ganze einfacher machen und wir haben einmal hier das Image source, das kommt jetzt gleich noch, wir lassen das erstmal leer. Alt-Tag auch leer und den Namen. Wir machen jetzt einfach Standard der halber, Z und das ist das Pokémon.name und dann schließen wir das Ganze noch.
Und am Ende müssen wir nichts mehr machen, außer einmal hier sagen, hey PokémonList.appendChild und liElement. Wir können das Ganze jetzt auch mal testen und dafür machen wir uns eine neue function und die nennen wir einfach mal init. Ganze ist eine async function wieder und alles was die macht, wir holen uns zuerst die Daten. Pokémons ist gleich Pokémons, das Ganze müssen wir natürlich mit der await noch machen und dann machen wir folgendes, wir nehmen ein forEach, gehen durch alle Pokémon durch und fügen das in unsere in der Pokémon function und hier gehen wir das Element mit, bzw. machen mal hier Pokémon, damit es einfacher ist, das ist das Pokémon und möchten noch den Index haben. Den Index, wir können hier z.B. uns einfach den Index mal kurz anschauen, hier den Index aus und das seht ihr auch gleich, warum das mit Index und dem Offset und sowas so interessant ist, weil wir jetzt, wenn wir die init function aufrufen, schauen wir uns das Ganze jetzt einfach mal im Browser an und jetzt sehen wir, wir haben Bisam und die ganzen anderen Pokémon. Allerdings Bisam ist natürlich die Pokémon Nummer 1 und nicht Null.
Und dafür wechseln wir jetzt wieder in unseren Code und fixen das Ganze und zwar machen wir hier Pokémon Index und das ist Index plus der pokeAPI Offset plus 1. Warum plus pokeAPI Offset? Na ja, wenn wir jetzt mit Null starten, ist Bisam das erste, allerdings sagen wir, wir wollen nur die ersten, die die 100 von der zweiten Generation haben, dann haben wir ein anderes Offset und deshalb nehmen wir das Ganze hier mit. Wenn ich jetzt hier den Pokémon Index nehme und wieder in den Browser wechsle, dann passt das. Jetzt dieser Bisam ist 1 und wenn wir ganz Ende me to 150 mu 10 5.
Jetzt brauchen wir das Bild und das Bild machen wir auch einen ganz einfachen Trick und zwar nehmen wir uns hier einfach den Link vom ersten Pokémon, öffnen das in neu ab, schauen das Ganze, tun uns das Ganze schöner machen und dann suchen wir einfach nach PNG und dann finden wir hier die Sprite und jetzt könnt ihr euch aussuchen, welches Sprite ihr haben wollt. Ihr könnt einfach den Default nehmen, also und das Sprite Front, schauen mal an, was uns besser gefällt. Das heißt, wir kopieren uns einmal hier und Default raus, gehen in den Code, kopieren das Ganze und sagen hier einfach konst und default, machen das Komma weg und nennen das einfach Image und default und natürlich hier müssen wir die Pokémon Nummer wegnehmen, die kommt ja gleich dazu und das heißt, wir können hier jetzt sagen bei den Image, hey bitte nehmen Image Front default plus Pokémon Index und dann alt-Text sagen wir einfach Pokémon.name.
Das heißt, wir wechseln jetzt in dem Browser wieder und jetzt haben wir hier Bisam, Bisam, Knospe, Bisam, Flor und so weiter mit den jeweiligen Pokémon. Können wir uns auch natürlich hier auch nehmen, z.B. sagen wir jetzt, wir möchten die Artworks nehmen, gehen wir uns diesen Link, gehen in unseren Code und sagen konst Image artwork URL und funktioniert genauso und können jetzt das hier austauschen. Wir möchten nicht das hier, wir möchten das Artwork und wechseln jetzt wieder in den Browser und dann haben wir das. Das sind die, was ich auch Testbeispiel verwendet habe, weil die einfach größer sind und mir einfach besser gefallen.
So, jetzt fehlt nur noch eine Funktion und zwar das man drauf klicken kann und dafür gehen wir wieder in den Code und machen jetzt folgendes, wir nehmen das Element, machen eine event listener drauf und zwar einen Klick und wenn man das Ganze klickt, dann liElement.classList.toggle und wir fügen die Klasse active hinzu und wenn ich jetzt in den Browser schau und jetzt auf Bisam, Bisam, Knospe, Bisam, Flor, Chander, Schigi und so weiter klicke, dann haben wir das Ganze fertig.
Wir haben jetzt die Standard Pokémon einfach und haben das Ganze hier ein bisschen angepasst und jetzt sagen wir mal, hey, wir möchten bitte bei 151 beginnen. Wenn ich jetzt den Browser schau, dann beginnen wir bei der zweiten Generation und das Ganze können wir auch natürlich weiterspielen. Gehen wir mal hier mal in den Browser und Code, wir ändern hier das Offset auf, wie viel waren es? 251, dann haben wir jetzt hier K, Abo, Flemly, Hydropi und so weiter und immer das richtige Bild. Hätten wir hier nicht das Offset drinnen, das heißt, ich nehme das jetzt einfach mal weg, dann seht ihr gleich, warum wir dann bemerkt ihr, Krieg Abo ist plötzlich wieder Bisam, Sah, Flem les jetzt Glumanda und unser Hydrob ist Schigi und genau deshalb nehmen wir hier das Offset, damit wir hier auch die Pokémon richtig haben.
Ihr könnt das Ganze natürlich jetzt noch erweitern mit einer Suchfunktion oder z.B. dass man nur die Generation 1, 2, 3 und die einzeln auswählen kann. Könnt ihr alles hinzufügen, aber das ist jetzt mal das basicmäßige gewesen. Ihr wisst jetzt, wie ihr von der einer API Daten holt, ihr könnt diese ganzen Daten auch auf einer Webseite anzeigen und das Ganze kann man natürlich auch erweitern, optimieren, einfach damit man mehr Übung kriegt. Ich wünsche euch einen schönen Tag und damit ciao ciao.