AddEventListener() - Boussole

Pour cet exercice nous allons animer l’aiguille d’une boussole 🧭 de sorte qu’elle pointe toujours vers le point cardinal sélectionné.

Aperçu du résultat 👇

Matériel

Pen de départ 

Requis

  1. Au clic des boutons correspondant aux points cardinaux, supprimez toutes les classes sur la balise <body> et ajoutez celle correspondant au point cardinal cliqué.

  2. Lorsque la classe d'un des points cardinaux est présente sur le body, faites tourner l'aiguille rouge de la boussole vers ce point en une demi-seconde ⏱.

  3. Ajustez le timming de la transition de sorte que l'aiguille dépasse préalablement sa cible avant d'y revenir.

Notes de cours 📚