Mit einer interaktiven Einkaufsliste lernst du HTML, CSS und JavaScript in einem echten Projekt — ohne Setup-Stress, ohne Vorkenntnisse. Du siehst sofort, was dein Code tut, und bekommst ein fertiges Projekt für dein Portfolio.
Was du brauchst: Nur VS Code
Du brauchst genau ein Programm: Visual Studio Code. Einen Webbrowser hast du wahrscheinlich schon. VS Code ist ein kostenloser Code Editor, den du dir auf der Website herunterladen kannst. Windows oder Mac, funktioniert auf beiden.
Wenn VS Code installiert ist, öffne einen neuen Ordner über “Datei” und dann “Ordner öffnen”. Erstelle darin eine neue Datei und nenn sie index.html. Der Name ist kein Zufall: Browser suchen beim Laden einer Website immer zuerst nach dieser Datei. Das ist Konvention, und daran hält man sich.
HTML: Der Aufbau deiner App
Tippe in VS Code ein Ausrufezeichen und drücke Tab. VS Code generiert dir automatisch die Grundstruktur einer HTML-Seite. Kurze Übersicht, was da steht:
<!DOCTYPE html>sagt dem Browser, dass es HTML ist<html>umschließt alles andere<head>enthält Metainfos über das Dokument, zum Beispiel den Titel<body>ist der eigentliche Inhalt, den der Nutzer sieht
Für die Einkaufsliste brauchst du im Body drei Dinge: ein Eingabefeld (<input>), einen Button (<button>Speichern</button>) und ein <div> als Container für die Liste. Das <div> ist ein leerer Platzhalter, in den JavaScript später die Einträge schreibt.
Damit JavaScript und CSS die richtigen Elemente finden, vergibst du IDs. Das Eingabefeld bekommt die ID eingabe, das <div> die ID liste. Auf der Seite selbst sieht man diese IDs nicht. Die sind nur für den Code da.
JavaScript: Die Logik dahinter
Eingabefeld und Button stehen jetzt da, aber es passiert noch nichts. Das ändert JavaScript. Du fügst ein <script>-Tag am Ende des Body ein. Alles darin ist JavaScript-Code.
Du schreibst eine Funktion namens speichern. Eine Funktion ist eine Anleitung für einen Ablauf, der auf Abruf ausgeführt wird. Der Button ruft sie auf, wenn jemand klickt. Das verbindest du mit onclick="speichern()" im Button-Tag.
Die Funktion macht drei Dinge:
- Sie liest den Wert aus dem Eingabefeld:
eingabe.value - Sie schreibt ihn als neues Element in die Liste:
liste.innerHTML += "<div><input type='checkbox'/> " + eingabe.value + "</div>" - Sie leert das Eingabefeld danach:
eingabe.value = ""
Der Plus-Operator verbindet hier Text, kein Mathe. Die type='checkbox' im Input-Tag sorgt für die Checkbox zum Abhaken. Das war es. Die Einkaufsliste funktioniert.
Wenn du verstehen möchtest, wie JavaScript systematisch eingesetzt wird und wie Projekte im echten Berufsleben aussehen, schau dir unseren Fullstack Web Developer Kurs an. Dort lernst du das von Grund auf, strukturiert und praxisnah.
CSS: So sieht es besser aus
CSS kümmert sich ums Aussehen. Den CSS-Code schreibst du in ein <style>-Tag im <head> der Datei.
Für einen ordentlichen Look reichen wenige Zeilen: