Witz Generator

Erstellen einer "Dead Jokes" 

 Download: Datei downloaden

Webseite mit JavaScript: Ein Ausführlicher Blick
In diesem Artikel werden wir den bereitgestellten HTML-, CSS- und JavaScript-Code im Detail untersuchen, um zu verstehen, wie eine einfache Webseite erstellt wird, die "Dead Jokes" anzeigt. "Dead Jokes" sind absichtlich flache und banale Witze, die dennoch humorvoll sind. Der Code nutzt eine öffentliche Witz-API und eine interne Liste von Witzen, um zufällige "Dead Jokes" abzurufen und anzuzeigen. Bitte beachte, dass der API-Schlüssel aus Sicherheitsgründen entfernt wurde.

HTML und CSS: Die Struktur und das Erscheinungsbild

Der HTML-Code definiert die grundlegende Struktur der Webseite. Er enthält eine Überschrift, einen Button mit der Bezeichnung "Neuer Witz", einen Container für den Witz und eine Informationsleiste über die API-Nutzung. Das CSS ist für das visuelle Erscheinungsbild der Seite zuständig. Hier werden Stilvorgaben für den Container, die Überschrift, den Button und den Witz definiert.

JavaScript-Funktionalität: Hinter den Kulissen

Die API-Nutzung

Die JavaScript-Funktionalität ist das Herzstück der Seite. Hier sind die Schritte, die passieren, wenn ein Nutzer auf den "Neuer Witz"-Button klickt:

Der Button wird geklickt: Wenn der Nutzer den Button klickt, wird der Event Listener ausgelöst und die Funktion newJoke wird aufgerufen.

newJoke Funktion: Diese Funktion ist verantwortlich für den Ablauf des Witzabrufs. Sie ruft die Funktion getJokeFromApi auf, um einen Witz von der externen API zu erhalten.

getJokeFromApi Funktion: Hier wird das XMLHttpRequest-Objekt verwendet, um eine GET-Anfrage an die API für "Dead Jokes" zu senden. Die Anfrage beinhaltet den API-Schlüssel und den API-Endpunkt. Wenn die Anfrage erfolgreich ist (Status 200), wird der erhaltene Witz angezeigt. Andernfalls wird ein Witz aus der internen Liste genommen und angezeigt.

Umgang mit Netzwerkproblemen

Sowohl bei einer fehlgeschlagenen API-Anfrage als auch bei einem Netzwerkproblem reagiert der Code angemessen:

API-Anfrage fehlgeschlagen: Falls die Anfrage an die API fehlschlägt (z.B. aufgrund eines ungültigen Schlüssels oder Serverproblems), wird die Funktion displayRandomJokeFromInternalList aufgerufen. Dadurch wird ein Witz aus der internen Liste genommen und angezeigt. Die Informationsleiste wird aktualisiert, um den Misserfolg anzuzeigen.

Netzwerkprobleme: Wenn ein Netzwerkfehler auftritt (z.B. wenn keine Internetverbindung besteht), wird die xhr.onerror Funktion aufgerufen. In diesem Fall wird ebenfalls die Funktion displayRandomJokeFromInternalList aufgerufen, um einen internen Witz anzuzeigen, und die Informationsleiste wird entsprechend aktualisiert.

Zusammenfassung

Der bereitgestellte Code ermöglicht die Erstellung einer simplen "Dead Jokes" Webseite. Sie beinhaltet die notwendige HTML-Struktur, CSS-Styling und JavaScript-Funktionalität, um Witze von einer API oder internen Liste abzurufen und darzustellen. Die Seite reagiert angemessen auf Netzwerkprobleme oder API-Fehler, indem sie stattdessen interne Witze anzeigt. Dieser Code ist eine gute Grundlage, um das Zusammenspiel von HTML, CSS und JavaScript zu verstehen und kann als Ausgangspunkt für ähnliche Projekte dienen. Denke daran, sensible Informationen wie API-Schlüssel zu schützen, bevor du den Code teilst oder veröffentlichst.