Was du vorher installieren solltest
Zwei Tools brauchst du wirklich: Visual Studio Code als Editor und Git für das spätere Deployment. VS Code ist kostenlos, weit verbreitet und hat zwei Extensions, die dir das Leben deutlich leichter machen.
Die erste ist Emmet – die ist schon vorinstalliert. Wenn du ein Ausrufezeichen tippst und Tab drückst, generiert sie dir das komplette HTML-Grundgerüst automatisch. Die zweite ist Live Server, die du im Extension Marketplace findest. Sie hat über 32 Millionen Downloads und macht eines: Sobald du speicherst, aktualisiert sich der Browser sofort. Das nennt sich Hot Reloading, und du wirst es schnell vermissen, wenn du es nicht hast.
Prettier, die Formatierungs-Extension, kann ich dir auch empfehlen. Kein Pflichtprogramm, aber dein Code sieht damit direkt ordentlicher aus.
Das HTML: Die Struktur der App
Die Grundstruktur ist überschaubar. Du brauchst eine Überschrift, einen kurzen Hinweistext (“Dein Wort ist”), ein Element das das aktuelle Wort anzeigt, einen Button und einen Bereich für bereits gezeigte Wörter.
Das war es. Kein verschachteltes Markup, keine komplizierten Strukturen. Alles bekommt eine CSS-Klasse, die du später im Stylesheet und in JavaScript ansprechen kannst. Wenn du tiefer in den Aufbau von HTML-Seiten einsteigen willst, ist das genau der Einstiegspunkt des Frontend Fundamentals Kurses.
JavaScript: Wörter laden, zufällig auswählen, anzeigen
Hier passiert die eigentliche Logik. Die Wörter stehen in einer Textdatei (words.txt), kommasepariert. Du lädst sie über die fetch-Funktion, die in allen modernen Browsern verfügbar ist.
Ein Konzept, das am Anfang etwas seltsam wirkt: asynchroner Code. fetch() wartet nicht auf die Datei, sondern macht weiter. Mit .then() sagst du dem Browser, was er tun soll, sobald die Antwort da ist. Das klingt umständlich, ist aber sinnvoll: Die Seite friert nicht ein, während auf Daten gewartet wird.
Wenn der Text geladen ist, teilst du ihn am Komma auf: