Mémo
document.getElementById("box").classList.add('banana');
// Ajoute la classe "banana" sur l'élément qui a l'ID "box"
document.getElementById("box").classList.remove('banana');
// Enlève la classe "banana" sur l'élément qui a l'ID "box"
document.getElementById("box").classList.contains('banana');
// Vérifie si la classe banana est sur l'élément qui a l'ID "box". Retourne un booléan
document.getElementById("box").classList.toggle('banana');
// Si la classe "banana" n'est pas sur l'élément, elle est ajoutée, si elle est sur l'élément, elle est retirée
1️⃣ Ajouter et enlever une classe
Lors du clic du bouton, la classe blue est ajoutée à la boîte, et si la classe est déjà ajoutée, le bouton l'enlève.
Selon l'état de la boîte, le bouton doit changer d'intitulé.
2️⃣ Gestion approfondie
2 modes d'affichage : quand l'un est activé, l'autre est désactivé. Un bouton activé doit avoir la classe is-active. Le mode green doit ajouter la classe green sur la boîte, et le mode blue la classe blue.
Qu'un seul mode peut être actif à la fois.
Si l'on clique sur un mode déjà activé, cela le désactive.