Calculator
Une calculatrice faite presque entièrement en CSS et JavaScript.
La calculatrice est reproduite dans le style d’une CASIO FX-92. Les opérations de base sont là, et il y a même une petite fonction pour changer les couleurs de la calculatrice de manière aléatoire. Il s’agissait surtout d’un exercice de style CSS, de capture d’events, et de logique JavaScript.
Le corps de la calculatrice elle-même, ainsi que son écran et ses boutons, ont au moins un élément HTML associé. L’écran est divisé en deux éléments, un en haut pour afficher l’opération en cours, et un en bas pour afficher le dernier résultat obtenu, comme sur les calculatrices normales. Le tout est ensuite assemblé avec un peu plus d’une centaine de lignes de CSS pour obtenir le look final.
Quant au JavaScript, il détecte à la fois si un clic a lieu sur l’un des boutons de la calculatrice, ou si une touche appropriée du clavier est pressée. Le plus dur a probablement été de faire tenir les données affichées dans l’écran de la calculatrice, ainsi que de coder la logique de l’affichage des opérations, en particulier de différents types d’opérations successives. Ce qu’il se passe au niveau des précédents inputs lorsqu’on entre un opérateur après avoir entré un chiffre, ou deux chiffres, ou plus de deux chiffres, ou aucun chiffre, lorsqu’on appuie sur la touche EXE… Ce genre de choses.
Afin de ne pas rencontrer de problèmes d’affichage, toutes les dimensions sont absolues, plus précisément en cm. Je voulais d’abord afficher les opérations sur écran avec une police d’écriture digitale plus représentative de ce qu’une vraie calculatrice afficherait, mais je ne suis pas parvenu à en trouver une qui corresponde parfaitement à mes besoins. Lorsqu’une touche du clavier est pressée, elle peut parfois effectuer une action de navigateur en plus d’être détectée par mon JavaScript, ce qui peut causer des problèmes : sous Firefox, par exemple, la touche “/” ouvre le champ Quick-find, qui capture le focus de la fenêtre et empêche momentanément les touches suivantes d’être détectées. En relisant mon code, je me suis aussi rendu compte qu’il y a probablement moyen de faire beaucoup plus DRY.