Si tu as bien installé l'extension VS Code Live Server, tu peux voir apparaître un bouton Go Live en bas à droite de ton interface. Cela te permettra **lancer facilement un **serveur local**** pour afficher des fichiers HTML, CSS et JavaScript dans ton navigateur 😊.
L'objectif de cet atelier est d'ajouter de l'intéractivité à cette page web.
C'est parce que nous souhaitons rendre notre page interactive que nous avons besoin de programmer certains comportements attendus. C'est à cet endroit que JavaScript entre en jeu !
Comme tu peux le constater, deux sections apparaissent. Tu vas donc devoir les rendre fonctionnelles !
Concentre-toi sur la section de gauche. Tu vas devoir trouver le moyen, en cliquant sur le bouton, de changer la couleur d'arrière-plan de cette section !
Indice n° 1
Tu peux déclarer deux variables, pour y stocker et l'élément `button`, et la `section`. Tu peux utiliser la méthode `document.querySelector()` pour parvenir à tes fins.Indice n° 2
Tu vas devoir ajouter un event listener (un écouteur d'événement) sur le bouton, et trouver le moyen pour changer la couleur de fond de la section !Tu es parvenu à réaliser cette exercice ? Créé le code nécessaire pour que le bouton permette d'alterner entre la couleur d'origine (blanc) et la nouvelle couleur (rouge).
Concentre-toi à présent sur la section de droite. Cette fois, ce n'est pas un bouton, mais un sélecteur. Ton objectif est de changer la couleur de fond en fonction de la couleur sélectionnée !