Calculadora simple javascript
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 Freecodecamp
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{
Código fuente de la calculadora Javascript
Tanto si estás aprendiendo un nuevo lenguaje de programación como un marco de desarrollo, llega un momento en el que tienes que trabajar en proyectos del mundo real. A medida que avanzas en la materia, debes poner a prueba tus habilidades y tu comprensión del lenguaje. Construir un proyecto utilizando la tecnología o el marco de trabajo recién aprendido es una buena idea. Hay muchas ideas disponibles en Internet sobre lo que deberías crear con tus conocimientos.
Mientras que el CSS en línea es excelente cuando se trata de diseñar y estilizar la apariencia de tu aplicación, puede no ser amigable con el SEO. Aparte de esto, también puedes utilizar elementos CSS externos etiquetándolos en el mismo directorio raíz. Incluso puedes usar elementos CSS internos o incrustados que están presentes dentro de las etiquetas <style></style> dentro de la sección head.
En primer lugar, vamos a convertir los botones en círculos. Para ello, debes asegurarte de que tienen la misma anchura y altura. No se puede utilizar el relleno porque cada carácter y número tiene una ligera diferencia de tamaño; por lo tanto, pueden crear algunas contradicciones.
Función de calculadora javascript
Aquí, usted tiene que hacer uso de la etiqueta de entrada con el botón de tipo 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.