Etch-a-Sketch
Une sorte “d’écran magique” surtout codé en JavaScript pur.
Lorsque l’utilisateur passe sa souris sur le cadre, il laisse une traînée colorée. À chaque fois qu’il repasse sa souris sur une case colorée, la case s’assombrit de 10% de sa couleur originale jusqu’à devenir entièrement noire. L’utilisateur peut choisir le nombre de cases dans le cadre, ce qui a une influence sur la taille de chaque case, le cadre lui-même gardant sa dimension originale.
Ce projet est principalement JavaScript. Une div conteneur est d’abord créée, puis divisée en 16*16 cases (par défaut) de même taille arrangées en grid. Un Event Listener est placé sur chaque case, activé lorsque le curseur passe dessus. Suivant l’état actuel de la case, quatre cas de figure différents peuvent se produire. Soit :
- la case n’a jamais été activée, auquel cas une couleur lui est attribuée aléatoirement en générant 6 caractères hexadécimaux et en insérant dans l’élément un style de background-color avec le string obtenu,
- la case a été activée une seule fois (background-color détecté), auquel cas chaque valeur du RGB est extraite du background-color précédemment généré, puis enregistrée comme data-attribute sur la case en question (respectivement en tant que data-red, data-green et data-blue) afin de pouvoir conserver la couleur originale pour toute action future d’assombrissement. Ensuite, le background est assombri une première fois de 10% en divisant chacune de ces valeurs par 10 et en retirant les résultats des valeurs RGB actuelles, et un data-darkenings est initié sur l’élément avec une valeur de 1 afin de tenir un compte des assombrissements,
- la case a déjà été assombrie, mais pas plus de neuf fois (background-color et data-red détectés), auquel cas les data-attributes de couleurs RGB sont directement récupérés pour assombrir une nouvelle fois le style actuel de 10% de la couleur originale, et data-darkenings est incrémenté de 1,
- la case a déjà été assombrie 9 fois (data-darkenings >= 9), auquel cas les valeurs RGB de la case sont définies à 0 et l’Event Listener est désactivé.
Quant aux boutons “Reset” et “Resize”, le premier efface les styles de toutes les cases, et le deuxième génère de nouvelles cases selon le nombre donné par l’utilisateur et modifie la feuille de style CSS afin de rendre une grid adaptée au nouveau nombre.