jQuery Schnellstart – Coding Challenge: Einkaufsliste für Spaghetti-Rezept

Das Ziel der letzten Coding Challenge ist es, eine To-do-Liste für ein Spaghetti-Rezept zu erstellen. Du kannst dir die Anwendung auch als "Einkaufsliste" vorstellen.

Ich habe dir bereits ein HTML-Gerüst für eine To-do-Listen-App erstellt. Die App besteht aus einem Text-Eingabefeld und einem "Hinzufügen"-Button.

Ziel-Funktionsweise der ToDo-App:

Der User macht einen To-do-Listen-Eintrag und klickt dann auf den Hinzufügen-Button. Sein Eintrag wird dann, unter dem Eingabefeld, in einer nummerierten Liste (<ol>) angezeigt.

Die Anwendung sieht ungefähr so aus:

Wie du im unten stehenden Editor siehst, ist hier bereits jQuery geladen. Die document.Ready Funktion ist auch vorgeladen. Das bedeutet, dass wir sofort mit deiner Coding-Challenge beginnen können. Ich habe dir dafür drei Aufgaben vorbereitet, die du bewältigen kannst.

Wenn du nicht weiter kommst, kannst du auf die Komplettlösung klicken. Versuche dennoch vorher etwas nachzudenken und auszuprobieren, bevor du die Lösung anschaust.

Hier ist das Spaghetti-Rezept:

1. 360 g Spaghetti
2. 200 g Speck
3. 3 Eigelb
4. 80 g Pecorino
5. Salz, Pfeffer

Viel Spaß bei der Challenge. Hier ist deine erste Aufgabe:

Aufgabe 1 - ToDo-Listen Einträge hinzufügen

(Der jQuery Code beginnt ab Zeile 34)

Schaue dir zunächst den HTML-Code an. Ich habe dir einige Kommentare erstellt, damit der Code übersichtlicher ist. Im Code gibt es einen Text-Input, einen Button und ein leeres ol-Element, dass für unsere ToDo-Einträge benutzt wird.

1. Erstelle zunächst ein Click-Event für den Button. Suche nach seiner ID und baue dann die click()-Methode.
2. Die weitere Aufgabe ist, innerhalb des <ol>-Elements (nummerierte Liste), ein <li>-Element hinzuzufügen, wenn der Hinzufügen-Button angeklickt wird. Du benötigst dafür die .append() Methode. Erledige diese Aufgabe und mach erst dann weiter.
3. Wenn dein Hinzufügen-Button korrekt funktioniert, kannst du weitermachen.
4. Jetzt wollen wir den User-Input innerhalb des <li>-Element anzeigen. Lese dafür das Text-Eingabefeld aus. Du benötigst dafür die val() Methode.
5. Führe deinen Code aus. Die ToDo-App sollte bereits Einträge hinzufügen

Wenn du zusätzliche Hilfe brauchst, findest du hier die Lösung zu Aufgabe 1:

[lp_spoiler title="Lösung zu Aufgabe 1:" class="da"]

Ich zeige dir folgend zwei Lösungsansätze

Lösung 1: Alles in eine Zeile schreiben

$("#button").click(function(){
    $("ol").append("<li>" + $("#eingabefeld").val() + "</li>");
});

Lösung 2: Variable benutzen

Wenn du mit Variablen vertraut bist, kannst du den User-Input zunächst in einer Variable speichern und dann in der append() Methode aufrufen.

Beide Lösungen machen das Gleiche. Die hier gezeigte ist etwas eleganter:

$("#button").click(function(){
	var hinzufuegen = $("#eingabefeld").val();
    $("ol").append("<li>" + hinzufuegen + "</li>");
});

[/lp_spoiler]

Aufgabe 2 - ToDo-Einträge per Doppelklick löschen

(Dein jQuery Code für diese Aufgabe beginnt ab Zeile 39 (unter dem Kommentar für Aufgabe 2)

Deine ToDo-App kann bereits Einträge hinzufügen. Doch was, wenn wir uns vertippen oder einen Eintrag erledigt haben? Es wäre daher gut, Einträge wieder löschen zu können.

Wir möchten einen Eintrag per Doppelklick löschen. Für einen Doppelklick benötigen wir die .on()-Methode, die hier nur nebenläufig erwähnt wurde. Ich werde dir daher gleich etwas helfen.

Wenn du lieber knobeln möchtest, schaue dir die jQuery-Dokumentation zur .on() Methode an. Wir benötigen hier den Wert "dblclick", damit das Skript auf unseren Doppelklick reagiert. Weiterhin müssen wir ein Argument liefern, was ausgewählt werden soll. Da wir einen Listen-Eintrag auswählen wollen, muss hier das Argument "li" eingetragen werden.

Füge folgenden Code in Zeile 39 genauer gesagt unter dem Kommentar (// 2. Lösche Einträge bei Doppelklick) für Aufgabe 2 ein:

$(document).on("dblclick","li", function(){
   // Hier kommt der Code rein
});

Wenn du den obigen Code eingefügt hast, oder selbst herausgefunden hast, wie man mit der .on()-Methode auf einen Doppelklick reagiert, kann es weitergehen.

Deine Aufgabe besteht darin, den aktuell angeklickten Eintrag zu löschen. Bisher haben wir Einträge nach ihrem Element-Namen, der ID oder der Klasse ausgewählt. Doch was ist, wenn wir das angeklickte Element auswählen wollen und dies keine ID oder Klasse hat? Ganz einfach: Benutze dafür das Argument this.

Hier ein kurzes Beispiel zu this:

$(document).on("dblclick","li", function(){
   $(this).Methode;
});

Code-Erklärung: Wenn Doppelklick auf <li> Element, dann führe die Methode für DIESES (this) Element aus.

Da wir diese Aufgabe elegant bewältigen möchten, benutzen wir hier die jQuery-Verkettung.

1. Bei einem Doppelklick soll für das aktuelle Element (this), die CSS-Klasse "streichen" getoggelt werden (die Klasse findest du in Zeile 7. Sie streicht den Text des Elements durch). Benutze dafür die .toggleClass() Methode.
2. Außerdem soll das ausgewählte Element mit einem Fade-Out langsam ausgeblendet werden. Benutze dafür die fadeOut()-Methode mit dem passenden Wert, um das Element "langsam" auszublenden.

Wenn du zusätzliche Hilfe brauchst, findest du hier die Lösung zu Aufgabe 2:

[lp_spoiler title="Lösung zu Aufgabe 2:" class="da"]

Füge diesen Code in Zeile 39 ein:

$(document).on("dblclick","li", function(){
   $(this).toggleClass("streichen").fadeOut("slow");
});

[/lp_spoiler]

Aufgabe 3 - Lösche Input im Textfeld, wenn es ausgewählt wird

(Dein jQuery Code für diese Aufgabe beginnt ab Zeile 44)

Als kleine Bonusaufgabe wollen wir die Usability unserer ToDo-App verbessern. Leider bleibt der Text-Input im Textfeld stehen, obwohl der Eintrag schon hinzugefügt wurde. Es ist lästig, jedes Mal den Text manuell zu löschen, wenn ein neuer Eintrag gemacht werden soll. Daher wäre es praktisch, wenn das Text-Input beim Anklicken in das Textfeld automatisch gelöscht wird.

Kannst du diese Aufgabe ohne weitere Hilfe bewältigen?

(Wenn du Hilfe brauchst, kannst du dir nachfolgend einen Tipp anzeigen lassen)

[lp_spoiler title="Tipp zu Aufgabe 3 anzeigen:" class="da"]

Finde eine Möglichkeit, das Text-Eingabefeld auszuwählen (z.B. mit dem Element "input")

Das Feld soll etwas machen, sobald es ausgewählt/aktiviert wurde. Dafür benötigst du die focus()-Methode.

Du möchtest den Input des aktuell ausgewählten Feldes löschen. Benutze das Argument this, um es auszuwählen. Benutze dann die .val()-Methode mit zwei leeren Strings "".

[/lp_spoiler]

Wenn du zusätzliche Hilfe brauchst, findest du hier die Lösung zu Aufgabe 3:

[lp_spoiler title="Lösung zu Aufgabe 3:" class="da"]

Füge diesen Code in Zeile 44

$("input").focus(function() {
	$(this).val("");
});

[/lp_spoiler]

Hier ist die Komplettlösung der Coding Challenge:

[lp_spoiler title="Komplettlösung zur Coding-Challenge #4 anzeigen" class="da"]

<script>
$(document).ready(function(){

	// 1. Erstelle Eintrag 
    $("#button").click(function(){
		var hinzufuegen = $("#eingabefeld").val();
	    $("ol").append("<li>" + hinzufuegen + "</li>");
	});

	// 2. Lösche Einträge bei Doppelklick
    $(document).on("dblclick","li", function(){
       $(this).toggleClass("streichen").fadeOut("slow");
	});
	
	// 3. Lösche Input, wenn Feld "aktiviert" bzw. fokussiert wird
	$("input").focus(function() {
		$(this).val("");
	});			
});
</script>

[/lp_spoiler]

(Der jQuery Code beginnt ab Zeile 34)