2022.09 - version 1.2 - 9e2d5c6a-c2ba-43eb-a7db-176580de04ec

Images

Votre page devra afficher les lampes et leur état : allumé ou éteint, et la couleur. Vous devez donc préparer des images représentant ces lampes, avec les effets de transparence nécessaires. Stylisé, réaliste, lampe, ampoule, rétro, moderne... un dessin personnel... comme il vous plaira.

Canevas html & css

Vous devez préparer une page en html et css, permettant d'afficher donc les lampes et leur état. Vous pouvez utiliser les flexbox introduites pendant le cours, ou si vous vous sentez d'humeur avantureuse, les grid (c'est un autre mode de positionnement d'éléments prévu par html, très puissant mais plus complexe).

Code JavaScript

Un script, sur la base de ce qui a été fourni pour l'exemple, lira l'état des lampes et mettra à jour le contenu de la page avec un délai raisonnable (ne descendez pas en dessous d'une seconde afin de ne pas énerver la borne Hue).

Pour ce faire vous devrez :

Bonus

Pour aller un peu plus loin :