Environnement : Éditeur de texte local (VS Code, Notepad++)
Créer une interface web basique capable de réagir à des données au format JSON. Créez un fichier index.html sur votre ordinateur et collez-y le code ci-dessous. Votre but est de lier l'objet JavaScript à l'interface HTML, puis de la rendre interactive lors du clic sur le bouton.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Supervision Capteur</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; transition: 0.5s; }
.dashboard { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<div class="dashboard">
<h1>Panneau de contrôle</h1>
<p id="affichage">En attente des données...</p>
<button id="btnSurchauffe">Simuler une Surchauffe</button>
</div>
<script>
// Fausse donnée reçue du capteur
const capteur = { "id": 1, "temperature": 28, "etat": "actif" };
// TODO 1 : Sélectionner le paragraphe d'affichage via son ID.
// Modifiez son texte pour qu'il affiche dynamiquement : "Le capteur 1 est à 28°C".
// TODO 2 : Ajouter un écouteur d'événement (click) sur le bouton "btnSurchauffe".
// TODO 3 : Dans cet événement :
// - Modifiez l'objet capteur pour passer sa température à 50.
// - Mettez à jour le texte du paragraphe avec la nouvelle température.
// - Changez la couleur de fond de la page (document.body) en rouge.
</script>
</body>
</html>