Coding Challenge #1: Über Mich Seite

Das Ziel der ersten Coding Challenge ist es eine "Über Mich" bzw. "Über Uns" Seite mit jQuery anzupassen.

Wie du im untenstehenden Editor siehst, ist hier bereits jQuery über den Google CDN 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 einige kleine Aufgaben vorbereitet, die du bewältigen sollst.

Wenn du nicht weiter kommst kannst du auf die jeweilige Komplettlösung klicken. Am Anfang ist es völlig normal, wenn du mal nicht weiterkommst. Versuche dennoch vorher etwas nachzudenken und auszuprobieren, bevor du die Lösung anschaust.

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

Aufgabe 1:

(Der jQuery Code beginnt ab Zeile 38)

Ändere den Vornamen "Daniel" in deinen eigenen Vornamen um. Achtung: Wir benutzen dafür jQuery (nicht schummeln und den Vornamen einfach im HTML Code abändern!)

Kurze Starthilfe für die Aufgabe: Schaue dir die Zeile mit dem <h1>-Tag näher an. Gibt es hier ein Element, dass du mit einem jQuery-Selektor auswählen kannst, um den Vornamen zu ändern?

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

Um den Vornamen-Text zu ändern eignet sich das ID Element "vorname" als idealer Selektor. Eine ID ist immer einzigartig. Das bedeutet, dass die ID nur einmal für ein Element vergeben werden kann. Hier haben wir eine 100%ige Chance, dass wir das richtige Element auswählen.

Der jQuery-Code zum Auswählen der ID "vorname" lautet:

$("#vorname").text("DEIN VORNAME");

Code-Erklärung:

1. Wir wählen mit $("#vorname") die ID "vorname" aus.
2. Mit .text("DEIN VORNAME"); definieren wir das Event (Ereignis). Von dem ausgewählten Element soll also der Text ändert werden.[/lp_spoiler]

Aufgabe 2:

Kannst du den Text des Buttons in einen beliebigen Text, z.B. in "Mein neuer Button Text" ändern, wenn er mit der Maus angeklickt wird? Überlege zunächst, welcher Selektor sich dafür am besten eignet.

Zusatz-Challenge zu Aufgabe 2: Kannst du zusätzlich den Hintergrund des Buttons in "gelb" (yellow) ändern?

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

Um den Button-Text zu ändern, wenn er angeklickt wird, können wir z.B. das "a" Element auswählen. In unserem Code gibt es zum Glück nur ein <a>-Element.

Der jQuery-Code zum Auswählen des "a" Elements lautet:

$("a").click(function() {

   // Hier kommt der auszuführende Code rein

});

Super! Jetzt müssen wir jQuery nur noch sagen, was es machen soll, wenn das "a" Element angeklickt wird.

Zum Ändern des Textes wählen wir das bereits selektierte "a" Element mit $(this) aus:

$(this).text("Neuer Button Text");

Um den Hintergrund des Buttons in die Farbe "gelb" zu ändern brauchen wir zusätzlich folgenden Code:

$(this).css("background", "yellow");

Der gesamte jQuery Code sieht dann so aus:

$("a").click(function() {
  $(this).text("Neuer Button Text");
  $(this).css("background", "yellow");
});

Weiter geht's!

[/lp_spoiler]

Aufgabe 3:

Nicht schlecht! Kannst du deinen jQuery-Code aus Aufgabe 1 so erweitern, dass sich dein Vorname erst ändert, wenn du mit der Maus über das Bild (mit dem Smiley) fährst?

Du solltest zunächst überlegen, wie du das Bild mit dem Smiley selektieren kannst. Ein kleiner Tipp: Für das Mouse-Event brauchst du danach die hover()-Methode.

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

Das Smiley-Bild hat die CSS-Klasse .smiley 

Damit können wir das Bild problemlos selektieren. Jetzt schalten wir noch die hover() Methode dahinter.

$(".smiley").hover(function() { // Hier kommt der Code rein });

Wenn du jetzt noch den Code aus Aufgabe 1 einfügst, sollte dein fertiger Code wie folgt aussehen:

$(".smiley").hover(function() { 
  $("#vorname").text("DEIN VORNAME");
});

[/lp_spoiler]

Hier ist die Komplettlösung der Coding Challenge

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

$(".smiley").hover(function() {
   $("#vorname").text("Dein Vorname");
});

$("a").click(function() {
   $(this).text("Neuer Button Text");
   $(this).css("background", "yellow");
});

[/lp_spoiler]

(Der jQuery Code beginnt ab Zeile 38)