Transcription
Hallo Welt, in diesem Tutorial lernen wir, wie man diesen Pokedex mit JavaScript erstellt, und wir werden eine API aufrufen und die Bilder von einer anderen API nehmen, also wird es viel Spaß machen und am Ende erhalten Sie dieses schöne Raster von Pocket-Karten mit allen Pokémon der ersten Serie. Alles klar, dann legen wir los. Okay, hier haben wir ein Code-Term-Projekt, das ein wenig Styling hat. Wir haben die Hintergrundfarbe geändert und dann wird alles im Body als Flex angezeigt und in der Mitte zentriert, und auch ein wenig Styling für die h1. Jetzt können wir uns ganz auf den Pocket-Container konzentrieren, und so werden wir die Anzeige für das Div haben, also Pocket-Container, und wir werden auch eine Klasse von Pocket-Container darum setzen, damit wir es im CSS stylen können. Okay, wie Sie vermutet haben, wird dies der Wrapper für alle Pokémon-Karten sein. Wir können jetzt zum JavaScript wechseln, wo wir diesen Poking-Container verwenden werden: document.getElementById('pockey-container'). So zielen wir auf dieses Div und als Nächstes sehen wir, wir haben 150 Pokémon. Lass uns das in einer Variable speichern: pokemonsNumber wird 150 sein, so. Wir werden diese Zahl verwenden, um alle Pokémon abzurufen, aber zuerst erstellen wir eine Funktion, die wir aufrufen können, um das Pokémon zu erhalten. Also zuerst getPokemon wird eine asynchrone Funktion sein und sie wird eine ID erfordern. Welche Nummer wird das Pokémon haben? Das erste wird Bulldozer sein, wie nennt man es, das eine ID von eins haben wird. Also hier in dieser getPokemon-Funktion werden wir eine URL haben, die eine URL von einer API sein wird. Lassen Sie mich sie hierher kopieren. Von dieser URL können wir alle Daten für die Pokémon erhalten, und wir werden die ID übergeben. Das ist also die URL. Jetzt werden wir sie abrufen. Es wird ein Ergebnis zurückgeben: await fetch(URL). Und dann werden wir das Pokémon aus response.json erhalten. Lassen Sie uns das in der Konsole ausgeben, damit wir sehen können, welche Daten wir haben. Komm schon, okay, wir müssen es mit eins halten. Mal sehen. Okay, da ist ein Promise, weil ich vergessen habe, das await-Schlüsselwort hinzuzufügen. Alles klar, das ist zu lang. Mal sehen, ob wir es erwarten und wir hier in die Konsole gehen, können Sie ein Objekt sehen. Lassen Sie mich die Schriftgröße erhöhen. Okay, Sie können ein Objekt sehen. Es hat die Fähigkeiten, Moves, Spezies, Starts, alles, was Sie wollen, den Namen, die Größe, alles, was Sie wollen. Wir werden nur den Namen und seinen Typ verwenden. Okay, lass uns hierher zurückkehren, dieses Konsolenfenster schließen und weitermachen. Wie gesagt, wir haben 150 Pokémon, also werden wir diese Funktion 150 Mal aufrufen. Mal sehen, was das ist. Const fetchPokemons wird auch eine asynchrone Funktion sein und sie wird eine for-Schleife ausführen: i ist 0, bis lass es eins sein, i geht bis pokemonsNumber, i++. Deshalb brauchten wir diese Zahl, oder wir könnten sie hier einfügen, aber ja, es ist schön, Variablen zu haben, damit man genau weiß, was es ist. Und hier werden wir await getPokemon(i) machen, damit wir Pokémon abrufen können. Ja, lass uns das hier sehen, damit Sie im Grunde sehen können, dass dies aufgerufen wird, wenn das JavaScript läuft. Als Nächstes werden wir diese Pokémon-Daten verwenden und wir werden eine Pokémon-Karte erstellen. Lassen Sie uns also createPokemonCard erstellen und wir übergeben das Pokémon. Und jetzt müssen wir diese Funktion schreiben: function createPokemonCard und wir könnten ein Pokémon so entgegennehmen. Okay, und hier werden wir das HTML für das Pokémon-Element erstellen. Lass es uns so nennen. Wenn ich Pokémon auf lustige Weise sage, liegt das daran, dass es so ist. Oh, mach dir keine Sorgen über document.createElement('div') in einem String, und wir müssen eine Klasse darauf setzen, damit wir es später im CSS stylen können. Also pokemonElement.classList.add('pokemon'). Alles klar, jetzt erstellen wir das innerHTML. Lass es uns pocketInnerHTML nennen, und hier werden wir das gesamte HTML haben, das später in den okay-Container eingefügt wird. Hier, als Nächstes fügen wir dieses Paket-Element zum okay-Mond-Element hinzu. pokemonElement.innerHTML = pocketInnerHTML. Und wir können dieses Pokémon-Element an den Paka-Container anhängen. Okay, okayContainer.appendChild(pokemonElement). Lass uns hier etwas im HTML haben, damit wir sehen können, wie es auf dem Bildschirm erscheint, wenn wir alles richtig gemacht haben. Vielleicht können wir die Pokémon-ID so haben. Okay, mal sehen, wir holen die Pokémon, wir rufen alle Pokémon ab, wir rufen die Funktion auf. Alles klar, und wir erstellen die Karten. Alles scheint richtig zu sein. Lass uns die Konsole überprüfen. Okay, also fetchAlchemists vor der Initialisierung. Alles klar, das können wir dort nicht haben, weil wir eine Konstante haben, mein Fehler. Lass es uns hier platzieren. Alles klar, schau mal, jetzt haben wir alle 150 Nummern. Das bedeutet im Grunde, dass wir alle Daten haben. Wir wollen sie nur ein wenig stylen, sie in Tags einfügen und all das. Oh, lass uns das machen. Wir haben viele Daten, aber wir wollen sie ein wenig ändern. Zum Beispiel den Namen. Wenn wir hier den Pokémon-Namen einfügen, werden wir sehen, dass er klein geschrieben ist. Wir wollen also, dass der erste Buchstabe groß geschrieben wird. Lass uns das konstruieren. Sobald der Name oh, pokemonName[0] groß geschrieben wird, dann werden wir pokemonName.slice(1) anhängen, also alles, was nach eins kommt. Jetzt, wenn wir das zu unserem benutzerdefinierten Namen ändern, werden Sie sehen, dass alle Namen den ersten Buchstaben groß geschrieben haben. Lass uns die Karte erstellen. Hier im innerHTML werden wir einen Bildcontainer haben, der die Bilder aufbewahrt. Also div class="image-container" so. Und hier werden wir das Bild haben, dessen Quelle so sein wird. Im Grunde haben wir hier, lassen Sie mich Ihnen zeigen, wir haben ein Bild von dieser API. Wenn wir es öffnen und /1 sagen. Alles klar, also haben wir hier alle Daten und wir haben auch das Bild. [Musik] Ja, hier haben wir den Sprite, wir haben den Shiny von hinten, wir haben auch Shuttle-Daten. Lassen Sie mich wieder nach unten zum Sprite scrollen. Sie können hier sehen: back_shiny, front_default, front_shiny. Okay, klicken Sie darauf, Sie können dieses Bild sehen, aber es ist irgendwie hässlich. Was ich getan habe, ist, dass ich eine andere API gefunden habe, die viel bessere Bilder hat, und diese API ist hier: i.imgur.com/pokemon/ und wir können die ID sehen, die 1.png ist. Und jetzt können Sie eine schöne Version des Pokémon sehen. Oh, das ist viel besser als das, was wir vorher hatten. Deshalb werden wir stattdessen das verwenden. Also für das Bild, die Quelle, werden wir das einfügen und wir werden das zu einer ID ändern, die wir auf pokemon.id haben werden. Okay, schau mal, jetzt haben wir all diese schönen Bilder von Pokémon. Manche sind groß, manche sind klein, aber wir werden sie perfekt stylen. Als Nächstes sehen wir, wir werden die Informationen unter dem Bild haben. Also lass uns ein div haben, eine Klasse von info, und wir werden alle Informationen hier platzieren. Wir wollen die Nummer, wir wollen den Namen und wir wollen jeden Typ. Also span class="number" wird die Pokémon-Nummer haben, die im Grunde die ID ist, also pokemon.id. Wir werden das später ein wenig formatieren, aber vorerst lassen wir es so. Und jetzt haben wir den Namen, den wir hier konstruiert haben, der in einem h3-Tag mit der Klasse name steht und wir platzieren ihn hier: name. Und schließlich werden wir einen Typ haben, small class="type" wird type sein und es war ein type. Wir werden auch einen span darin haben, der der Typ sein wird. Wir müssen auch diesen Typ erstellen, denn im Moment ist er nicht so, wie wir ihn wollen. Lassen Sie mich diesen Code fertigstellen und jetzt können wir den Typ erstellen. Sehen wir uns ein Beispiel für den Typ an, den wir von der API haben. Wenn wir diese URL wieder nehmen oder hier zurückgehen. Ja, wenn wir nach Typ suchen, werden Sie sehen, dass er mehrere Typen hat, aber wir wollen den gebräuchlichsten verwenden. Was ich getan habe, ist, dass ich ein Objekt erstellt habe, das den Typ mit der Farbe verknüpft. Ich nenne dieses Objekt, lass es mich hier einfügen, kopieren. Okay, also haben wir die Farben und wir haben all diese gebräuchlichen Typen. Es beginnt mit den gebräuchlichsten: Feuer, Gras, Elektro, Wasser. Und in diesem Fall sehen Sie, dass es Gift und Gras hat, aber wir möchten Gras. Also werden wir das Array von Typen nehmen, wir werden es mappen und wir werden das extrahieren, das zuerst erscheint. Lassen Sie mich das im Code zeigen. Also hier über dem Namen, lass uns sehen: Const pokemonTypes, wir wollen diese Daten vom Pokémon extrahieren, das ist pokemon.types und wir werden es mappen, weil wir nur diesen Namen wollen. Wir mappen es, lass es uns type nennen, und wir brauchen den type.type.name. Vielleicht ist das nicht der beste Name für das Element. Lass es uns element nennen. Also nehmen wir das Element, das dies ist, wir werden es in type und dann den Namen stecken. Okay, es ist vielleicht ein wenig verwirrend, aber folge mir und du wirst es verstehen. Als Nächstes nehmen wir das pocketType und wir wollen über alle Typen hier in diesem Objekt schleifen. Also dafür erstellen wir zuerst das Haupt-Array von Typen, das object.colors sein wird, und lass mich das fluten, diesen Haupttyp, damit Sie sehen können, was ich meine. Okay, lass uns das hier auskommentieren, aber wir haben keinen Fehler. Alles klar, jetzt sehen Sie, dass es das gesamte Objekt durchläuft und die Schlüssel herausnimmt, die wir hier verwenden können. Also haben wir die Haupttypen und wir werden herausfinden, welchen Typ wir haben. Dieser Punkt nimmt ein Element entgegen, wie wir es hier haben, aber wir nennen es diesmal type, und wir werden dieses Array nehmen und sagen: indexOf(type) > -1. Im Grunde sagt das, lass es mich in eine andere Zeile setzen. Es durchläuft alle Typen und findet den ersten, der in diesem Array ist. Ich hoffe, das macht Sinn. Zum Beispiel, lass uns das schließen, lass uns das CSS hinzufügen, damit wir es sehen können. Also im CSS werden wir alles stylen. Zuerst der Pocket-Container. Okay, jetzt mit dem - so wird es angezeigt: flex, align-items: space-between. So, justify-content: center. Es wird eine max-width haben, so 1200 Pixel. margin: 0 auto, um es zu fixieren, alles zentriert. Und lass uns sagen: flex-wrap: wrap. So. Okay, jetzt sehen Sie, dass der Typ erschienen ist. Lass uns diese Bilder verkleinern, damit wir sie besser sehen können. Pokémon, wir stylen das Pokémon. Live-Hintergrundfarbe initial wird eee sein. Der border-radius wird 20 Pixel sein. Und hier drin haben wir den Bildcontainer. Lass mich ihn schnell stylen. Okay, mom image-container margin-top wird 20 Pixel sein und max-width wird 900 Prozent sein und das Bild darin wird margin-top und Pixel und max-width und Prozent sein. Hier nicht hier. Jetzt ist es besser. Lass uns hier die feste Breite und Höhe hinzufügen, damit wir es besser sehen können: 120 Pixel und Höhe 120 Pixel. Okay, schau mal, viel, viel besser. Dieser Bildcontainer hat auch einen border-radius von 50% und lass uns eine Hintergrundfarbe sehen, die fast weiß ist mit ein wenig Deckkraft. Weiß mit 0.6. Okay, so. Lass uns zurück zur Karte gehen, um sie größer zu machen, indem wir 20 Pixel hinzufügen. Alles wird so in der Mitte sein und ein wenig Rand haben, dann fixieren. Okay, viel besser, und wir brauchen diesen margin-top nicht. Als Nächstes stylen wir das info. Being four wird der Wrapper für den Text sein. Pokemon-info wird margin-opt-ripples sein. Als Nächstes das Pokémon-Nummer. Wir werden jetzt alles stylen, da wir hier im CSS sind. Pokemon-Nummer wird Hintergrundfarbe sein. Lass uns sehen, warum wir die gesamte Box nicht sehen. Das liegt daran, dass wir dieses Bild-Tag nicht geschlossen haben. Alles klar, schau mal, viel besser. Jetzt haben wir dieses Bild-Tag nicht geschlossen und wir hatten die Info, die in den Bildcontainer ging. Alles klar, jetzt können Sie die Karten viel besser sehen, perfekt. Lass uns zurück zum Styling des Pokémon gehen. Lass uns den Box-Shadow hinzufügen. Box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5). Okay, wir haben ein wenig Tiefe. Als Nächstes für die Nummer hier haben wir einen border-radius und Pixel, eine Schriftgröße von 0,8em und einen Abstand von 5 Pixeln, 10 Pixeln. Okay, perfekt. Sie sehen jetzt, dass es einen schönen Hintergrund hat. Und für den Namen, lass uns das hier kopieren und das zu name ändern. Alles klar, hier haben wir einen Rand von 15 Pixeln, 0, 7 Pixel, Buchstabenabstand 1 Pixel. Okay, das war's für das CSS. Was noch zu tun ist, ist, diese Nummer neu zu formatieren und alle Karten die Farbe des Typs haben zu lassen. Lass uns das machen. Hier bei der Nummer haben wir diese ID. Was wir tun wollen, ist, davor das Hashtag zu haben, so. Wir wollen im Grunde drei Zahlen haben. Hier müssen wir sagen: 001, 002 und hier müssen wir sagen: 019. Das können wir tun, indem wir die padStart-Funktion auf diesen String anwenden. Zuerst konvertieren wir das in einen String: toString() und als Nächstes können wir padStart verwenden. Wir werden sagen, dass wir eine Länge von 3 haben wollen und mit 0 beginnen. Sie sehen jetzt, wie schön es formatiert ist. Also haben wir 001 mit dem Hashtag davor, es gibt 07 und so weiter und so fort, was perfekt ist. Lass uns die Hintergrundfarbe der Karte auf eine dieser Farben setzen. Sie sehen hier, wir haben alle Typen und die damit verbundene Farbe. Was wir tun müssen, ist, hier unter dem Namen zu sagen: Lass uns sagen: color, das wird colors[type] sein. Wir haben hier den Typ, Gras und alles, und wir haben auch dieses Objekt. Also nehmen wir diesen Hex-Wert, der sich in color befindet, und als Nächstes können wir ihn auf das pokemonElement anwenden, auf den Stil, und die Hintergrundfarbe wird color sein. Alles klar, und schau mal, jedes Pokémon hat jetzt eine schöne Kartenfarbe mit seinem eigenen Typ, was perfekt ist. Wir können das speichern und wenn es neu lädt, lass uns sehen, wir sollten alle Pokémon wieder bekommen. Schau mal, sehr schön. In diesem Tutorial haben wir gelernt, wie man eine API aufruft, wie man die Daten nimmt, wie man sie manipuliert, weil sie nicht so war, wie wir sie wollten. Wir mussten sie ändern. Wir mussten auch mit einer anderen API arbeiten, um diese schönen Bilder zu bekommen, und wir hatten auch etwas CSS, um alles zu stylen und es schön aussehen zu lassen. Vielleicht als Herausforderung für Sie können Sie einige der zusätzlichen Daten verwenden, die wir hier haben. Sie sehen, es gibt viele Daten, und wenn Sie über die Karte schweben oder vielleicht die Karte anklicken, fügen Sie weitere Informationen über das Pokémon hinzu. Das ist eine schöne Herausforderung, die Sie annehmen können. Wenn Sie es schaffen, stellen Sie sicher, dass Sie es im Kommentarbereich unten hinterlassen, damit ich es mir ansehen kann. Das war's für dieses Tutorial. Ich hoffe, es hat Ihnen gefallen. Wenn ja, geben Sie ihm ein Like, abonnieren Sie für weitere Videos wie dieses, und ich sehe Sie im nächsten Tutorial. Tschüss. [Musik] Sie.