Dans cet exercice de révision, l'idée est de se pratiquer avec le DOM et les événements en JavaScript. Notez qu'il n'y a pas vraiment d'animation dans cet exercice.
Ajouter le code javascript afin que :
- Lorsque l'usager change la couleur du champ
#sColor, alors celle-ci devient la couleur de fond de .space.
- Lorsque l'usager clique sur le bouton
+ étoile, alors une nouvelle étoile est créée et placée aléatoirement dans .space. Ajoutez-y les classes CSS ui-comp et star pour vous aider à la placer.
- Lorsque l'usager passe son curseur sur une étoile, alors celle-ci est supprimée.
- Lorsque l'usager clique sur le bouton
+ planète, alors une nouvelle planète est créée et placée aléatoirement dans .space. Ajoutez-y la classe ui-comp pour vous aider à la placer, puis ajoutez-y un background-image aléatoire parmi les 5 images de planète du dossier img.
- Lorsque l'usager clique sur une planète, alors celle-ci est supprimée.
- Lorsque l'usager appuie sur la touche
Escape dans la page Web (le document), alors la page est rafraîchie.
- Si l'on clique sur le soleil, alors après 2 secondes, toutes les étoiles disparaissent (mais les planètes restent).
- Si vous voulez y ajouter un aspect animation, faites en sorte que chaque élément créé peut se promener dans la page Web et est retiré lorsqu'il dépasse les bordures du navigateur.