finalized JS DOM
This commit is contained in:
22
03_dom/uebungen/u18_cuteycats/README.md
Normal file
22
03_dom/uebungen/u18_cuteycats/README.md
Normal file
@@ -0,0 +1,22 @@
|
||||
# Ü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.
|
||||
|
||||
1. 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!
|
||||
|
||||
2. Achte darauf, dass sich die gleiche Katze nicht zweimal auswählen lässt.
|
||||
|
||||
3. Es darf nicht mehr als drei niedlichste Katzen geben.
|
||||
|
||||
4. 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.
|
||||
Reference in New Issue
Block a user