## Tâche
Création d'une carte interactive dont l'apparence peut être modifiée selon les actions de l'utilisateur. L'utilisateur peut changer la couleur d'arrière-plan de la carte, redimensionner celle-ci et activer ou désactiver un état « mis en surbrillance » pour un style supplémentaire.
1. **Modifier les styles en ligne** : Lorsqu'un bouton est cliqué :
   - Modifier la couleur d'arrière-plan du `<div>` avec l'ID `card` en `"lightblue"` ;
   - Définir la largeur de la carte à `"300px"` ;
   - Ajouter une bordure de `2px solid #333` autour de la carte.
2. **Basculer une classe de surbrillance** : Lorsqu'un bouton est cliqué :
   - Ajouter ou retirer la classe `highlight` sur le `<div>` avec l'ID `card`.
3. **Ajouter une classe de thème sombre** : Lorsqu'un bouton est cliqué :
   - Ajouter ou retirer la classe `dark-theme` sur le `<body>`, ce qui doit changer le thème de la page.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0iY2FyZCI+CiAgICAgIDxoMj5JbnRlcmFjdGl2ZSBDYXJkPC9oMj4KICAgICAgPHA+VGhpcyBjYXJkIGNoYW5nZXMgaXRzIHN0eWxlIGR5bmFtaWNhbGx5ITwvcD4KICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0iYnV0dG9uLWNvbnRhaW5lciI+CiAgICAgIDxidXR0b24gaWQ9ImNoYW5nZS1zdHlsZS1idG4iPkNoYW5nZSBTdHlsZTwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlkPSJ0b2dnbGUtaGlnaGxpZ2h0LWJ0biI+VG9nZ2xlIEhpZ2hsaWdodDwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlkPSJ0b2dnbGUtdGhlbWUtYnRuIj5Ub2dnbGUgVGhlbWU8L2J1dHRvbj4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Ym9keSB7CiAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmN2Y5ZmM7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlOwp9CgpoMiB7CiAgY29sb3I6ICMzMzM7CiAgZm9udC1zaXplOiAxLjVyZW07Cn0KCnAgewogIGNvbG9yOiAjNjY2OwogIGZvbnQtc2l6ZTogMXJlbTsKfQoKI2NhcmQgewogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7CiAgbWF4LXdpZHRoOiA0MjBweDsKICBtYXJnaW46IDIwcHggYXV0bzsKICBib3JkZXI6IDFweCBzb2xpZCAjZGRkOwp9CgouYnV0dG9uLWNvbnRhaW5lciB7CiAgZGlzcGxheTogZmxleDsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMHB4IDE1cHg7CiAgZm9udC1zaXplOiAxcmVtOwogIG1hcmdpbjogNXB4OwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA0cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGNvbG9yOiAjZmZmOwogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7Cn0KCmJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzAwNTZiMzsKfQoKI2NoYW5nZS1zdHlsZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMxN2EyYjg7Cn0KCiNjaGFuZ2Utc3R5bGUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTM4NDk2Owp9CgojdG9nZ2xlLWhpZ2hsaWdodC1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICNmZmMxMDc7CiAgY29sb3I6ICMzMzM7Cn0KCiN0b2dnbGUtaGlnaGxpZ2h0LWJ0bjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UwYTgwMDsKfQoKI3RvZ2dsZS10aGVtZS1idG4gewogIGJhY2tncm91bmQtY29sb3I6ICMyOGE3NDU7Cn0KCiN0b2dnbGUtdGhlbWUtYnRuOmhvdmVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjE4ODM4Owp9CgouaGlnaGxpZ2h0IHsKICBib3gtc2hhZG93OiAwcHggMHB4IDE1cHggcmdiYSgyNTUsIDE2NSwgMCwgMC44KTsKICBib3JkZXItY29sb3I6ICNmZmE1MDA7Cn0KCi5kYXJrLXRoZW1lIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMzMzOwogIGNvbG9yOiB3aGl0ZTsKfQ==

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuX19fX18gPSAnbGlnaHRibHVlJzsKICBjYXJkLl9fX19fLl9fX19fID0gX19fX187CiAgY2FyZC5fX19fXy5fX19fXyA9IF9fX19fOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0Ll9fX19fKCdoaWdobGlnaHQnKTsKfSk7CgovLyBUb2dnbGUgdGhlIGRhcmsgdGhlbWUgY2xhc3Mgb24gdGhlIGJvZHkKY29uc3QgdG9nZ2xlVGhlbWVCdG4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndG9nZ2xlLXRoZW1lLWJ0bicpOwoKdG9nZ2xlVGhlbWVCdG4uYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgZG9jdW1lbnQuYm9keS5fX19fXy5fX19fXyhfX19fXyk7Cn0pOw==

- Utiliser `style.backgroundColor` pour changer la couleur d'arrière-plan du `<div>` avec l'ID `card` en `"lightblue"` ;
- Utiliser `style.width` pour définir la largeur de la carte à `"300px"` ;
- Utiliser `style.border` pour ajouter une bordure de `2px solid #333` autour de la carte ;
- Utiliser `classList.toggle()` pour ajouter ou retirer la classe `highlight` sur le `<div>` avec l'ID `card` ;
- Utiliser `classList.toggle()` pour ajouter ou retirer la classe `dark-theme` sur le `<body>`, ce qui doit changer le thème de la page.

Ly8gQ2hhbmdlIGlubGluZSBzdHlsZXMgb2YgdGhlIGNhcmQKY29uc3QgY2FyZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYXJkJyk7CmNvbnN0IGNoYW5nZVN0eWxlQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NoYW5nZS1zdHlsZS1idG4nKTsKCmNoYW5nZVN0eWxlQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gJ2xpZ2h0Ymx1ZSc7CiAgY2FyZC5zdHlsZS53aWR0aCA9ICczMDBweCc7CiAgY2FyZC5zdHlsZS5ib3JkZXIgPSAnMnB4IHNvbGlkICMzMzMnOwp9KTsKCi8vIFRvZ2dsZSB0aGUgaGlnaGxpZ2h0IGNsYXNzCmNvbnN0IHRvZ2dsZUhpZ2hsaWdodEJ0biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0b2dnbGUtaGlnaGxpZ2h0LWJ0bicpOwoKdG9nZ2xlSGlnaGxpZ2h0QnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGNhcmQuY2xhc3NMaXN0LnRvZ2dsZSgnaGlnaGxpZ2h0Jyk7Cn0pOwoKLy8gVG9nZ2xlIHRoZSBkYXJrIHRoZW1lIGNsYXNzIG9uIHRoZSBib2R5CmNvbnN0IHRvZ2dsZVRoZW1lQnRuID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RvZ2dsZS10aGVtZS1idG4nKTsKCnRvZ2dsZVRoZW1lQnRuLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogIGRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LnRvZ2dsZSgnZGFyay10aGVtZScpOwp9KTs=

Maîtrisez les concepts essentiels de JavaScript, notamment les classes, la manipulation du DOM, la gestion des événements et la programmation asynchrone. Acquérez la capacité de créer des applications web dynamiques et interactives en gérant les interactions utilisateur, en récupérant et affichant des données, et en traitant efficacement les opérations asynchrones. Grâce à un équilibre entre théorie, exercices pratiques et exemples concrets, ce cours vous dote des compétences pratiques nécessaires au développement web moderne.

Apprenez les fondamentaux des classes JavaScript, des déclarations de classes à la définition de méthodes qui améliorent la fonctionnalité. Découvrez comment utiliser efficacement les objets de paramètres, gérer les propriétés privées et contrôler l'accès avec les accesseurs et mutateurs. Maîtrisez les propriétés et méthodes statiques et exploitez la puissance de l'héritage de classes à l'aide de "extends" et "super()" pour créer un code évolutif et réutilisable.

Maîtrise de la manipulation du DOM pour créer des applications web dynamiques et interactives. Navigation et modification de la structure du DOM, mise à jour dynamique du contenu, mise en œuvre des meilleures pratiques en matière de sécurité et de performance. Différenciation entre propriétés et attributs pour optimiser le code.

Débloquez l'interactivité de vos applications web en maîtrisant les événements JavaScript. Comprenez la propagation des événements, contrôlez le comportement des événements et mettez en œuvre une gestion efficace des événements pour les interactions utilisateur. Optimisez les performances grâce à des techniques avancées telles que la délégation d'événements.

Approfondissement du JavaScript asynchrone, y compris les callbacks, les Promesses et async/await. Acquisition des compétences pour récupérer des données depuis des API, intégrer des bibliothèques tierces et gérer efficacement plusieurs requêtes, afin de développer des applications orientées données.

Défi : Appliquer des Styles Dynamiques aux Éléments du DOM

Tâche

Awesome!

Défi : Appliquer des Styles Dynamiques aux Éléments du DOM

Tâche