Calculadora simplificada de desarrollo web
Aquí, tienes que hacer uso de la etiqueta de entrada con el tipo botón y un evento de clic. El cuadro de texto para mostrar los dígitos y el valor de salida recibe el id “resultado”. Este id se utiliza en funciones como clearScreen(), Display() y Solve(). Estas funciones actúan como su nombre indica. Se proporciona la definición de la función en el archivo .js.
Toda la entrada dada por el usuario debe ser aceptada y procesada para proporcionar la salida necesaria. Como se ha mencionado, se están realizando tres acciones diferentes, mostrar los valores, resolver las expresiones y borrar el cuadro de texto. Este es el código que hay que escribir en el archivo calc.js
El método solve() es llamado cuando el usuario hace clic en el operador ‘=’. La variable x acepta la expresión matemática proporcionada por el usuario. Esta expresión se evalúa y se almacena en la variable y. El resultado se muestra en el cuadro de texto.
Calculadora codepen
Después de pensarlo un rato me di cuenta de que en realidad hay bastantes proyectos que se establecen, quizás con la intención de poner al alumno en el camino de hacer cosas como buscar algoritmos y cosas así, que en realidad nunca se completan de forma satisfactoria.
Los mayores escollos en estos proyectos iniciales suelen ser los que implican trabajar con fechas y zonas horarias, o utilizar cosas como el operador módulo para decidir cuándo deben producirse las acciones en los bucles.
Por lo general, el alumno se propone hacer algo como poner dos campos de entrada en una página en la que se espera que el usuario introduzca dos números, y luego se proporciona un desplegable para elegir la operación que desea realizar, normalmente +, -, * y /.
No espero que un completo principiante entienda este post, pero para aquellos que lleven al menos unos meses programando espero que sirva como una simple introducción sobre la utilidad de los algoritmos existentes y cómo construir una calculadora que funcione.
Una vez que la calculadora ha sido construida, debería ser trivial añadir más funcionalidad, por ejemplo, podrías añadir cosas como las funciones trigonométricas cos, tan y sin junto con sus contrapartes ‘arco’ inversas, atan, acos y asin.
Calculadora de Javascript
Para empezar, hay que tener en cuenta las funcionalidades básicas de una calculadora. Incluyen la suma, la resta, la multiplicación, la división, el borrado, el borrado total y, por supuesto, la capacidad de utilizar números decimales al realizar estas operaciones.
El código HTML anterior contiene varias clases div. La clase output representa la pantalla de la calculadora. La clase previous-operand representa el resultado de la operación anterior en la calculadora, mientras que la clase current-operand representa la operación actual en la calculadora.
En este punto, puedes notar que la cuadrícula de la calculadora no está dispuesta verticalmente. Podemos arreglar esto estableciendo la altura mínima a 100vh. Esto significa que la cuadrícula de la calculadora llenará el 100% de la altura todo el tiempo.
Otra cosa es que los botones deben estar alineados en el centro de la pantalla y espaciados. Para hacer una calculadora normal, tenemos que usar grid-template-columns y luego configurarlo para que se repita, y cada columna podría tener 100px de ancho. También podemos hacer lo mismo para el grid-template-rows.
Calculadora html, css código javascript
Este es el estilo que puedes añadir a tu calculadora. Si lo prefieres de otra manera, no dudes en sugerir algunas ideas.En primer lugar, selecciona todos los elementos, incluyendo su antes y después, establece la propiedad box-sizing como border-box, y establece la familia de la fuente y el font-weight según tu deseo.*, *::before, *::after{
En el siguiente paso, daremos estilo al div “calculator-grid”. Encierra todos los elementos y botones de la calculadora. Al principio, centraremos la calculadora en el centro de la pantalla estableciendo la propiedad position como absoluta, top como 50%, left como 50%, y la propiedad transform como translate(-50%,-50%). Ahora estableceremos la propiedad display como grid, justify-content como center, y align-center como center, para centrar los contenidos de la calculadora y organizarlos en una rejilla.Los botones serán formateados en la rejilla estableciendo la grid-template-columns como repeat(4, 100px) y grid-template-rows como minmax(120px, auto) repeat(5, 100px). El minmax(120px, auto) es para la pantalla de salida para que crezca tanto como sea necesario para que se acomode a los números grandes.#calculator-grid{
