Manipuler le DOM avec les Refs

15 min 1 exercice Niveau 8

1. Changer la couleur d’un élément au clic

  1. Créez un fichier ColorChanger.js.
  2. Ce composant doit inclure :
    • Une boîte <div> avec du texte ("Cliquez-moi !") et un style par défaut (fond blanc).
    • Un bouton "Changer la couleur" qui modifie le fond de la boîte en une couleur aléatoire lorsqu’il est cliqué.
  3. Utilisez une ref pour cibler la boîte et appliquer le style directement via le DOM.

2. Agrandir un élément au clic

  1. Créez un fichier Resizer.js.
  2. Ce composant doit inclure :
    • Une boîte <div> avec un style par défaut (200px par 200px).
    • Deux boutons :
      • "Agrandir" : augmente la taille de la boîte de 50px.
      • "Réinitialiser" : remet la taille à sa valeur initiale.
  3. Utilisez une ref pour manipuler directement les styles de la boîte.

Rendu attendu (après avoir fait les deux exercices)

Rendu attendu des exercices

logo discord

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !

En savoir plus