Programando la Aplicación de calculadora de iOS en 10 minutos
1 min
Programación de la calculadora de Apple que podemos encontrar en los iPhone escrita en HTML, CSS y JavaScript. El resultado y el código que he usado lo podéis encontrar en CodePen:
La mayor complicación puede estar en copiar exactamente el diseño de la calculadora de iOS, es decir, en la implementación del CSS. La estructura es bastante sencilla, se trata de una tabla de 6 filas donde vamos colocando los elementos por columnas (tanto los botones como el display).
En cuando a la lógica de la aplicación, he diseñado 6 funciones que controlan el funcionamiento de toda la calculadora:
- Limpiar. Si hay algo en el display y si no, elimina el contenido del valor temporal y de la operación.
- Añadir número. Añade al display un número pasado por parámetro.
- Operación. Añade a la variable operación el operador pasado por parámetro y limpiamos el display para poder introducir el segundo parámetro.
- Resolver. Resuelve la operación teniendo en cuenta el operador, el valor guardado en temporal y el valor del input.
- Inverso. Multiplica por -1 el valor del display.
- Porcentaje. Divide entre 100 el valor del display.
El valor de temporal almacena el número que se ha escrito en el display justo antes de pulsar un símbolo de operación. El valor de operacion almacena el último operador que hemos seleccionado para ejecutar la evaluación de la expresión cuando pulsemos el botón "=".
Aun así, hay muchas cosas a mejorar en este código como por ejemplo:
- Poder hacer varias operaciones seguidas sin tener que pulsar el igual entre operación y operación.
- Hacer que no se pueda colocar más de punto en una sentencia.