Einkaufslisten Web-App – JavaScript Tutorial für Anfänger

In diesem JavaScript Tutorial lernst du, wie du eine simple Einkaufslisten-Web-App erstellst.

Ich werde die einzelnen Schritte so weit runterbrechen, dass du auch als Anfänger mit wenigen Programmierkenntnisse folgen kannst.

Benutzte Sprachen in diesem Tutorial sind:

• HTML
• CSS
• JavaScript

Wenn du in die Webentwicklung einsteigen möchtest, ist es hilfreich, mit einfachen Projekten zu starten. Dieses Projekt benutzt nur die o.g. Technologien.

Du musst zum Nachbauen der Web-App keine Programme installieren. Dein Browser (Chrome, Firefox, Edge etc.) bringt bereits alle notwendigen Technologien mit, die wir benötigen.

Das Tutorial unterteilt sich in folgende größere Unterabschnitte:

• Entwurf der Web-App
• Planung der Inhalte und Komponenten
• Erstellung der HTML-Inhalte
• Design der Web-App in CSS
• Funktionen mit JavaScript hinzufügen
• Optionale Funktionen
• Fazit

Entwurf der Web-App

Zunächst ist es wichtig, zu wissen, wie die fertige Web-App aussehen soll und wie sie funktioniert.

Dafür kannst du dich bei anderen Web-Apps inspirieren lassen oder einfach mit einem Entwurf auf Papier anfangen.

Außerdem gibt es die Möglichkeit, Prototyping-Tools zu benutzen. Der Entwurf hilft uns, zu erkennen, welche Inhalte wir erstellen müssen und gibt uns erste Indikatoren für die Funktionsweise. Ziel unserer App ist es, Einträge hinzuzufügen und diese Einträge in einer Liste darzustellen. Fertige Einträge sollen abgehakt werden können.

Nachfolgend findest du meine fertige Version der Einkaufslisten-Web-App.

Eine fertige Einkaufslisten-Web-App - Quelle: Eigene

Natürlich ist das nur eine einfache Version. Jedoch wird uns das bei der folgenden Planung sowie Erstellung der Inhalte und auch beim späteren Design helfen.

Deine Aufgabe: Schaue dir das obige Bild der App an. Welche Inhalte findest du dort (z.B. Buttons, Texte, Überschriften usw.). Schreib alle Inhalte auf (z.B. auf ein Blatt Papier oder in einen Texteditor deiner Wahl)

Planung der Inhalte und Komponenten

Hast du die letzte Aufgabe erledigt?

Gut!

Dann geht es jetzt weiter mit der Planung der Inhalte und Komponenten.

Welche Inhalte benötigt die Web-App?

An erster Stelle möchten wir eine Überschrift anzeigen, damit wir wissen, in welcher App wir uns befinden (z.B. Daniel's Einkaufsliste).

Da wir eine Einkaufslisten-App programmieren, liegt es auf der Hand, dass wir eine Liste (von oben nach unten) darstellen wollen.

Weiterhin müssen wir irgendwie in der Lage sein, Einträge hinzuzufügen, um unsere Liste zu füllen. Dafür benötigen wir bspw. ein Texteingabefeld.

Um die Eingabe des Textfeldes zu bestätigen, benötigen wir einen Button.

Hört sich gut an! Fassen wir die o.g. Inhalte zusammen:

• Überschrift (ggf. mit Bild)
• Texteingabefeld
• Button (Eingabe bestätigen)
• Einkaufs-Liste (Listeneinträge von oben nach unten darstellen)

Welche Komponenten benötigt die Einkaufslisten-App?

Da wir uns jetzt mehr im Klaren darüber sind, welche Inhalte wir benötigen, können wir ein erstes Brainstorming zu den benötigten Komponenten vornehmen.

Beispielsweise muss der "Hinzufügen"-Button den eingegebenen Text aus unserem Textfeld erkennen und dann in die Liste eintragen. Das ist später wichtig, wenn wir die JavaScript-Funktionen programmieren. Ohne JavaScript hätten wir später eine wunderschöne App, ohne Funktionen!

Weiterhin liegt es auf der Hand, dass wir fertige Einträge, z.B. Lebensmittel, die bereits in unserem Einkaufswagen liegen, abhaken (als erledigt) können.

Wenn wir einen Eintrag nicht mehr auf der Liste haben wollen oder falls wir uns vertippt haben, wollen wir außerdem einen Eintrag aus der Liste löschen können.

Halten wir diese ersten Überlegungen zu den Komponenten fest:

• Hinzufügen-Button muss auf einen Klick reagieren und Eingabe-Daten übermitteln
• Der Benutzer muss erledigte Einträge abhaken können
• Ungewünschte Einträge sollen gelöscht werden können

Hervorragend!

Beim Entwurf und der Planung wirst du niemals alles abdecken können. Nicht geplante Probleme sowie Features, die dir später einfallen, treten in jedem Entwicklungsprozess auf. Die o.g. Schritte helfen dir jedoch, als Anfänger logisch zu denken und methodisch bei der Programmierung vorzugehen.

Erstellung der HTML-Inhalte

Jetzt, wo die ungefähren Inhalte und Komponenten feststehen, können wir das Rohgerüst in HTML erstellen.

Öffne dazu einen Texteditor oder eine IDE deiner Wahl. Wenn du nicht weißt, was das ist, lade dir ein kostenloses Programm wie Visual Studio Code oder Notepad++ runter. Wenn du nichts installieren möchtest, öffne den Standard-Editor deines Betriebssystems (z.B. "Editor" unter Windows).

Im nächsten Schritt erstellen wir das HTML-Grundgerüst. Jeder moderne Editor kann es automatisch erstellen. Da ich davon ausgehe, dass du noch nie oder erst ein paar Mal mit HTML gearbeitet hast, kannst du folgenden Code in eine leere Datei in deinem Editor kopieren & einfügen.

Speichere die Datei dann, z.B. unter dem Dateinamen index.html

HTML-Grundgerüst -  Kopiere diese Zeilen in deinen Editor:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einkaufslisten-Web-App</title>
    <style>
        /* Hier kommt das CSS-Design rein */




    </style>
</head>
<body>
    <!-- Hier kommt dein HTML-Code rein -->



    

    
    <script>
      // Hier kommt der JavaScript-Code rein



    </script>
</body>
</html>

Hast du den obigen Code in eine Datei eingefügt und die Datei mit der Endung .html abgespeichert (z.B. index.html)?

Wenn ja, Gratulation! Mit diesem Grundgerüst können wir nachfolgend die Inhalte (Überschriften, Buttons usw.) einfügen.

Überschrift

Für eine Überschrift benötigen wir das h-Element. Die größte Überschrift in HTML ist das h1-Element. Füge folgenden HTML-Code ab Zeile 16 ein (grün markiert), um die Überschrift zu erstellen.

<body>
    <!-- Hier kommt dein HTML-Code rein -->
    <h1>Daniel's Einkaufsliste</h1>

Im obigen Beispiel habe ich meinen Vornamen eingetragen, um die Einkaufsliste zu personalisieren. Selbstverständlich kannst du hier deinen eigenen Vornamen eintragen.

Wenn du den grün-markierten Code in deinem Editor übernommen hast, speichere deine Datei. Öffne die Datei dann in einem Browser deiner Wahl. Du solltest jetzt ungefähr Folgendes sehen:

Ok, die Überschrift steht. Gehen wir über zum nächsten Schritt.

Optional: Bild

Damit die App mehr den Charakter einer Einkaufsliste bekommt, fügen wir ein Bild eines Einkaufswagens hinzu. Du kannst das Bild über folgende Bild-URL in deine App einbinden.

Bild-URL Einkaufswagen-Icons:

https://lerneprogrammieren.de/wp-content/uploads/einkaufswagen.png

Selbstverständlich kannst du jedes beliebige Bild in deine Web-App einfügen.

HTML-Code zum Einfügen des Einkaufswagen-Icons (grün-markierte Zeile):

<body>
    <!-- Hier kommt dein HTML-Code rein -->
    <h1>Daniel's Einkaufsliste</h1>
    <img src="https://lerneprogrammieren.de/wp-content/uploads/einkaufswagen.png" height="35px"/>

Wundere dich bitte nicht, wenn du das Bild nicht unter deiner Überschrift siehst. Der Einkaufswagen ist weiß und wir benutzen - zurzeit noch - einen weißen Hintergrund.

Wenn du überprüfen möchtest, dass das Bild korrekt angezeigt wurde, kannst du vorab die Hintergrundfarbe, bspw. in ein dunkles Grau ändern. Genau das werden wir in dem nächsten Abschnitt (Design mit CSS) noch machen, daher kannst du diese Überprüfung auch überspringen.

Optional - Hintergrundfarbe mit CSS anpassen, um das Bild sichtbar zu machen:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einkaufslisten-Web-App</title>
    <style>
       /* Hier kommt das CSS-Design rein */
       body {
        background: #1d1e22;
        color: white;
      }   
    </style>

Alles klar! Zeit, die Eingabe-Inhalte zu erstellen.

Texteingabefeld

In diesem Schritt erstellen wir das Texteingabefeld, damit der Benutzer eine Eingabe tätigen kann. Ein Eingabefeld erstellen wir mit dem HTML-Element <input> und dem Attribute type="text". Weiterhin fügen wir ein placeholder-Attribut (Platzhalter-Text) und ein ID-Attribut hinzu.

Mit der ID (z.B. id="benutzerInput") können wir das HTML-Element später für das CSS-Design und für unsere JavaScript-Funktionen auswählen.

    <h1>Daniel's Einkaufsliste</h1>
    <img src="https://lerneprogrammieren.de/wp-content/uploads/einkaufswagen.png" height="35px" />
    <div>
        <input id="benutzerInput" type="text" placeholder="Neuer Eintrag..." />
     
    </div>

Wie du im obigen Code siehst, steckt das input-Element zwischen einem öffnenden und schließenden <div>-Element. Div-Elemente sind für den Browser unsichtbar und helfen bspw. beim Strukturieren eines Dokuments.

In unserem Fall benutzen wir das <div>-Element, damit eine neue Zeile erstellt wird, in die wir das Texteingabefeld und, im nächsten Schritt, den Hinzufügen-Button platzieren können.

Die App sieht jetzt ungefähr so aus:

Die Eingabe wäre geschafft. Jetzt benötigen wir den Button, der später einen Einkaufslisten-Eintrag hinzufügt.

Button (Eingabe bestätigen)

Der Button ist einfach erstellt. Dafür benötigen wir das <button>-Element sowie einen beliebigen Text zwischen dem öffnenden und schließenden Element. Außerdem geben wir dem Button eine ID, damit wir ihn später mit CSS stylen und mit JavaScript mit Funktionen ausstatten können.

Das hört sich komplizierter an als es ist. Das button-Element wird direkt unter das Texteingabefeld geschrieben. Schau dir folgenden Code an.

HTML-Button erstellen:

    <div>
        <input id="benutzerInput" type="text" placeholder="Neuer Eintrag..." />
        <button id="enter">Hinzufügen</button>
    </div>

Zwischenstand:

Einkaufs-Liste

Widmen wir uns nun der Erstellung der Einkaufsliste. Eine (ungeordnete) Liste wird in HTML mit dem <ul>-Element erstellt. Die einzelnen Elemente in der Liste werden mit dem <li>-Element erstellt.

    <div>
      <input id="benutzerInput" type="text" placeholder="Neuer Eintrag..." />
      <button id="enter">Hinzufügen</button>
    </div>

    <!-- Leere Einkaufsliste -->
    <ul>
      <li>Brot</li>
      <li class="done">Käse</li>
    </ul>

Natürlich möchten wir beim erstmaligen Starten der Web-App noch keine Einträge in der Einkaufsliste vorfinden.

Jedoch erstellen wir in diesem Schritt zwei Beispieleinträge, um den HTML-Entwurf fertigzustellen (z.B. Brot und Käse).

Dem zweiten li-Eintrag geben wir die Klasse "done" (class="done"). Ähnlich wie bei der ID, hilft uns das Klassenattribut später, wenn wir das Element für das Design und die Programmierung auswählen wollen.

Aktueller Stand:

Tatsächlich war es das schon. Du hast jetzt alle HTML-Inhalte erstellt, die du für das Styling sowie für die Funktionalität (in JavaScript) benötigst.

Mir ist bewusst, dass die Web-App (noch) langweilig aussieht. Doch es empfiehlt sich immer zunächst die Struktur zu erstellen und dann entweder das Styling zu starten oder die Funktionen in JavaScript zu erstellen.

Im nächsten Schritt verpassen wir der Einkaufslisten-Web-App ein vernünftiges Design.

Referenz - Der HTML-Code bis hierhin sieht wie folgt aus:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einkaufslisten-Web-App</title>
    <style>
       /* Hier kommt das CSS-Design rein */

       


    </style>
</head>
<body style="">
    <!-- Hier kommt dein HTML-Code rein -->
    <h1>Daniel's Einkaufsliste</h1>
    <img src="https://lerneprogrammieren.de/wp-content/uploads/einkaufswagen.png" height="35px" />
    <div>
        <input id="benutzerInput" type="text" placeholder="Neuer Eintrag..." />
        <button id="enter">Hinzufügen</button>
    </div>

    <!-- Leere Einkaufsliste -->
    <ul>
        <li>Brot</li>
        <li class="done">Käse</li>
    </ul>   
        
    <script>
      // Hier kommt der JavaScript-Code rein






    </script>
</body>
</html>

Design der Web-App in CSS

Wenn du den vorigen Schritten gefolgt bist, solltest du möglichst alle HTML-Inhalte platziert haben. Diese wollen wir nun stylen, damit die Web-App ansprechender aussieht und benutzerfreundlicher ist.

Im oberen Teil deines HTML-Grundgerüsts findest du das öffnende und schließende <style>-Element. Zwischen dieses Element schreiben wir den CSS-Code, der das Aussehen der App beeinflusst.

CSS ist super einfach. Wir müssen CSS nur sagen, welche Elemente wir auswählen wollen. Sobald ein oder mehrere Element ausgewählt sind, können wir diese nach Lust und Laune anpassen.

Die Auswahl der Elemente erfolgt über:

• Element-Name (h1, p, img, div, ul, li, usw.),
• Klasse (class="done") oder
• ID (id="enter").

Schau dir folgenden CSS-Beispielcode an:

p { color: white; } /* Schriftfarbe ALLER <p>-Elemente in weiß */

.done { color: red; } /* Schriftfarbe ALLER Elemente mit dem Klassennamen class="done" in rot */

#enter { color: blue; } /* Schriftfarbe des Elements mit der ID id="enter" in blau */

Wenn du dich erinnerst, haben wir einigen HTML-Elementen im letzten Abschnitt bereits Klassen und ID's gegeben. Das macht das Styling im Folgenden wesentlich einfacher.

CSS: Hintergrund und Schrift anpassen

Fangen wir zunächst mit den groben Details an. Die Web-App soll einen dunklen Hintergrund (Hexcode #1d1e22) bekommen. Außerdem wollen wir Texte wie folgt darstellen:

• Schriftausrichtung: Zentriert
• Schriftart: Arial
• Schriftfarbe: weiß

Dafür müssen wir das <body>-Element in CSS auswählen und die jeweiligen Regeln (Hintergrundfarbe, Schriftfarbe) definieren.

Ändern der Hintergrund- und Schriftfarbe im body-Element:

    <style>
      /* Hier kommt das CSS-Design rein */
      body {
        background: #1d1e22;
        text-align: center;
        font-family: "Arial", sans-serif;
        color: #ffffff;
      }


    </style>

Hast du obigen CSS-Code zwischen den style-Elementen eingefügt? Dann sollte deine Web-App jetzt so aussehen:

Auch wenn die App noch keinen Design-Preis gewinnt, hat diese einfache Änderung bereits einen großen Einfluss auf das Aussehen.

CSS: Überschrift, Texteingabefeld & Button anpassen

Um das Aussehen noch weiter zu verbessern, entscheiden wir uns Die Überschrift, das Texteingabefeld und den Hinzufügen-Button anzupassen.

Da wir nur eine h1-Überschrift im Dokument haben, können wir diese wieder direkt über den Elementnamen auswählen. In unserem Fall wollen wir den Überschrifttext in Großbuchstaben schreiben (GROßBUCHSTABEN) und die Stärke der Schriftart erhöhen.

Füge folgenden Code (irgendwo) zwischen das style-Element ein:

      h1 {
        text-transform: uppercase;
        font-weight: 800;
      }

Das Texteingabefeld sieht noch sehr klein und langweilig aus. Wir entscheiden uns dafür, den Eingabebereich breiter zu machen und das Textfeld zu vergrößern. Mit dem border-radius können wir die Ecken des Elements noch abrunden, was aus meiner Sicht schöner aussieht.

Texteingabefeld stylen:

      input {
        border-radius: 5px;
        min-width: 80%;
        padding: 20px;
        margin-top: 10px;
      }

Ebenso wollen wir den Button vergrößern und die Hintergrundfarbe verändern, damit er sich vom Rest der Seite abhebt. Da wir dem Button im letzten Abschnitt bereits eine ID zugewiesen haben (id="enter"), können wir ihn darüber auswählen und dann stylen.

Hinzufügen-Button stylen:

      #enter {
        border: none;
        padding: 20px;
        border-radius: 5px;
        color: #ffffff;
        background-color: #4eb9cd;
        transition: all 0.75s ease;
        font-weight: normal;
      }

Hast du alle CSS-Codes zwischen das style-Element geschrieben? Dann sollte deine Einkauflisten-App ungefähr so aussehen:

CSS: Einkaufsliste designen

Alles, was jetzt noch fehlt, ist das Styling der Einkaufsliste. Da wir für die Einkaufsliste das <ul>-Element und für die einzelnen Einträge die <li>-Elemente benutzen, können wir die Elemente wunderbar über CSS auswählen und designen.

Außerdem haben wir - im letzten Abschnitt - dem zweiten li-Element bereits die CSS-Klasse (class="done") gegeben. Diese Klasse können wir nun benutzen, um einen abgehakten Listeneintrag zu stylen (z.B. grüner Hintergrund mit durchgestrichenem Text).

Der folgende CSS-Code berücksichtigt bereits das Styling von Elementen der nächsten Abschnitte (JavaScript und optionale Funktionen). Wenn deine Einkauflisten-App genauso aussehen soll wie meine App, dann kannst du folgenden Code einfach zwischen die style-Elemente kopieren & einfügen.

Selbstverständlich kannst du stattdessen deinen eigenen CSS-Code schreiben oder meinen Code anpassen (z.B. andere Farben benutzen).

CSS-Code für die Einkaufsliste:

      ul {
        padding-left: 15px;
        padding-right: 15px;
      }
      li {
        text-align: left;
        margin-top: 20px;
        list-style: none;
        padding: 20px;
        color: #ffffff;
        text-transform: capitalize;
        font-weight: 600;
        border-radius: 5px;
        margin-bottom: 10px;
        background: #4eb9cd;
        transition: all 0.75s ease;
      }

      li:hover {
        background: #76cfe0;
      }

      li > button {
        background: none;
        border: none;
        float: right;
        color: #ffffff;
        font-weight: 800;
      }

      .done {
        background: #51df71 !important;
        color: #00891f;
        text-decoration: line-through;
      }

      .delete {
        display: none;
      }

Hast du den CSS-Code in deine HTML-Datei eingefügt? Wenn ja, sollte die Web-App jetzt so aussehen:

Fällt dir an dem Bild etwas auf? Es ist das gleiche Bild, dass am Anfang dieses Tutorial benutzt wurde. Den Design-Part haben wir an dieser Stelle abgeschlossen.

Doch leider hat unsere App noch keinerlei Funktion. Diesen Teil, nämlich den Teil der Programmierung, erledigen wir mit JavaScript.

Funktionen mit JavaScript hinzufügen

Wenn du dem Tutorial bislang gefolgt bist, hast du jetzt eine gut aussehende Web-App, jedoch ohne Funktionalität.

Damit deine Web-App etwas "macht", bspw. auf einen Button-Klick reagiert, müssen wir in JavaScript programmieren.

Um den gleichen Stand zu haben, biete ich dir an, folgenden Code als Referenz zu benutzen. Der Code enthält alle HTML-Inhalte und den CSS-Code, den wir bis jetzt erstellt haben.

Referenz - Web-App mit HTML und CSS:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einkaufslisten-Web-App</title>
    <style>
       /* Hier kommt das CSS-Design rein */
      body {
        background: #1d1e22;
        text-align: center;
        font-family: "Arial", sans-serif;
        color: #ffffff;
      }

      h1 {
        text-transform: uppercase;
        font-weight: 800;
      }

      input {
        border-radius: 5px;
        min-width: 80%;
        padding: 20px;
        margin-top: 10px;
      }

      #enter {
        border: none;
        padding: 20px;
        border-radius: 5px;
        color: #ffffff;
        background-color: #4eb9cd;
        transition: all 0.75s ease;
        font-weight: normal;
      }

      ul {
        padding-left: 15px;
        padding-right: 15px;
      }
      li {
        text-align: left;
        margin-top: 20px;
        list-style: none;
        padding: 20px;
        color: #ffffff;
        text-transform: capitalize;
        font-weight: 600;
        border-radius: 5px;
        margin-bottom: 10px;
        background: #4eb9cd;
        transition: all 0.75s ease;
      }

      li:hover {
        background: #76cfe0;
      }

      li > button {
        background: none;
        border: none;
        float: right;
        color: #ffffff;
        font-weight: 800;
      }

      .done {
        background: #51df71 !important;
        color: #00891f;
        text-decoration: line-through;
      }

      .delete {
        display: none;
      }      

    </style>
</head>
<body style="">
    <!-- Hier kommt dein HTML-Code rein -->
    <h1>Daniel's Einkaufsliste</h1>
    <img src="https://lerneprogrammieren.de/wp-content/uploads/einkaufswagen.png" height="35px" />
    <div>
        <input id="benutzerInput" type="text" placeholder="Neuer Eintrag..." />
        <button id="enter">Hinzufügen</button>
    </div>

    <!-- Leere Einkaufsliste -->
    <ul>
        <li>Brot</li>
        <li class="done">Käse</li>
    </ul>   
    
    <script>
      // Hier kommt der JavaScript-Code rein






    </script>
</body>
</html>

Rückblick Komponentenplanung

In unseren ersten Überlegungen (Planung der Inhalte & Komponenten), haben wir bereits festgehalten, dass der "Hinzufügen"-Button den eingegebenen Text aus unserem Textfeld erkennen und dann in die Einkaufsliste eintragen soll.

Außerdem haben wir vermerkt, dass fertige Einträge als erledigt abgehakt werden sollen.

Um mit den einzelnen HTML-Elementen in JavaScript zu arbeiten, müssen wir sie zunächst auswählen, ähnlich wie bei CSS.

Welche Elemente sind betroffen und wie können wir sie auswählen?

• Texteingabefeld (id="benutzerInput")
• Hinzufügen-Button  (id="enter")
• Die Einkaufsliste (Elementname: <ul>)
• Die einzelnen Einträge in der Einkaufsliste (Elementname <li>)

In JavaScript werden Elemente wie folgt ausgewählt:

document.getElementById("hallo"); // Wählt das Element mit der ID "hallo" aus

document.querySelector("ul"); // Wählt das Element <ul> aus

document.getElementsByTagName("li"); // Wählt alle Elemente mit dem Elementnamen <li> aus

Auch wenn die Schreibweise von CSS abweicht, ist die Funktionsweise in JavaScript identisch. Wir selektieren Elemente nach ID's, Klassen oder Elementnamen.

Da wir mit den ausgewählten Elementen arbeiten möchten, speichern wir sie in Variablen, mit einem passenden Variablennamen.

Den JavaScript-Code schreiben wir übrigens zwischen das öffnende und schließende <script>-Element (siehe unten in deinem Dokument).

Wenn wir die vier o.g. Elemente auswählen und in Variablen speichern möchten, sieht das wie folgt aus:

    <script>
      // Hier kommt der JavaScript-Code rein

      var enterButton = document.getElementById("enter");
      var input = document.getElementById("benutzerInput");
      var ul = document.querySelector("ul");
      var item = document.getElementsByTagName("li");


    </script>
</body>
</html>

Jetzt, wo du die benötigten HTML-Elemente mit JavaScript selektieren kannst, können wir anfangen, die Elemente zu manipulieren.

Neue Einkaufslisten-Einträge hinzufügen

Wir müssen nun die folgende Logik abdecken: Wenn der "Hinzufügen"-Button angeklickt wird, soll etwas passieren.

Damit der Hinzufügen-Button auf eine Aktion, wie bspw. einen Klick, reagiert, benötigen wir einen sogenannten Event-Listener.

Der Event-Listener sieht wie folgt aus:

ELEMENT.addEventListener(INTERAKTION, MACH-ETWAS);

Erklärung der o.g. Code-Zeile:

• Das ELEMENT ist in unserem Fall der Hinzufügen-Button, den wir in der Variable "enterButton" gespeichert haben.
• An das enterButton-Element fügen wir den Event-Listener an. Dieser wartet auf eine INTERAKTION (z.B. den Klick) und dann soll er ETWAS MACHEN
• MACH-ETWAS bedeutet im Programmierer-Jargon, dass eine Funktion ausgeführt werden soll. Eine Funktion ist nichts anderes als eine Sammlung von Befehlen, die JavaScript ausführt.

Wenn wir diese Erklärung in JavaScript übersetzen, liest sich das wie folgt:

enterButton.addEventListener("click", erstellenEintrag);

Wähle enterButton aus und füge ihm einen Event-Listener hinzu .addEventListener(), der auf einen Klick "click" reagiert und dann die Funktion erstellenEintrag ausführt.

Wenn du die obige Code-Zeile, mit dem Event-Listener, zwischen das <script>-Element eingefügt hast, reagiert dein Button auf Klicks. Soweit so gut!

Doch gibt es noch ein Problem.

Der Event-Listener führt nach dem Klick die Funktion erstellenEintrag aus. Das resultiert in einem Fehler, da wir die Funktion nicht erstellt haben.

Schließlich müssen wir JavaScript noch mitteilen, was passieren soll, nachdem der Hinzufügen-Button angeklickt wurde.

Die erstellenEintrag()-Funktion

Nachdem wir erfolgreich auf Klicks reagieren können, müssen wir eine Funktion einprogrammieren.

Eine Funktion schreibst du in JavaScript wie folgt:

      function erstellenEintrag() {



      }

Fügst du diesen Code in dein Dokument ein, verschwinden alle Fehler, wenn du auf den Hinzufügen-Button klickst.

Zwischen die geschweiften Klammern {  } fügen wir die Befehle ein, die deine Funktion ausführen soll.

Wenn ein Benutzer den Hinzufügen-Button anklickt, soll der Text im Eingabefeld in unsere Einkaufsliste übernommen werden.

Übersetzen wir diese Logik in die Programmierung, wollen wir ein neues <li>-Element (Listeneintrag) erstellen und dann in unserer Einkaufsliste (<ul>-Element) darstellen.

Mit dem Befehl document.createElement(), kann JavaScript neue HTML-Elemente hinzufügen. Wir wollen ein li-Element haben: document.createElement("li");</code

Außerdem ist es hilfreich, wenn wir unser neues li-Element in einer Variablen abspeichern, damit wir darauf später wieder zugreifen können.

Übersetzt in JavaScript-Code machen wir Folgendes - <li>-Element hinzufügen & in Variable abspeichern:

      function erstellenEintrag() {
        var li = document.createElement("li"); // Erstellt ein "li" Element


      }

Wenn du obigen Code in dein Dokument einfügst und dann ausführst, wird beim Klicken auf den Button noch nichts passieren.

Warum?

Auch wenn das li-Element korrekt erstellt wird, haben wir JavaScript noch nicht gesagt, wo es angezeigt werden soll. Einige Sätze zuvor haben wir festgelegt, dass wir es in der Einkaufsliste (<ul>-Element) anzeigen wollen.

Um einen Eintrag an eine Liste anzufügen, benutzen wir die Methode .appendChild(). Diese Methode soll an das ul-Element angehängt werden, was so aussieht: ul.appendChild()

Im Folgenden müssen wir JavaScript mitteilen, was angefügt werden soll. Gut, dass wir das neue <li>-Element bereits in der Variablen var li gespeichert haben!

Neues li-Element an die Einkaufsliste anfügen:

      function erstellenEintrag() {
        var li = document.createElement("li"); // Erstellt neues <li>-Element
        // Diese Zeile bitte freilassen!
        ul.appendChild(li); // Neues <li>-Element an die Einkaufsliste <ul> anfügen!

      }
      enterButton.addEventListener("click", erstellenEintrag);

Übernimm den obigen Code und führe deine Web-App aus. Klicke jetzt erneut auf den Hinzufügen-Button. Du solltest erkennen, dass deine App (endlich) etwas macht.

Wie du siehst, werden nun neue li-Einträge an die Einkaufsliste (<ul>) angehängt und dargestellt.

Alles, was jetzt noch fehlt, ist die Eingabe aus dem Texteingabefeld auszulesen und beim Erstellen des <li>-Elements mitzugeben.

Dafür rufen wir, das in der Variablen "input" gespeicherte Texteingabefeld auf und lesen dessen Wert mit .value aus.

Wir kapseln diesen Befehl in der appendChild- und createTextNode-Methode, um den Wert an das neue li-Element anzuhängen.

      enterButton.addEventListener("click", erstellenEintrag);

      function erstellenEintrag() {
        var li = document.createElement("li"); // Erstellt neues <li>-Element
        li.appendChild(document.createTextNode(input.value)); // Liest das Texteingabefeld aus und übergibt Wert an li-Element
        ul.appendChild(li); // Neues <li>-Element an die Einkaufsliste <ul> anfügen!

      }

Zu guter Letzt, setzen wir den Wert des Eingabefelds (input.value = "";) zurück, damit wir neue Einträge hinzufügen können, ohne vorhandene Werte manuell aus dem Feld löschen zu müssen.

      enterButton.addEventListener("click", erstellenEintrag);

      function erstellenEintrag() {
        var li = document.createElement("li"); // Erstellt neues <li>-Element
        li.appendChild(document.createTextNode(input.value)); // Liest das Texteingabefeld aus und übergibt Wert an li-Element
        ul.appendChild(li); // Neues <li>-Element an die Einkaufsliste <ul> anfügen!
        input.value = ""; // Löscht Wert im Eingabefeld
      }      

Starte die Web-App erneut. Du kannst jetzt neue Listeneinträge hinzufügen, was die Grundfunktionalität einer Einkaufsliste abdeckt.

Die Dummy-Einträge (Brot & Käse), kannst du aus deinem HTML-Code löschen. Die Einträge haben uns einen guten Dienst erwiesen, als wir die HTML-Struktur sowie das CSS-Styling durchgeführt haben.

Lösche die <li>-Elemente aus deinem HTML-Code, um die Dummy-Einträge loszuwerden:

      <li>Brot</li>
      <li class="done">Käse</li>

Solltest du das Tutorial bis hierhin verfolgt haben, zolle ich dir großen Respekt!

Wenn du noch nicht genug hast, schaue dir den nächsten Abschnitt an, um deine App zu verbessern, z.B. um Einträge abzuhaken oder zu löschen.

Einträge abhaken

Den schwierigsten Teil hast du bereits hinter dir. Möchtest du deine App um grundlegende Funktionen, wie dem Abhaken von Einträgen erweitern, kannst du wie folgt vorgehen.

Logik: Wenn ein bestehender Eintrag (li) angeklickt wird, soll er abgehakt werden. Abgehakt, heißt für uns, dass der Listen-Text durchgestrichen sowie die Hintergrundfarbe des Listen-Elements (z.B. in grün) geändert werden soll. Zum Glück haben wir genau dieses Styling bereits in unserem CSS-Code in der Klasse .done berücksichtigt.

Alles, was du jetzt (wieder) benötigst, ist ein Event-Listener, der auf einen Klick reagiert und dann eine Funktion ausführt (CSS-Klasse .done setzen).

li.addEventListener("click", abgehaktEintrag);

Erstelle jetzt die Funktion abgehaktEintrag. Sie wird innerhalb der Funktion erstellenEintrag eingefügt (z.B. unter der Zeile input.value = "";)

In der abgehaktEintrag-Funktion möchten wir die CSS-Klasse .done aufrufen, wenn der Eintrag ein Mal angeklickt wurde.

Wird der Eintrag erneut angeklickt, soll die CSS-Klasse .done wieder gelöscht werden, damit der Eintrag erneut als aktiv (nicht erledigt) markiert wird.

Dafür benutzen wir die classList.toggle()-Methode, welche CSS-Klassen hinzufügt oder wieder löscht.

Code für Funktion abgehaktEintrag():

      li.addEventListener("click", abgehaktEintrag);
      function abgehaktEintrag() {
        li.classList.toggle("done");
      }

Rufe die Einkaufsliste erneut auf. Wenn du einen Eintrag hinzufügst und anklickst, wird der Hintergrund in grün geändert und der bestehende Text durchgestrichen.

Einträge löschen

Deine App-Nutzer beklagen, dass sie sich oftmals vertippen und dann versehentlich einen neuen Eintrag in die Einkaufsliste hinzufügen. Außerdem wollen sie längst abgehakte Einträge irgendwann löschen.

Daher wäre es sinnvoll, die App so zu erweitern, dass Listeneinträge gelöscht werden können. Wenn du das Tutorial bis hierhin verfolgt hast, hast du bereits (fast) alles, um diese Funktion nachzubauen.

Der einzige Unterschied besteht darin, dass wir zunächst ein neues HTML-Element innerhalb unserer Listenelemente erstellen müssen.

Ich habe mich für folgende Logik entschieden:

1. Wenn ein neuer Eintrag hinzugefügt wird, soll zusätzlich ein Button mit dem Text "X" rechtsbündig angezeigt werden.
2. Der "X"-Button soll auf einen Klick reagieren (Event-Listener) und dann die CSS-Klasse .delete ausführen. Erklärung: Die CSS-Klasse .delete setzt das li-Element auf den Wert display: none. Das Element wird dadurch ausgeblendet.

Ziemlich einfach!

Schritt 1: X-Button in jedem li-Element anzeigen

Wir erstellen mit .createElement("button") ein neues Button-Element und fügen mit .appendChild() und createTextNode() den Text "X" an.

      var löschenBtn = document.createElement("button");
      löschenBtn.appendChild(document.createTextNode("X"));

Im Anschluss fügen wir den X-Button an das li-Element an.

      li.appendChild(löschenBtn);      
      var löschenBtn = document.createElement("button");
      löschenBtn.appendChild(document.createTextNode("X"));
      li.appendChild(löschenBtn);

Das war's!

Schritt 2: Event-Listener und löschenEintrag-Funktion

Der X-Button soll auf einen Klick reagieren. Dafür benötigen wir wieder einen Event-Listener.

      löschenBtn.addEventListener("click", löschenEintrag);

Wurde dieser erstellt, programmieren wir die löschenEintrag()-Funktion. Diese soll dem angeklickten li-Element, die CSS-Klasse .delete anhängen. Dadurch wird das Element ausgeblendet bzw. gelöscht.

      löschenBtn.addEventListener("click", löschenEintrag);

      function löschenEintrag() {
        li.classList.add("delete");
      }

Der gesamte Code zum Löschen von Einträgen:

      var löschenBtn = document.createElement("button");
      löschenBtn.appendChild(document.createTextNode("X"));
      li.appendChild(löschenBtn);

      löschenBtn.addEventListener("click", löschenEintrag);
 
      function löschenEintrag() {
        li.classList.add("delete");
      }

Jetzt hast du eine fertige Einkaufslisten-App!

Oder? Eine App ist nie fertig. Schaue dir nachfolgend den optionalen Abschnitt zu weiteren Funktionen an.

Optional: Keine leeren Listeneinträge erlauben

Du hast bereits eine Menge Funktionalität für deine Einkaufslisten-App erstellt.

Doch im produktiven Einsatz der Web-App ist einigen Nutzern aufgefallen, dass die Benutzererfahrung noch nicht ausgereift ist.

Mitunter sollten noch eine Funktion berücksichtigt werden: Keine leeren Listeneinträge erlauben.

Derzeit ist es möglich, leere Listeneinträge zu erstellen. Du kannst das selbst ausprobieren, indem du auf den "Hinzufügen"-Button klickst, ohne eine Eingabe im Texteingabefeld zu machen. Das ist relativ unschön.

Besser wäre es, wenn wir eine Logik hätten, die vor der Erstellung der Listeneinträge prüft, ob eine Benutzereingabe gemacht wurde.

Die Logik sieht so aus:

• Wurde keine Benutzereingabe getätigt, dann mache nichts
• Wurde eine Benutzereingabe getätigt, dann erstelle einen Listeneintrag

Dein Programm sollte daher in der Lage sein, einen Input zu erkennen und dann eine Entscheidung zu treffen (Listeneintragerstellen JA oder NEIN). Mit JavaScript lässt sich das einfach realisieren.

prüfeInput-Funktion - Input-Textlänge prüfen

Auf das Textfeld können wir mit dem Code input.value zugreifen. Die Länge der Eingabe prüfen wir mit .length. Das sieht so aus: input.value.length

Der Text Hallo würde z.B. die Zahl 5 zurückgeben, da das Wort "Hallo" aus 5 Buchstaben besteht. Daher können wir davon ausgehen, dass .length der Zahl 0 entspricht, wenn der User keine Eingabe gemacht hat.

Wir wollen nur einen Listeneintrag erstellen, wenn .length größer als 0 ist, nämlich wenn irgendein Eintrag im Textfeld gemacht wurde. Diese Bedingung sieht im Code so aus: input.value.length > 0

Zusätzlich benötigen wir eine Entscheidung (If), die, wenn die Bedingung erfüllt wurde, die erstellenEintrag()-Funktion ausführt.

Diese Entscheidung schreiben wir in eine neue Funktion, z.B. namens prüfeInput().

      function prüfeInput() {
        if (input.value.length > 0) {
          erstellenEintrag();
        }
      }

Event-Listener anpassen:

Alles, was du jetzt noch machen musst, ist deinen Hinzufügen-Button Event-Listener abzuändern. Er sollte zurzeit so aussehen:

      enterButton.addEventListener("click", erstellenEintrag);

Änder den Code wie folgt ab, damit nach einem Klick auf den Hinzufügen-Button, zunächst die prüfeInput-Funktion ausgeführt wird.

      enterButton.addEventListener("click", prüfeInput);

Führe die Einkauflisten-App erneut aus. Jetzt ist es nicht mehr möglich, einen leeren Listeneintrag hinzuzufügen.

Fazit

Das war ein außergewöhnlich ausführliches Tutorial zur Erstellung einer Einkaufslisten-Web-App in JavaScript. Die Arbeitsschritte wurden bewusst ausführlich erklärt und in kleine Teile heruntergebrochen, damit du einen guten Einblick bekommst, wie Software-Entwickler und insbesondere Webentwickler arbeiten.

Die hier programmierte Web-App ist noch längst nicht fertig. Du hast es selbst in der Hand, die App mit weiteren Funktionen auszustatten (Daten-Persistenz, Daten in Datenbank speichern, usw.).

Schreibe deine Ideen auf und versuche, anfangs zunächst, möglichst einfache Features selbst zu implementieren.

Du wirst merken, dass du dabei immer wieder Fehler machst und auf Herausforderungen stößt. Doch genau darum geht es beim Programmieren!

Wenn dir das Tutorial Spaß gemacht hat, hinterlasse gerne einen Kommentar.

Für mehr Inhalte zur Web-Entwicklung empfehlen wir dir unsere LerneProgrammieren Online-Kurse, wie bspw. den Anfängerkurs (unser Bestseller) oder das Web-Entwickler-Bootcamp.

Den gesamten Quellcode dieser Einkauflisten-Web-App findest du übrigens in deinem kostenlosen LerneProgrammieren Mitgliederbereich. Wenn du noch keinen kostenlosen Account hast, kannst du dich hier registrieren. Du bekommst dann Zugriff auf alle kostenlosen Tutorial, Quellcodes und weitere Inhalte.

Bis zum nächsten Mal bei LerneProgrammieren!