JavaScript Schnellstart: Coding-Challenge: TODO-Liste – Start zum Mond

Wie funktioniert diese Challenge?

1. Diese Coding-Challenge besteht aus 4 verschiedenen Aufgaben.
2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

Starten wir mit der ersten Aufgabe:

1. Klick für neues Element

Installiere jQuery über ein Script-Element und verwende einen Klickhandler für den Button mit der id #knopf.
jQuery Pfad: /assets/templates/deps/jquery-3.4.1.min.js

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

  
  <script src="/assets/templates/deps/jquery-3.4.1.min.js"></script>

  $("#knopf").click(function() {
  
});

[/lp_spoiler]

2. Eingabe bei Klick!

Frage beim Klick nach, wie das neue Todo heißen soll.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

      $("#knopf").click(function() {
        var text = prompt("Was kommt auf die Liste?");                      
      });

[/lp_spoiler]

3. Neues Element erstellen und hinzufügen

Jetzt erstellen wir ein komplett neues Element und fügen es hinzu in unser Todo-Liste.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

      $("#knopf").click(function() {
        var text = prompt("Was kommt auf die Liste?");
        var neuesElement = document.createElement("p");
        neuesElement.innerHTML = text;
        document.body.appendChild(neuesElement);
      });

[/lp_spoiler]

4. Elemente anklicken

Erstelle einen Klickhandler für jedes neue Element, welches den Text durchstreichen lässt

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

$(neuesElement).click(function() {
          if (neuesElement.innerHTML.indexOf('<span style="text-decoration: line-through;">') > -1) {
              neuesElement.innerHTML = text;
          } else {
              neuesElement.innerHTML = '<span style="text-decoration: line-through;">' + text + '</span>';
          }
        });

[/lp_spoiler]