Übung 18: Cuteycat

Der Katzenfreundeverein Cuteycat hat einen Auftrag für dich. Der Verein möchte auf seiner Website einen Wettbewerb ausrichten. Die Seite zeigt eine Reihe von Katzen, aus denen ein Besucher jeweils die drei niedlichsten auswählen soll.

Sobald ein Besucher auf eine der Katzen klickt, soll diese auch in der rechten Box (Cutest Cats) erscheinen. Sie darf aber aus der Liste der Katzen (Our Cats) nicht verschwinden!
Achte darauf, dass sich die gleiche Katze nicht zweimal auswählen lässt.
Es darf nicht mehr als drei niedlichste Katzen geben.
Benutzer sollen eine Katze in der Gewinnerbox (Cutest Cats) anklicken können, um sie wieder herauszunehmen.

Hinweise Versuche die Übung ohne .innerHTML zu lösen!

Unter der URL http://loremflickr.com/150/150/cute,kitten/all kannst du weitere zufällige Katzenbilder generieren.

Die Seite http://fantasynamegenerators.com/cat-names.php produziert zufällige Katzennamen.

Verwende .cloneNode(true) auf den li-Elementen, um das Entfernen der Katzen aus Our Cats zu verhindern.

Registriere den Event-Handler auf den li-Elementen. Falls der Benutzer aber nicht direkt das li anklickt, sondern nur Bild oder Text (Name der Katze), so zeigt event.target auf das angeklickte Element. Mittels event.currentTarget kannst du aber immer noch auf das li zugreifen. currentTarget enthält immer das Element, auf dem der Handler tatsächlich registriert wurde.