JavaScript-Projekte für Anfänger: Direkt loslegen und programmieren

Ein JavaScript-Tutorial zu lesen und eines wirklich zu beenden, sind zwei völlig verschiedene Erfahrungen.

Das Erste fühlt sich produktiv an. Beim Zweiten lernst du erst wirklich etwas. Du arbeitest dich schon eine Weile durch JS-Lektionen, aber dein Code existiert immer noch nur in den Übungen anderer Leute? Nun, nicht mehr lange.

Zu wissen, was Schleifen sind, ist wertlos, bis du eine benutzt hast, um etwas zum Laufen zu bringen. Tutorials bringen dir die Vokabeln bei. Projekte sorgen dafür, dass du die Sprache sprichst.

Hier sind also 18 JavaScript-Projekte für Anfänger, jeweils mit einer kurzen Anleitung, damit du weißt, wie du anfangen sollst. Such dir eins aus, baue es, und nimm dir das nächste vor.

Baue zuerst deine JavaScript-Grundlagen auf

Alle JS-Projekte für Anfänger basieren auf Variablen, Funktionen, Bedingungen, Schleifen, Arrays, Objekten und einer Handvoll DOM-Methoden. Wenn dir diese Dinge noch nicht in Fleisch und Blut übergegangen sind, wirst du mehr Zeit damit verbringen, gegen die Syntax zu kämpfen, als zu programmieren.

Der JavaScript-Kurs von Coddy ist genau dafür gemacht. Fünfminütige Lektionen, die dich Schritt für Schritt durch die Kernkonzepte der Sprache führen. Du schreibst und führst Code direkt im Browser aus. Kein Setup, keine Umgebungskonfiguration, kein „Installiere zuerst Node“.

Bugsy, unser integrierter KI-Assistent, steht dir in jeder Lektion zur Seite, wenn mal etwas nicht sofort klick macht.

Wenn du die folgenden Punkte ohne Zögern lesen, schreiben und erklären kannst, bist du bereit. Wenn nicht, gehe die JS-Grundlagen auf Coddy durch, bis es sitzt.

• Variablen und primitive Datentypen (String, Number, Boolean)
• if/else- und switch-Anweisungen
• for-, while- und for...of-Schleifen
• Funktionen und Arrow-Funktionen (Pfeilfunktionen)
• Arrays und die gängigen Methoden (push, pop, map, filter, find)
• Objekte und die Punkt-/Klammer-Notation
• Grundlegender DOM-Zugriff (querySelector, addEventListener, textContent)

Alles klar? Gut. Lass uns programmieren!

Einsteigerprojekte: Hallo, DOM

Diese Projekte sind bewusst klein gehalten. Sie konzentrieren sich auf ein oder zwei Konzepte, sodass du bei Fehlern schnell die Ursache findest. Und hey, überspringe sie nicht, nur weil sie einfach klingen!

1. Der klassische Counter (Zähler)

Was es ist: Eine Zahl auf dem Bildschirm mit einem Plus- und einem Minus-Button.

Warum es gut ist: Die kleinstmögliche App, die HTML, CSS und JavaScript miteinander verbindet. Du kommst mit State (einer Variablen, die sich ändert), DOM-Updates und Event-Listenern in Berührung. Ungefähr zwanzig Zeilen Code, mehr oder weniger.

Wie man es baut: Ein span-Element für die Zahl, zwei Buttons. Definiere ein let count = 0. Verknüpfe Click-Listener mit jedem Button, um den Zähler zu erhöhen oder zu verringern, und aktualisiere dann den textContent des Spans. Zusatzaufgabe: Ein Reset-Button und eine Grenze bei Null.

2. Trinkgeldrechner

Was es ist: Gib einen Rechnungsbetrag und einen Trinkgeld-Prozentsatz ein und sieh dir das Trinkgeld sowie den Gesamtbetrag an.

Warum es gut ist: Führt Formulareingaben und parseFloat ein, worüber fast jeder beim ersten Mal stolpert. Du wirst auch merken, wie schnell deine Berechnungen fehlschlagen, wenn du NaN vergisst.

Wie man es baut: Zwei Nummerneingaben (Rechnung, Trinkgeld-Prozentsatz), ein Button, zwei Ausgabe-Spans. Beim Klick parst du beide Eingaben, berechnest das Ergebnis, rundest es mit .toFixed(2) auf zwei Dezimalstellen und zeigst es an. Zusatzaufgabe: Eine Option zum Aufteilen der Rechnung auf mehrere Personen.

3. Farbpaletten-Generator

Was es ist: Klicke auf einen Button und erhalte eine neue, zufällige Farbe, die als Farbfeld mit dem entsprechenden Hex-Code angezeigt wird.

Warum es gut ist: Zufallszahlen, Template-Literals und Inline-Styles in einer winzigen App. Das Ergebnis ist visuell, was die Sache spannend macht.

Wie man es baut: Eine Funktion, die dreimal eine zufällige Ganzzahl zwischen 0 und 255 zurückgibt, und dann einen String wie rgb(${r}, ${g}, ${b}) erzeugt. Setze diesen als Hintergrundfarbe des Farbfelds. Zusatzaufgabe: Eine komplette Fünf-Farben-Palette anstelle eines einzelnen Farbfelds.

4. Zufallszitate-Generator

Was es ist: Ein Button, der das angezeigte Zitat durch ein zufälliges Zitat aus deinem Array ersetzt.

Warum es gut ist: Perfekt, um den Umgang mit Arrays und Math.random zu üben – und ein schnelles Erfolgserlebnis, das du teilen kannst.

Wie man es baut: Definiere ein Array aus Zitat-Objekten mit text und author. Wähle beim Klick einen zufälligen Index und aktualisiere zwei Elemente. Zusatzaufgabe: Ein „Dieses Zitat twittern“-Link, der einen bereits ausgefüllten Tweet öffnet.

5. Digitale Uhr

Was es ist: Die aktuelle Uhrzeit auf dem Bildschirm, die sich jede Sekunde aktualisiert.

Warum es gut ist: Hier lernst du setInterval und das Date-Objekt kennen, die du immer wieder brauchen wirst. Einstellige Minuten und Sekunden mit einer führenden Null zu versehen, ist ein nettes kleines Rätsel für sich.

Wie man es baut: Eine Funktion, die new Date() ausliest, Stunden, Minuten und Sekunden formatiert und in ein span-Element schreibt. Verpacke das Ganze in setInterval(updateClock, 1000). Zusatzaufgabe: Ein Umschalter zwischen 12-Stunden- und 24-Stunden-Format.

6. BMI-Rechner

Was es ist: Gib Größe und Gewicht ein und erhalte einen BMI-Wert sowie eine Kategorie-Bezeichnung.

Warum es gut ist: Ein praxisnahes Beispiel dafür, wie Bedingungen entscheiden, welches Label angezeigt wird. Außerdem eine gute Gelegenheit, ein sauberes Formular-Layout zu üben.

Wie man es baut: Nummerneingaben für Größe (cm) und Gewicht (kg). Berechne beim Absenden den BMI mit der Standardformel, nutze eine if/else-Kette, um die Kategorie zu bestimmen, und zeige beide Werte an. Zusatzaufgabe: Imperiale Maßeinheiten mit einem Umschalter.

Fortgeschrittene Projekte: Mehr bewegliche Teile

Wenn du eine Handvoll Projekte abgeschlossen hast, wirst du merken, dass sich Muster wiederholen. Ein Klick auf einen Button ändert eine Variable, eine Funktion aktualisiert das UI basierend auf dieser Variable, und das Ganze von vorn. Das ist im Grunde der Großteil der Frontend-Entwicklung. Bei diesen Projekten musst du mit etwas mehr State (Zustand) gleichzeitig jonglieren.

7. To-do-Liste

Was es ist: Tippe eine Aufgabe ein, drücke die Eingabetaste, und sie erscheint in einer Liste. Klicke auf einen Eintrag, um ihn als erledigt zu markieren. Klicke auf das X, um ihn zu löschen.

Warum es gut ist: Nicht ohne Grund das „Hello World“ der Frontend-Frameworks. Du jonglierst mit einem Array, renderst es im DOM und verarbeitest zwei oder drei Events. Wenn du eine To-do-Liste von Grund auf selbst bauen kannst, bist du kein absoluter Anfänger mehr.

Wie man es baut: Verwalte ein Array aus Aufgaben-Objekten mit id, text und done. Rendere die Liste nach jeder Änderung als <ul> neu. Füge bei Enter eine neue Aufgabe hinzu. Ändere bei einem Klick den done-Status oder entferne das Element mit splice aus dem Array. Zusatzaufgabe: Speichere die Daten im localStorage, damit die Aufgaben einen Seiten-Refresh überstehen.

8. Stoppuhr mit Rundenzeiten

Was es ist: Eine Stoppuhr mit Start-, Stopp-, Reset- und Runden-Buttons.

Warum es gut ist: Kniffliger als die normale Uhr, weil du deine eigene Variable für die verstrichene Zeit verwaltest, anstatt das System zu fragen. Du wirst mit Date.now(), Intervallen und Pausen-Logik arbeiten.

Wie man es baut: Speichere eine startTime und einen elapsed-Akkumulator. Setze beim Start startTime = Date.now() und starte ein Intervall. Addiere beim Stoppen elapsed += Date.now() - startTime. Speichere bei einer Runde die aktuelle Anzeige in einem Array und rendere sie. Zusatzaufgabe: Formatiere die Millisekunden ansprechend.

9. Pomodoro-Timer

Was es ist: 25 Minuten Arbeit, 5 Minuten Pause, und das Ganze von vorn. Ein Signalton ertönt, wenn es Zeit zum Wechseln ist.

Warum es gut ist: Zustandsautomaten (State Machines) für Anfänger. Du befindest dich im Modus „Arbeit“, „Pause“ oder „Pausiert“, und das UI passt sich dem jeweiligen Modus an.

Wie man es baut: Nutze dasselbe Intervall-Muster wie bei der Stoppuhr, aber zähle rückwärts. Behalte im Auge, in welchem Modus du dich befindest. Wenn der Timer Null erreicht, wechsle den Modus und spiele einen kurzen Ton mit new Audio('beep.mp3').play() ab. Zusatzaufgabe: Ein Zähler für die abgeschlossenen Arbeitssitzungen des Tages.

10. Quiz-App

Was es ist: Ein Multiple-Choice-Quiz, das am Ende deine Punktzahl anzeigt.

Warum es gut ist: Kombiniert Array-Iterationen, Bedingungen und das Konzept eines einfachen „Bildschirm-Zustands“ (aktuelle Frage, Ergebnisbildschirm).

Wie man es baut: Definiere ein Array aus Frage-Objekten mit text, options und correctIndex. Zeige immer nur eine Frage an. Prüfe beim Klick auf eine Antwort, ob sie mit dem correctIndex übereinstimmt, erhöhe die Punktzahl und gehe zum nächsten Index über. Wenn keine Fragen mehr übrig sind, zeige den Ergebnisbildschirm. Zusatzaufgabe: Ein Timer für jede Frage.

11. Passwort-Generator

Was es ist: Wähle eine Länge und die gewünschten Zeichentypen aus und erhalte ein zufälliges Passwort.

Warum es gut ist: String-Manipulation, Zufallswerte und Checkbox-Eingaben in einem Projekt. Zudem ist es wirklich nützlich, was bei Übungsprojekten selten vorkommt.

Wie man es baut: Erstelle vier Zeichen-Pools (Kleinbuchstaben, Großbuchstaben, Zahlen, Sonderzeichen). Verbinde die aktiven Pools basierend auf den aktivierten Checkboxen. Wähle in einer Schleife n-mal ein zufälliges Zeichen aus dem kombinierten Pool. Zusatzaufgabe: Eine Anzeige für die Passwortstärke, die das Ergebnis bewertet.

12. Formular-Validierer

Was es ist: Ein Registrierungsformular, das ungültige Felder rot markiert und darunter eine Fehlermeldung anzeigt.

Warum es gut ist: Im echten Entwickleralltag macht man das ständig. Reguläre Ausdrücke (Regex), Focus-Events und DOM-Manipulation, verpackt in ein vertrautes Formular-Layout.

Wie man es baut: Schreibe kleine Validierungsfunktionen für jedes Feld (E-Mail-Muster, Passwortlänge, übereinstimmende Passwörter). Führe beim blur-Event den Validierer aus, wechsle eine CSS-Klasse auf dem Input-Feld und aktualisiere das zugehörige Fehler-Span. Fahre beim Absenden nur fort, wenn alle Validierungen erfolgreich waren. Zusatzaufgabe: Live-Validierung nach dem ersten Verlassen des Feldes (blur).

Mini-Spiele: Jetzt wird's spielerisch

Spiele bringen deine Fähigkeiten auf das nächste Level, weil sie kontinuierliche Zustände, Timing und Interaktion erfordern. Wenn du zum ersten Mal Pixel auf einem Canvas bewegst, verstehst du plötzlich, was JavaScript eigentlich ausmacht.

13. Schere, Stein, Papier

Was es ist: Wähle Schere, Stein oder Papier. Der Computer wählt ebenfalls. Schau, wer gewinnt.

Warum es gut ist: Eine hervorragende Übung für Bedingungen und Zufall, mit einem klaren Gewinn- oder Verlustmoment.

Wie man es baut: Drei Buttons für die Auswahl des Spielers. Beim Klick wählt der Computer zufällig aus denselben drei Optionen. Nutze ein einfaches Lookup-Objekt (oder verschachtelte if/else-Bedingungen), um das Ergebnis zu ermitteln. Zähle Siege und Niederlagen über mehrere Runden hinweg. Zusatzaufgabe: Best-of-Five mit einem Siegesbildschirm.

14. Tic-Tac-Toe

Was es ist: Das klassische 3x3-Gitter-Spiel, bei dem zwei Spieler abwechselnd am selben Bildschirm spielen.

Warum es gut ist: Führt ein Array der Länge 9 als flaches 2D-Gitter ein und vermittelt das Konzept, Gewinnbedingungen zu prüfen. Es fühlt sich toll an, so einen Klassiker fertigzustellen.

Wie man es baut: Rendere neun Zellen. Behalte im Auge, wer an der Reihe ist. Platziere beim Klick auf eine Zelle das Zeichen des aktuellen Spielers und prüfe alle acht Gewinnlinien auf eine Übereinstimmung. Zeige ein Gewinner-Banner an, sobald jemand gewinnt. Zusatzaufgabe: Eine einfache KI, die eine beliebige freie Zelle zufällig auswählt.

15. Memory-Spiel

Was es ist: Ein Gitter aus verdeckten Karten. Klicke zwei an. Wenn sie übereinstimmen, bleiben sie aufgedeckt. Wenn nicht, drehen sie sich wieder um.

Warum es gut ist: Array-Mischung, Timeouts und eine klare Gewinnbedingung. Wenn du zum ersten Mal die Logik für das „Umdrehen nach einer Sekunde“ schreibst, wirst du setTimeout erst so richtig verstehen.

Wie man es baut: Verdopple ein Array von Werten, um Paare zu erstellen, und mische es mit dem Fisher-Yates-Verfahren. Rendere die Karten verdeckt. Decke die Karte beim Klick auf. Wenn zwei Karten aufgedeckt sind, vergleiche sie: Bei einer Übereinstimmung sperrst du sie; wenn nicht, drehst du beide nach einer kurzen Verzögerung wieder um. Beende das Spiel, wenn alle Paare gefunden wurden. Zusatzaufgabe: Ein Spielzug-Zähler und eine Bestenliste im localStorage.

16. Zahlenratespiel

Was es ist: Der Computer wählt eine Zahl zwischen 1 und 100. Du rätst. Er sagt dir „höher“ oder „tiefer“, bis du richtig liegst.

Warum es gut ist: Simpel, aber es lehrt dich die Verarbeitung von Eingaben, Vergleiche und das Muster „Wiederholen bis korrekt“, das dir überall begegnen wird.

Wie man es baut: Generiere einmalig eine Zielzahl. Protokolliere die Versuche. Vergleiche bei jedem Tippen den Wert mit dem Ziel und aktualisiere die Rückmeldung. Nimm keine Eingaben mehr an, sobald die Zahl erraten wurde. Zusatzaufgabe: Begrenze den Spieler auf sieben Versuche mit einem Game-Over-Bildschirm, falls die Versuche ausgehen.

17. Galgenmännchen (Hangman)

Was es ist: Der Computer wählt ein Wort. Du rätst einen Buchstaben nach dem anderen. Falsche Versuche vervollständigen die Zeichnung des Galgenmännchens.

Warum es gut ist: Das Projekt, bei dem du die Angst vor String-Manipulation verlierst. Das Erstellen der Anzeige für die „erratenen Buchstaben“ bringt dir split, map und join auf einen Schlag bei.

Wie man es baut: Wähle ein Wort aus einem Array. Zeige für jeden Buchstaben einen Unterstrich an. Wenn der Spieler einen Buchstaben wählt, decke die passenden Stellen auf oder notiere einen Fehlversuch. Zeichne das Galgenmännchen schrittweise (meist sind sechs Fehlversuche erlaubt) mit CSS oder Canvas. Zusatzaufgabe: Lade Wörter aus einer öffentlichen Wörterbuch-API.

18. Snake

Was es ist: Das klassische Snake-Spiel: Friss das Futter, werde länger und stirb, wenn du dich selbst oder die Wand triffst.

Warum es gut ist: Das ist das Endgegner-Projekt für Anfänger. Du arbeitest mit einem Raster (Canvas oder CSS), Tastatur-Events, einem Game-Loop, Kollisionserkennung und Wachstumsmechaniken.

Wie man es baut: Rendere ein Raster mit CSS oder einem <canvas>. Speichere die Schlange als ein Array von Koordinaten-Objekten. Bewege die Schlange bei jedem Tick um ein Feld in die aktuelle Richtung. Wenn der neue Kopf auf der Position des Futters liegt, lass die Schlange wachsen und generiere neues Futter. Wenn der Kopf die Wand oder ein anderes Körperteil trifft, heißt es Game Over. Reagiere auf die Pfeiltasten, um die Richtung zu ändern. Zusatzaufgabe: Erhöhe die Geschwindigkeit (Tick-Rate), je höher der Punktestand wird.

Bonus: Eine Wetter-App

Was es ist: Gib eine Stadt ein und erhalte die aktuelle Temperatur sowie eine Wetterbeschreibung zurück.

Warum es gut ist: Der erste echte Vorgeschmack auf eine öffentliche API und asynchronen Code. Jede kostenlose Wetter-API bietet genug Daten, um damit zu experimentieren.

Wie man es baut: Besorge dir einen kostenlosen API-Schlüssel. Nutze beim Absenden fetch mit dem Stadtnamen in der URL. Warte auf die Antwort (await), parse das JSON und aktualisiere das DOM mit den relevanten Feldern. Verpacke das Ganze in ein try/catch-Block, damit ungültige Städtenamen nicht das gesamte UI lahmlegen. Zusatzaufgabe: Eine Fünf-Tage-Vorhersage.

Wie du die Projekte, die du anfängst, auch zu Ende bringst

Die obige Liste bringt dir gar nichts, wenn du die Hälfte der Projekte anfängst und dann abbrichst. Hier sind ein paar Tipps, die helfen:

• Wähle das kleinste Projekt, das dich begeistert. Begeisterung bringt dich zum Anfangen. Die geringe Größe sorgt dafür, dass du es zu Ende bringst. Und dann wiederholst du das Ganze.
• Setze dir ein Zeitlimit, kein Inhaltslimit (Time-boxing statt Scope-boxing). Nimm dir ein bis zwei Stunden konzentrierte Zeit für ein Einsteigerprojekt. Wenn du nicht fertig wirst, ist das kein Misserfolg, sondern eine wertvolle Information darüber, wo du stecken geblieben bist.
• Erst bauen, dann verschönern. Bring die hässliche, aber funktionierende Version fertig, bevor du CSS anfasst. Schön, aber kaputt ist weitaus schlechter als hässlich, aber funktional.
• Vermeide Tutorial-Hopping. Wenn du dir drei verschiedene Tutorials für das gleiche Projekt ansiehst, hast du Zeit investiert, ohne selbst Code zu schreiben. Baue es lieber unperfekt und schlage gezielt die Dinge nach, die du nicht weißt.
• Übe die Grundlagen an Tagen, an denen du keine Zeit zum Programmieren hast. Fünf Minuten Coddy im Bus sind eine vollwertige Lerneinheit. Die tägliche Serie (Streak) summiert sich.

Dieser letzte Punkt verbindet alles. Projekte lassen das Gelernte real werden, aber sie bauen auf den Grundlagen auf. Kurze tägliche Lektionen sorgen dafür, dass sich die Projekte nicht unerreichbar anfühlen.

Wo Coddy ins Spiel kommt

Das hier soll keine Werbung für ein bestimmtes Tool sein, mit dem du diese Projekte bauen sollst. Nutze den Editor deiner Wahl, führe alles im Browser aus und hoste es, wo du willst.

Der Teil, den Coddy übernimmt, liegt einen Schritt davor: deine JavaScript-Grundlagen so weit zu festigen, dass „eine Quiz-App bauen“ nicht bedeutet, „zwei Stunden lang zu googeln, was .map eigentlich macht“.

Coddy hat bereits Millionen von Lernenden auf Web, iOS und Android JavaScript beigebracht. Dieselben Lektionen, derselbe Fortschritt, derselbe Bugsy – egal, wo du es öffnest.

Die kostenlose Version deckt jede JS-Lektion ohne jegliches Setup ab. Du bist lediglich durch ein Energiesystem begrenzt, das sich nach ein paar Stunden wieder auflädt.

Du möchtest unbegrenzte Lerneinheiten und Bugsy bei jeder Frage an deiner Seite haben? Die kostenpflichtigen Tarife kosten etwa die Hälfte von vergleichbaren Plattformen. So oder so gilt: Erst die Grundlagen, dann die Projekte.