Ce repository contient des exercices JavaScript et des exemples de manipulation du DOM pour développer des fonctionnalités spécifiques sur une page HTML.
- Utilisation de
addEventListenerpour détecter le clic. - Quand tu cliques sur le footer, un message avec le décompte s'affiche en console.
Mais dis donc Miki, que fais-tu exactement ?
---> On séléctionne le footer.
---> On initie le compteur de clics.
---> On incrémente à chaque event (click).
---> On affiche le résultat en console (console.log).
- Utilisation de
classList.togglepour le toggle. - Quand tu cliques sur le menu hamburger (les trois lignes), la classe "collapse" est ajoutée ou supprimée de l'élément avec l'ID "navbarHeader".
Mais dis donc Miki, que fait .toggle exactement ?
navHead a la classe ("collapse") ?
---> classe supprimée (= menu caché)
navHead n'a pas la classe ("collapse") ?
---> classe ajoutée (= menu affiché)
- Utilisation de
style.colorpour changer la couleur du texte. - Quand tu cliques sur le bouton edit de la première card, il devient et reste rouge.
Mais dis donc Miki, que fais-tu exactement ?
---> On séléctionne la card et le bouton correspondant avec leurs classes et index respectifs
---> On lie l'event click sur le editBtn à une modification de la couleur du texte sur firstCard
---> Pas de possibilité d'annuler le changement car pas de conditions comme ici bas (if/else)
- Utilisation de
style.coloret une alternance soumise à condition. - Quand tu cliques sur le bouton edit de la deuxième card, il devient vert, si tu recliques, il reprend sa couleur d'origine.
Mais dis donc Miki, que fais-tu exactement ?
---> Même démarche qu'avant avec index[] pour la selection
--> On lie l'event click a une fonction qui va s'executer au click (le changement de couleur)
Mais dis donc Miki, pourquoi un "" vide ?
---> Une fois event click :
---> Verifie si la couleur est "green" ?
---> Si oui, ("") réinitialise la couleur du texte à la couleur par défaut (du CSS ou du browser)
---> Si non, définit la couleur en "green"
- Utilisation de
addEventListeneravecdblclick. - Au double-clic sur la navbar, le lien vers Bootstrap est désactivé ou réactivé.
Mais dis donc Miki, que fais-tu exactement ?
---> Je sélectionne le lien de mon Bootstrap par son attribut
stylesheet.
---> Je sélectionne la zone où je souhaite que l'action s'effectue (le header), et je la stocke dans une variable.
---> On applique l'eventListener sur un doubleclick sur le header.
---> Si bootstraplink existe, alors...
---> Bascule l'état du lien entre activé et désactivé avec bootstrapLink.disabled = !bootstrapLink.disabled;
- Utilisation de
style.transform,style.transition, etstyle.opacityavecmouseoveretmouseout - En passant le curseur de la souris sur le bouton view, la taille des cards et des images diminue (20% pour les cards, 80% pour les images).
- Un effet de transition est appliqué, et le texte des cartes disparaît et réapparaît également.
Mais dis donc Miki, que fais-tu exactement ?
---> Sélectionne tous les boutons avec la classe "btn-success", les stocke dans la variable.
---> Pareil, mais pour les cards.
---> On lance une boucle, avec button et index comme paramètres.
On écoutera l'event (survol du curseur) et selon le mouvement :
card [ élément sélectionné par index]action [ mouseover]Modifications - La carte sera redimensionnée à 80%.
- L'image sera redimensionnée à 20%.
- Une transition d'animation d'une durée de 0.5s sera appliquée.
- L'opacité du texte sera réduite à 0, le rendant invisible.
card [ élément sélectionné par index]action [ mouseout]Annulations - La carte reprendra sa taille d'origine (100%).
- L'image reprendra sa taille d'origine.
- L'opacité du texte sera rétablie à 1, le rendant visible.