Calculatrice

Dans cet exercice vous devez reproduire le fonctionnement d'une calculatrice. Vous allez permettre uniquement les additions et les soustractions mais libre à vous d'y aller avec les multiplications et les divisions.

Pour le style et la mise en page, allez-y à votre goût. Voici mon exemple pour vous inspirer

Quand on clique sur un bouton chiffre ou qu'on appuie sur la touche correspondante, affichez le nombre dans l'écran de résultat. Inspirez-vous du fonctionnement d'une vrai calculatrice. Par exemple si on entre consécutivement 1 et 2, à l'écran nous aurons 12.

Quand on clique sur une touche opération (addition ou soustraction), le nombre à l'écran s'éfface et est stocké en mémoire (dans une variable). Ensuite le second nombre est saisie.

Quand on clique sur la touche =, on effectue l'opération souhaitée et on affiche le résultat.

Quand on clique sur la touche Del, on efface l'affichage et tous les calculs qui pourrait y avoir en mémoire.

Ajoutez une animation quand on clique sur un bouton ou bien qu'on entre une touche du clavier correspondante, effectuez une courte animation pour qu'on a appuyé sur la touche. Vous pouvez vous inspirer de la technique utilisée à l'exercice 16.

Astuce

Dans mon exemple mes boutons on un box shadow dans le bas, c'est ce qui leur donne un effet surélevé. Quand on clique sur un bouton, je fais une transition vers le bas équivalent à la largeur du box-shadow et j'annule celui-ci. Ça donne l'effet qu'on enfonce le bouton.