Exercice 3
Après avoir été rappelé à l'ordre, la créatrice à correctement rempli la page et le css. Par contre, elle n'as pas réussi à mettre en place les evènements; elle ne sait pas faire de js.
Ayant entendu parlé de vous, elle vous délègue cette tache, ayant même pris soin de permettre la modification de ses fichiers pour que ce soit plus facile.
Remarque : Il n'y a normalement pas besoin de modifier index.html et style.css, ils sont modifiables afin que vous puissiez ajouter des interactions et décorations supplémentaires.
- Lorsque la boite "Masquer les paroles" est cochée, masquez tout les paroles et modifiez l'intitulé en "Afficher les paroles"
- Lorsque la boite "Masquer les refrains" est cochée, remplacez tous les refrains sauf le premier par
[Refrain], et modifiez l'intitulé de la boite en "Afficher les refrains"
- Lorsque les refrains sont masqués. Le du survol de
[Refrain]affiche le contenu du refrain :
Conseils
- Si quand les cases sont cochées les éléments sont masquées avec succes, mais rappellez vous qu'il doit aussi être possible de les afficher à nouveau.
- Utilisez
element.addEventListener()ref pour attacher une évènement à un element. - Utilisez l'évènement
clickpour savoir quand la case est cochée.
Pour connaitre l'état de la case (cochée ou non), utiliser l'attributcheckedref. - Utilisez l'évènement
mouseenterref pour savoir quand la souris survole l'element etmouseleaveref pour savoir quand la souris ne le survole plus. - Vous avez du mal à masquer les elements ? La classe
hiddenn'est pas là par hasard. - Notez que
[Refrain]est déjà présent dansindex.html, peut être qu'il est possible de les remplacer seulement de manière visuelle (sans avoir a supprimer du texte).
Lors de l'éxecution, il peux vous afficher une erreur, re-executer à nouveau regle généralement le problème.
Exercice 3
Open Source Your Knowledge: become a Contributor and help others learn. Create New Content