Coding Challenge #2: Effekte für Fotografen-Webseite

Das Ziel der zweiten Coding Challenge ist es eine bestehende Webseite mit nützlichen Effekten auszustatten. Dein "Kunde" ist hier ein Fotograf.

Die Seite sieht ungefähr so aus:

Wie du im untenstehenden 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 einige Aufgaben vorbereitet, die du bewältigen kannst.

Wenn du nicht weiter kommst kannst du auf die jeweilige Komplettlösung klicken. Es ist ganz 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 deine erste Aufgabe:

Aufgabe 1 - Navigation togglen

(Der jQuery Code beginnt ab Zeile 77)

Zurzeit wird kein Menü angezeigt. Alles was du sehen kannst ist der "Menü"-Button (oben links). Dein Kunde wünscht sich, dass beim Anklicken des "Menü"-Buttons, das Menü bzw. die Navigationsleiste angezeigt wird. Beim erneuten Anklicken des Buttons, soll die Navigation wieder verschwinden (ausgeblendet werden).

Hier ist die toggle()-Methode hilfreich.

[lp_spoiler title="Tipp anzeigen" class="da"]

1. Damit der "Menü"-Button auf einen Klick reagiert, benötigst du zuerst eine ID oder Klasse des Buttons. Schaue in Zeile 16. Am besten ist hier die ID, da sie einzigartig ist
2. Jetzt, da du die ID des Buttons hast, kannst du die eine click()-Methode erstellen. Dein Code kommt in Zeile 81 (unter die document.ready Funktion).
3. Du möchtest die Navigation mit einem toggle() ein- und ausblenden. Um alle Navigations-Elemente anzusprechen, benötigst du erneut eine Klasse oder ID. Schau dafür in Zeile 18. Hier findest du die Navigationselemente. Für die Aufgabe eignet sich die Klasse "navbar-nav", um alle Elemente zu erreichen. Alternativ wäre auch die Klasse "nav-item" richtig.
4. Gehe jetzt zurück in deinen jQuery-Code und baue die toggle()-Funktion in Zeile 82.
5. Starte den Code und teste den "Menü"-Button. Das war es schon!

[/lp_spoiler]

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"]

Füge diesen Code in Zeile 81 bis 83 ein:

$("#menueBtn").click(function() {      
    $(".navbar-nav").toggle();      
});

[/lp_spoiler]

Aufgabe 2 - Animation erstellen

(Dein jQuery Code beginnt ab Zeile 86 - unter dem Kommentar:  // Klick-Event für Animation)

Dein Kunde möchte ebenfalls den Button "Portfolio anzeigen" mit einer Funktion ausstatten. Beim Anklicken des Buttons sollen zwei seiner besten Bilder angezeigt werden. Die beiden Bilder sind bereits im Code geladen (siehe Zeile 57-60), werden jedoch derzeit noch nicht angezeigt.

1. Erstelle für den Container mit der Klasse "portfolio" einen fadeIn().
2. Die Bilder sollen nach dem Fade-In auf 200 Pixel vergrößert werden. Hier benötigst du die jeweiligen Klassen der Bilder.

So entsteht eine schöne Animation.

[lp_spoiler title="Tipp anzeigen" class="da"]

1. Damit der "Portfolio anzeigen"-Button auf einen Klick reagiert, benötigst du zuerst eine ID oder Klasse des Buttons. Schaue in Zeile 37. Hier findest du die Klasse "animation".
2. Jetzt, da du die Klasse des Buttons hast, kannst du die eine click()-Methode erstellen. Dein Code kommt in Zeile 86 unter den Kommentar: // Klick-Event für Animation.
3. Für den fadeIn() benötigst du ebenfalls eine Klasse oder ID. In Zeile 57 hat das Div-Element die Klasse "portfolio". Perfekt, damit können wir beide Bilder einblenden. Baue die fadeIn() Animation in Zeile 87 ein.
4. Die Bilder aus Zeile 58 und 59 sollen zusätzilch nach dem fadeIn() auf 200 Pixel vergrößert werden. Suche dir die Klassen der Bilder heraus und erstelle eine animate()-Funktion für beide Bilder. Tipp:
   $(".klasse").animate({width: "..... px"})[/lp_spoiler]

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 86 bis 90 ein:

$(".animation").click(function() {      
  $(".portfolio").fadeIn("slow");
  $(".portfolio1").animate({width: "200px"})
  $(".portfolio2").animate({width: "200px"})        
});

[/lp_spoiler]

Hier ist die Komplettlösung der Coding Challenge:

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

<script>
  // Klick-Event für Menü-Toggle (Ein-/Ausblenden)
  $(document).ready(function() {    
    $("#menueBtn").click(function() {      
      $(".navbar-nav").toggle();      
    });

  // Klick-Event für Animation
    $(".animation").click(function() {      
      $(".portfolio").fadeIn("slow");
      $(".portfolio1").animate({width: "200px"})
      $(".portfolio2").animate({width: "200px"})        
    });
  });
</script>  

[/lp_spoiler]

(Der jQuery Code beginnt ab Zeile 77)