JavaScript-Projekt: So erstellst du eine Joke Teller-App

1. Einführung: Jeder in diesem Kurs, wir werden eine Zufallscode-Generator-App mit JavaScript erstellen . So wird unsere Zufallscode-Generator-App aussehen. Wenn Sie auf diese Schaltfläche mit dem nächsten Code klicken, wird ein zufälliger Code generiert, und die Autorym dieses Codes wird ebenfalls generiert Das ist der Code und das ist das Autorym dieses Codes. Wenn Sie erneut auf diese Schaltfläche mit dem nächsten Code klicken, wird ein neuer Code mit dem Autorym generiert, wird ein neuer Code mit dem Autorym generiert sodass Sie auf diese Schaltfläche für den nächsten Code so oft klicken können, wie Sie möchten, um Zufallscodes zu generieren und um diese Art von Codes zu generieren Wir werden diese DumjSNS-API verwenden Darüber werden wir in der Klasse sprechen . Wenn Sie also wissen möchten, wie man eine solche Zufallscode-Genitor-App erstellt , treten Sie der Klasse bei und lassen Sie uns mit der Erstellung dieses Projekts beginnen 2. Struktur mit HTML erstellen: In diesem Video werden wir also den tamilischen Code für unser Projekt schreiben tamilischen Code für unser Projekt Um den Code zu schreiben, verwende ich diesen Visual Studio-Code-Editor und vergessen Sie diesen Visual Studio-Code-Editor nicht, in diesem Visual Studio-Code-Editor einen Ordner zu erstellen Und in diesem Ordner müssen Sie drei Dateien erstellen: App, Punkt, JS-HTML-Datei und CSS-Datei und in diese HTML-Datei gehen, und in dieser HTML-Datei können wir HTML-Code aufschreiben. Um also mit dem Schreiben unseres HTML-Codes zu beginnen, müssen wir eine HTML-Boilerplate erstellen Um das Map-Boilerplate zu erstellen, können Sie einfach Eclamon Mark eingeben und auf Enter klicken . Ihr Und jetzt werden wir mit dieser JavaScript-Datei unsere HTML-Datei mit der CSS-Datei verknüpfen der CSS-Datei Um diese HTML-Datei mit der CSS-Datei zu verknüpfen, können Sie einfach Link tech eingeben. Geben Sie also einfach Link ein und klicken Sie auf diesen Link Column CSS und Ihre CSS-Datei wird mit Ihrem HTLFI verknüpft . Überprüfen Sie einfach , ob Ihr CSS-Dateiname mit dieser HRF Mein CSS-Dateiname ist Stylo CSS und in diesem HM Das bedeutet, dass mein CSS-Dateiname mit diesem HRF-Dateinamen mit diesem HRF-Dateinamen Und um diese JavaScript-Datei mit unserem HTML-Code zu verknüpfen, müssen Sie in diese Haupttechnologie und in diesen Haupttext gehen , Sie müssen eine Skripttechnologie erstellen, ein Skript schreiben und Sie erhalten diese Skriptspalte ARC. Klicken Sie einfach darauf In diesem SRC musst du deine JavaScript-Datei eingeben. Unsere JavaScript-Datei ist AB dot js. Ich gebe Abdo Js ein. Und jetzt haben wir unsere CSS- und JavaScript-Datei erfolgreich verknüpft unsere CSS- und JavaScript-Datei Und jetzt können wir unseren HTML-Code schreiben. Was wir also in diesen HTML-Code schreiben werden, um das zu überprüfen, ich öffne mein Projekt und in diesem Projekt können Sie sehen, dass wir einen Zufallscode-Generator geschrieben haben, und dieser wurde mit H One Tech geschrieben. Ich erstelle eine H-one-Technologie und dann eine Schaltfläche, in die der nächste Code geschrieben wird. Das heißt, ich erstelle eine Schaltfläche für den nächsten Code und klicke einfach auf diese Schaltfläche, um zu überprüfen, was passiert, wenn wir etwas verpassen. Um diesen Code anzuzeigen, erstellen wir einen H-one-Tech und um diesen Autorennamen anzuzeigen, erstellen wir einen Paragraphen-Tech und wir erstellen einen Next-Code-Button. Wir müssen also nur drei Dinge tun. Wir müssen eine H-one-Technologie, eine Paragraph-Technologie und eine Button-Technologie entwickeln . Sie können also einfach H one eingeben, um 1h1t zu erstellen und in diesem H one take schreibe ich einen Zufallscode-Generator Ich lade das einfach neu und kopiere es und füge es hier ein, Zufallscode-Generator, und jetzt erstelle ich einen Absatz für den Namen des Autors Jetzt haben wir keinen Autor mehr, wir bekommen das Autorym von der APA, worüber wir in den anderen Videos sprechen werden Erstellen Sie diesen leeren Absatz t. Während wir diesen leeren Absatz te erstellen, erstellen wir diesen leeren Absatz, um unser Autorym anzuzeigen , sodass wir vorerst kein Synonym haben Deshalb habe ich es leer gelassen. Und dann musst du eine Taste erstellen also um eine Schaltfläche zu erstellen, nimm einfach Schreibtaste, U, doppeltes T und Taste. Und was schreiben wir in diesen Button? In diesen Button werden wir den nächsten Code schreiben. Kopieren Sie das und fügen Sie es hier ein, Control V, und speichern Sie es dann. Und klicken Sie mit der rechten und dann auf „Mit Live-Server öffnen Unser Projekt wird in unserem kurzen Browser angezeigt. Wie Sie sehen können, können Sie jetzt eine H-one-Technologie und eine Button-Technologie sehen , und dieser Paragraph-Teg ist ausgeblendet, weil wir keinen Inhalt innerhalb dieser Absatztechnologie geschrieben haben keinen Inhalt innerhalb dieser Absatztechnologie , weshalb er versteckt ist Das ist es für unseren HTML-Code. Jetzt schreiben wir den CSS-Code für unser Projekt. Wir sehen uns im nächsten Video. 3. Hinzufügen von Styling: In diesem Video werden wir CSS-Code für unser Projekt schreiben. Um CSS-Code zu schreiben, öffne ich meine VS-Codehilfe und öffne dann diese Style-CSS-Datei In dieser Style-CSS-Datei gebe ich meinen Style-CSS-Code ein. Was könnten wir also schreiben? Um das zu überprüfen, öffne ich einfach mein Projekt. Und in diesem Projekt, wie Sie sehen können, Winken einer Hintergrundfarbe und dann eine Wellenschriftfamilie bedeutet das Winken einer Hintergrundfarbe und dann eine Wellenschriftfamilie in diesem Text eine andere Schriftfamilie in diesem Text. Und dann etwas Styling in dieser Schaltfläche. Für diese Schriftfamilie werde ich diese Google-Schriftarten verwenden. Sie können also einfach diese Google-Telefons-Website besuchen und nach Avorito suchen. Nach der Suche Avoito erhalten Sie diese Art von Oberfläche Und von hier aus müssen Sie einfach auf diese Eingabe klicken und dann diesen Link kopieren , was bedeutet, diese Eingabe-URL zu kopieren und sie dann hier einzufügen Am Anfang der CSS-Datei, und jetzt fange ich an, meinen CSS-Code zu schreiben. Zuallererst möchte ich diesen Inhalt in den Mittelpunkt stellen. Um diesen Inhalt in den Mittelpunkt zu rücken, wähle ich einfach diese Körpertechnologie Um diese Körpertechnologie auszuwählen, kann ich Körper eingeben. Und erstelle diese geschweiften Klammern und jetzt ist mein Body-Tag ausgewählt Was ich tun möchte, ich möchte diesen Inhalt in den Mittelpunkt stellen Um diesen Inhalt in den Mittelpunkt zu rücken, werde ich Flexbox verwenden Um Flexbox zu verwenden, müssen Sie die Eigenschaft Display Flex verwenden Geben Sie einfach Display und dann Flex ein, dann ist Flex Direction Column Flex Direction Column Um den Inhalt horizontal in die Mitte zu bringen, verwende ich „Inhalt ausrichten und „ Inhaltsmitte Um diesen Inhalt vertikal in die Mitte zu bringen, ausrichten“. Um diesen Inhalt vertikal in die Mitte zu bringen, verwende ich „Elemente zentrieren Elemente ausrichten und zentrieren. Sie also die Elemente in der Mitte ausrichten, wird unser Inhalt vertikal in die Mitte gebracht . Da wir also unsere Elemente vertikal zentrieren wollen, müssen wir eine Höhe definieren. Die Höhe wird also 100 Ansichten betragen. Jetzt wird unser Inhalt vertikal in der Mitte dieser hundert Ansichten ausgerichtet . Wie viel sind also 100 Views? 100 meint er die ganze Seite, das sind 100 Aufrufe von oben nach unten. Wenn Sie 50 vg eingeben, die halbe Seite dieses Browsers 50 vg und 100 g ist die ganze Seite. Und jetzt steht unser Inhalt im Mittelpunkt. Was ich jetzt tun möchte, , dass ich die Hintergrundfarbe ändern möchte. Um die Hintergrundfarbe zu ändern, können Sie einfach den Eigenschaftsnamen Hintergrundfarbe verwenden. Geben Sie also die Hintergrundfarbe ein, und die Hintergrundfarbe hat 333. Speichern Sie Evolve jetzt in unserem Browser. Jetzt wird unsere Hintergrundfarbe geändert. Nun, was ich ändern möchte, jetzt möchte ich diese Schriftfamilie und dann die Schriftfarbe ändern . Um die Schriftfamilie zu ändern, gebe ich einfach Schriftfamilie ein. Und was wird unsere Schriftfamilie sein? Unsere Schriftfamilie wird es sein. Ich öffne einfach meine Google-Telefone und schaue nach, ob unsere Schriftfamilie Avoroserif sein wird Also kopiere das einfach und füge es hier ein. Also entferne ich einfach diese Schriftfamilie und füge sie hier ein. Und ich werde die Farbe dieses Textes ändern. Um die Farbe des Textes zu ändern, können Sie einfach Farbe eingeben und diese Farbeigenschaft ändert die Farbe des Textes. Und die Farbe des Textes sollte weiß sein, also gebe ich Weiß ein. Oder ich kann einfach FFF eingeben, also FFF. Dies ist der Hex-Code der weißen Farbe. Also speichern Sie das einfach und schauen Sie in Ihrem Browser nach, öffnen Sie das. Wie Sie sehen können, wird jetzt unsere Schriftfamilie geändert, und dann ist die Textfarbe weiß. Und jetzt werden wir diese Button-Technologie entwerfen. Um diese Button-Technologie zu entwerfen, wähle ich Button Tech um Button Tech auszuwählen, gebe ich Button ein. Und was sind die Änderungen, die ich an diesem Button-Tack vornehmen möchte Ich möchte diese Button-Technologie vergrößern. Um dieses Button-Tag groß zu machen, verwende ich Padding, und dann wird die Schriftgröße dieser Schaltfläche 16 Bigel sein Dann füge ich dieser Schaltfläche einen Rahmen hinzu. Wie Sie sehen können, gibt es in dieser Schaltfläche einen Rahmen , um einen Rahmen hinzuzufügen . Ich verwende die Rahmeneigenschaft und füge eine Hintergrundfarbe hinzu , die transparent ist. Lass uns das machen. Um diese Schaltfläche etwas größer zu machen, verwende ich die Padding-Eigenschaft Der Abstand zwischen oben und unten beträgt zehn Pixel, also zehn Pixel oben und unten, dann 20 Pixel von links und rechts Also zehn Pixel oben und unten und 20 Pixel links und rechts. Speichern Sie den Evoluear-Browser, sodass unser Button jetzt groß ist. Jetzt möchte ich die Schriftgröße dieses Textes erhöhen. Um die Schriftgröße dieses Textes zu erhöhen, kann ich einfach die Schriftgröße eingeben, und die Schriftgröße beträgt 16 Pixel, also 16 Pixel. Und jetzt möchte ich ändern, dass ich dieser Schaltfläche nur einen Rahmen hinzufügen möchte , um einen Rahmen hinzuzufügen Ich verwende diese Rahmeneigenschaft und der Rahmen wird zwei Pixel einfarbig sein und die Rahmenfarbe . Die Rahmenfarbe wird also weiß sein, also gebe ich einen FFF ein Das ist also der X-Code der weißen Farbe. Also lass uns Eva in unserem Browser speichern. Also können wir jetzt nichts mehr sehen. Wir müssen diese Knöpfe farblich transparent machen. Dann können nur wir die Grenze sehen. Um die Farbe der Schaltflächen transparent zu machen, können Sie einfach die Hintergrundfarbe eingeben und die Hintergrundfarbe wird transparent. Also Hintergrundfarbe, dann transparent. Das macht unseren Button also transparent. Wie Sie sehen können, haben wir jetzt eine Schaltfläche mit einem Rand von zwei Pixeln. Lassen Sie uns das jetzt überprüfen. Das hat also auch einen Rand mit zwei Pixeln, und das hat auch einen Rand mit zwei Pixeln. Lassen Sie uns nun die Textfarbe dieser Schrift ändern. Ändern Sie die Textfarbe dieses nächsten Zitats. Um die Textfarbe zu ändern, können Sie einfach Farbe eingeben, und die Farbe wird weiß sein. Farbe und dann FFF. Nehmen wir an, wir suchen unseren Ruderer. Jetzt sieht unser Button weiß aus. Jetzt sieht unsere Seite genauso aus wie diese Seite. Ja, aber es gibt einen kleinen Unterschied. Auf dieser Seite gibt es einen Abstand von 40 Weixel zwischen diesem Button und diesem H1t Wählen wir diese H-one-Technologie aus und fügen Sie einen gewissen Spielraum hinzu. Also Rand, Rand unten, 40 Pixel. Dadurch wird der untere Rand von H one tech zu button Tech hinzugefügt von H one tech zu button Tech was bedeutet, dass zwischen dieser H-one-Technologie und der Button-Technologie eine Lücke von 40 Pixeln bestehen wird . Also lass uns das neu laden. Das ist unsere echte App, und das ist die App , die wir entwickeln Wie Sie jetzt sehen können, sehen beide Dinge gleich aus. Und jetzt möchte ich diesen Cursor in einen Zeiger umwandeln, während ich mit der Maus über diese Schaltfläche fahre Dazu erhalten wir eine Eigenschaft, der Eigenschaftsname ist Cursor, also geben Sie einfach Cursor und dann Zeiger Jetzt verwandelt sich unser Cursor in ein Handsymbol, während wir den Mauszeiger über diese Schaltfläche Wie Sie sehen können, ist unser Cursor jetzt dieser Pfeil und wenn ich mit der Maus über diese Schaltfläche fahre, wird mein Cursor in dieses Handsymbol umgewandelt Und jetzt werden wir dieser Schaltfläche einen Hover-Effekt hinzufügen, diese Art von Hover-Effekt, um diesen Hover-Effekt hinzuzufügen, wir können einfach Button column hover eingeben Also gehe ich unter dieses Button-Tag und gebe dann Button und gebe dann Und um dieser Schaltfläche einen Hover hinzuzufügen, kann ich einfach diese Spalte verwenden und dann Hover eingeben Dieser Hover fügt unserer Schaltfläche also einen Hover-Effekt hinzu. Also, welche Art von Effekt wollen wir? Wir wollen die Hintergrundfarbe von dieser Transparenz auf Weiß ändern . Jetzt ist die Hintergrundfarbe unserer Schaltflächen transparent. Ich möchte diese Hintergrundfarbe auf Weiß ändern, wann immer wir den Mauszeiger über diese Schaltfläche Also entferne einfach dieses transparente Bild und tippe Weiß oder gib den Hexadezimalcode von Weiß ein, was FFF ist, und speichere, wenn ich in unserem Browser nachschaue Wie Sie sehen können, wird unsere Schaltfläche jetzt weiß, Maus darüber fahren während wir mit der Nein, das ist nicht unsere App , an der wir gerade arbeiten. Das ist die App, an der wir arbeiten. Es gibt also ein Problem. Unsere Schriftfarbe sollte auch auf Schwarz geändert werden , wir werden den Mauszeiger Um die Schriftfarbe zu ändern, kannst du einfach color eingeben und dann hat Color VV den Wert 000, was ein Code für schwarze Farbe ist Also speichere das und die Lautstärke in unserem Browser. Also jetzt funktioniert es richtig. Also haben wir diese Stunde erfolgreich hinzugefügt, wenn überhaupt. Und ich denke, unsere CSS-Arbeit ist erledigt. Diese Seite und diese Seite sehen fast gleich aus. Es gibt keinen Unterschied. Das ist es für unser CSS-Video. Lassen Sie uns diesem Projekt nun JavaScript hinzufügen. 4. Daten von API abrufen: In diesem Video werden wir JavaScript für dieses Projekt schreiben Warum wir JavaScript schreiben werden, wir schreiben JavaScript, wir denn wenn ich auf die nächste Code-Schaltfläche klicke , wird nichts angezeigt, was bedeutet, dass hier keine zufälligen Codes generiert werden oder dass hier keine Zufallscodes angezeigt wurden. Um also Zufallscodes anzuzeigen wenn wir auf die Schaltfläche „ Nächster Code“ klicken, werden wir JavaScript verwenden was bedeutet , dass wir JavaScript schreiben werden. Wie kommen wir nun an die Zufallscodes , die wir hier anzeigen werden? Um die Zufallscodes zu erhalten, die wir hier anzeigen werden , können wir die API verwenden. Öffnen Sie einfach Ihren Browser und suchen Wu Jason Codes API und klicken Sie auf diesen ersten Link. Und scrolle ein bisschen nach unten und du wirst diesen Abschnitt sehen, einen zufälligen Code bekommen und dieses Ding kopieren. Ich kopiere dieses Ding und öffne deinen VS-Code, das heißt öffne deinen Code oder wie du siehst, ist unsere JavaScript-Datei leer und jetzt werden wir JavaScript-Code schreiben. Zuallererst, was wollen wir tun? Zuallererst möchten wir diese H one Tech, Paragraph Tech und Button Tech auswählen . Um diese H-one-Technologie, das Absatz-Tag und die Button-Technologie auszuwählen, können wir entweder eine Variable erstellen und die Punktabfrage-Auswahl für Dokumente verwenden Jetzt erstelle ich eine Variable für den Header. Header bedeutet, ein H-One-Tag auszuwählen . Ich erstelle diese Variable Header, HEADER Fahrer. Um dieses H1t auszuwählen, kann ich Document Query Selector schreiben, also Document Dot Query Selector, und innerhalb dieser Klammern gebe ich das Tagym ein, der Tagname ist H one Jetzt kopiere ich dieses Ding und füge es zweimal ein. Warum ich es zweimal einfüge, weil ich Button-Tag und Absatz-Tag auswählen möchte Button-Tag und Absatz-Tag auswählen Entfernen Sie einfach dieses H und geben Sie Absatz ein . Für den Absatz der Variablenname Autor Geben Sie AUT HR author ein, und dann wollen wir den Schaltflächentext auswählen , also entfernen Sie dieses H und geben Sie Button ein , weil der Tag-Name Button ist Deshalb tippe ich Button und entferne diesen Header und der Variablenname für die Schaltfläche oder der Variablenname für die Schaltfläche ist BTN Jetzt erstelle ich eine Funktion, um eine Funktion zu erstellen, ich gebe einfach function ein und der Name der Funktion wird generiert und innerhalb dieser geschweiften Klammern kopiere ich ihn und füge ihn hier ein. Das heißt, ich kopiere diesen API-Endpunkt oder ich kann den ganzen Code kopieren Ich kopiere diesen ganzen Code und füge ihn in unseren Browser ein, auch nicht in unseren Browser in unseren Code. Jetzt erkläre ich dir , was dieser Code macht. Wenn Sie sich mit asynchroner Programmierung auskennen, wissen Sie, dass Fetch ein Versprechen zurückgibt , und wenn etwas Promise zurückgibt, können wir die Methode then damit verwenden Das heißt jetzt, dass dieser Abruf Promise zurückgibt, deshalb können wir die Then-Methode verwenden und wir führen dann die Methodenverkettung durch, wir führen hier Methodenverkettung durch. Warum wir Methodenverkettung durchführen Weil diese Methode zuerst verwendet wird , um die Antwort vom AP-Endpunkt zu erhalten, und die zweite Methode dann wird verwendet, um die Daten vom APA-Endpunkt abzurufen die Daten vom Diese Methode zuerst erhält dann die Antwort von diesem AP-Endpunkt Bei der zweiten Then-Methode möchte ich jetzt die Daten abrufen. Ich kann einfach Daten weitergeben oder ich kann alles übergeben, aber ich möchte Daten weitergeben. Das heißt, Sie können alles für Daten schreiben, aber ich möchte nur Daten schreiben und diese Pfeilfunktion erstellen, und ich erstelle Curryklammern und innerhalb dieser kurvenförmigen Klammern werde ich diese Daten in der Konsole protokollieren. So kann ich sehen, welche Art von Daten wir von diesem APA-Endpunkt erhalten. Geben Sie Daten hier in diese Registerkarte der Konsole ein und speichern Sie Lassen Sie uns einen Blick in unseren Browser werfen. Klicken Sie auf F 12. Jetzt können wir in diesem Konsultations-Tab nichts mehr sehen, warum wir keine Ausgabe erhalten. Wir erhalten keine Ausgabe , weil wir diese Funktion nicht aufgerufen haben. Ich rufe diese Funktion auf der Registerkarte „Konsole“ auf, also schreibe ich ein Punktprotokoll für die Konsole. Darin rufe ich diese Funktion auf. Speichern wir jetzt Evolve in unserem Browser. Wie Sie jetzt sehen können, erhalten wir ein Objekt, das ist ein Datenobjekt, und innerhalb dieses Datenobjekts erhalten wir die Autorennym-ID und den Aus dieser AuthornymID und dem Code wollen wir nur Wenn Sie von diesem Objekt aus auf den Code zugreifen möchten, müssen Sie einfach data dot Object eingeben Warum wir ein Datenpunktobjekt eingeben Weil wir hier Daten übergeben haben. Wenn Sie etwas anderes übergeben, müssen Sie einen anderen Punktcode schreiben , um auf den Code zuzugreifen. Lassen Sie uns nun auf den Code zugreifen, um auf den Code Was ich tun kann, ist in diesem Konsolen-Tab, ich kann einfach Datenpunkt schreiben und was zu schreiben data.it schreiben Jetzt bekommen wir die Fehlermeldung, warum wir die Fehlermeldung bekommen. Wir erhalten eine Fehlermeldung, weil ich Punkt geschrieben habe Entferne einfach diesen Punkt und lass uns unseren Browser speichern und weiterentwickeln Wir müssen den Datenpunktcode schreiben. Ich kopiere dieses Ding und lass uns den Datenpunktcode eingeben. Ich entferne diesen Abstand, entferne einfach diesen Abstand und ich speichere ihn und lass uns in unserem Browser nachschauen. Wie Sie sehen können, bekommen wir gerade den Code. Wenn Sie auf den Autor zugreifen möchten, was Sie tun werden, geben Sie data dot author ein, weil in diesem Objekt der Autor für den Autorennamen geschrieben wurde. Entfernen Sie diesen Code und schreiben Sie Autor. Lassen Sie uns einen Blick in unsere Liste werfen. Wie Sie sehen können, bekommen wir gerade authornom. Jetzt müssen wir nur noch dieses Autorom und den Code in unserem Projekt anzeigen Autorom und den Code in unserem Der Code wird in diesem H One Tech angezeigt und der Name des Autors wird in diesem Absatz-Tag angezeigt Ich wähle diese H-one-Technologie aus, um diese H1t auszuwählen, ich schreibe den Variablennamen Der Variablenname ist Header, also schreibe ich Header und Punkt Der innere Text der H One Tech wird der Code sein. Schreiben Sie einfach den inneren Text. Tierischer Text entspricht, ich werde diesen Bactis benutzen, warum verwende ich den Baptis? Ich verwende Bactis, weil ich den ternären Operator verwenden möchte. Warum wir den ternären Operator verwenden, wir verwenden den ternären Operator, weil wir diese Daten verwenden wollen, einfach Daten schreiben wollen oder wir sehen, dass wir Daten in diesen inneren Text einfügen wollen Deshalb verwenden wir den ternären Operator. Schreiben Sie jetzt einfach Daten und um auf den Code zuzugreifen, müssen Sie Punktcode schreiben Lass uns speichern und lass uns in unserem Browser nachschauen. Wie Sie jetzt sehen können, erhalten wir einen Code in unserem H-One-Tag. Für den Autor mache ich einfach dasselbe. Ich kopiere das einfach und füge es darunter und entferne diese Überschrift und gebe den Variablennamen dieses Absatzes ein. Der Variablenname dieses Absatzes ist Autor, geben Sie Autor ein und statt dieses Codes müssen Sie Autor schreiben, Autor schreiben. Ich werde diesen Autor von hier entfernen. Speichern wir das also und schauen wir uns das in unserem Browser an. Wie Sie sehen können, erhalten wir jetzt einen Code N, wir bekommen auch den Namen des Autors. Klicken wir nun auf die Schaltfläche für den nächsten Code. Wenn ich auf diese Schaltfläche für den nächsten Code klicke, passiert nichts. Bedeutet, dass sich unser Code nicht ändert, oder wir können sagen, dass wir keinen zufälligen Code generieren können. Wie generiert man diesen Zufallscode? Um Zufallscode zu generieren, müssen wir diese Funktion immer wieder aufrufen wenn wir auf diese Schaltfläche klicken. Das heißt, wenn wir einmal auf diese Schaltfläche klicken, rufen wir diese Funktion einmal auf. Wenn wir zweimal auf diese Schaltfläche klicken, rufen wir diese Funktion zweimal Wenn diese Funktion zweimal aufgerufen wird , bedeutet ein neuer Funktionsaufruf erfolgt. Wir werden ein neues Ergebnis erhalten und wir werden neue Daten erhalten , was bedeutet, dass wir neuen Code und einen neuen Autorennamen erhalten werden. Ich werde dieses Konsolendokument entfernen und einfach Button Punkt bei Evenistener eingeben weil wir eine Funktion ausführen wollen, wenn wir auf die Schaltfläche klicken Ich schreibe einfach Button Dot bei Evenistener. Also, welches Ereignis wird dieser Button in diesem Event-Listener welches Ereignis wird dieser Button in diesem Event-Listener Das Ereignis, das wir ausgeben möchten, ist Click , weil wir eine Funktion ausführen möchten , wenn auf eine Schaltfläche geklickt wird Nun, welche Funktion wollen wir ausführen? Wir wollen diese Generate-Funktion ausführen, also geben Sie hier einfach generate ein. Nur der Funktionsname. Geben Sie generate ein und lassen Sie uns speichern und schauen wir uns das in unserem Browser an. Wenn ich jetzt auf die Schaltfläche mit dem nächsten Code klicke, erhalten wir einen Code und den Namen des Autors. Und wenn Sie erneut auf diese Schaltfläche klicken, erhalten wir einen weiteren Code und eine weitere Autorym Aber wie Sie jetzt sehen können, passt unser Styling nicht zusammen. Wir müssen diesen Inhalt in den Mittelpunkt stellen. Um diesen Inhalt in den Mittelpunkt zu rücken, können Sie einfach Ihre CSS-Datei öffnen und in dieser H-one-Technologie können Sie den Text Align Center eingeben. Schreiben Sie also einfach den Text Align Center. Lassen Sie uns jetzt speichern und schauen wir in unserem Browser nach. Wie Sie jetzt sehen können, bedeutet das, dass unser Inhalt den Rand dieses Browsers nicht berührt. Jetzt hat es einen gewissen Abstand von links und von rechts. Das ist es also, wir haben eine Zufallscode-Generator-App mit JavaScript erstellt . Ich hoffe dir gefällt dieser Kurs. Wenn Sie möchten, dass ich dieser Zufallscode-Generator-App weitere Funktionen hinzufüge , können Sie mich einfach informieren und ich werde diesen neuen Abschnitt in diesem Projekt hinzufügen.