Calculadora con javascript html y css desde cero

calculadora simple de javascript

Etiquetas: Las etiquetas son las etiquetas básicas que definen y separan las partes de su marcado en elementos. Se componen de una palabra clave rodeada de paréntesis angulares <>. El contenido va entre dos etiquetas y la que cierra va precedida de una barra (Nota: hay algunas etiquetas HTML que se cierran solas, como las etiquetas de imagen).

Lo primero que va en nuestro cuerpo HTML es el elemento de formulario <form> </form>. Una vez creado, hay que añadir a la etiqueta de apertura del formulario un atributo titulado «nombre», con el valor, calculadora.

Las tablas HTML permiten a los diseñadores web organizar datos como texto, imágenes, enlaces, otras tablas, etc. en filas y columnas de celdas. Se crean utilizando la etiqueta <table> en la que la etiqueta <tr> se utiliza para crear las filas de la tabla y <td> se utiliza para crear celdas de datos.

Dentro de la etiqueta <table>, necesitamos definir las filas de la tabla <tr> que básicamente va a ser la sección horizontal de la calculadora y los datos de la tabla <td> (celda de la columna de la tabla) que va a contener la pantalla de la calculadora y los botones.

Un elemento de entrada es un elemento de formulario, el más importante de todos. El elemento input puede mostrarse de varias maneras, dependiendo del atributo type. Si estás siguiendo de cerca, apuesto a que te estás preguntando por qué nuestro atributo type = «» se establece en texto y no en número.

ejemplo de calculadora en node js

La estructura de la calculadora se crea utilizando la etiqueta <table>.  La etiqueta <table> contiene cinco filas que representan cinco secciones horizontales de la calculadora. Cada fila se crea utilizando la etiqueta <tr>. Cada etiqueta <tr> contiene etiquetas <td> (datos de la tabla) que contienen la pantalla y los botones de la calculadora.

Si quieres echar un vistazo al código fuente completo utilizado en este artículo, aquí tienes el repositorio de GitHub. Además, si quieres echar un vistazo a la versión en vivo de este proyecto, puedes consultarlo a través de GitHub también.

Puedes elevar tus habilidades de ingeniería al siguiente nivel desarrollando proyectos.  Tanto si eres un principiante como si estás volviendo a la codificación después de un tiempo de descanso, el desarrollo de proyectos puede ser una gran ayuda para aumentar tu confianza.

Puedes probar muchos proyectos sencillos como un juego de ajedrez, una aplicación de lista de tareas, una herramienta de conversión de peso, un juego de tres en raya, un juego de piedra, papel y tijera, un raspador web con Python, un sistema de inicio de sesión, un chatbot, un juego de serpiente, un juego de tetris, una calculadora de propinas, un reloj de cuenta atrás, un acortador de URL, etc.

calculadora html5

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 utilizar elementos CSS internos o incrustados que están presentes dentro de las etiquetas <style></style> dentro de la sección head.

Si estás interesado en aprender más sobre Java, el desarrollo de software de pila completa, echa un vistazo a upGrad y IIIT-B’s Executive PG Programme in Software Development – Specialisation in Full Stack Development, que está diseñado para los profesionales que trabajan y ofrece más de 500 horas de formación rigurosa, más de 9 proyectos y tareas, el estado de IIIT-B Alumni, proyectos prácticos de culminación y asistencia de trabajo con las principales empresas.

calculadora script html

Cada botón creado tiene sus propios manejadores de eventos y funciones. Cada vez que se hace clic en un botón de número, imprime el número indicado en el botón en el cuadro de texto que es la pantalla. Luego, cuando se hace clic en una operación aritmética después de haber introducido un valor, almacena el valor en el cuadro de texto para que sea el primer número y restablece el valor en el cuadro de texto a cero. Después de introducir el segundo número que se calculará junto con el primer número y hacer clic en el botón igual a, el igual al botón almacenará el valor en el cuadro de texto como el segundo número, y luego comprobará la aritmética que se ha hecho clic. Una vez que se comprueba la operación aritmética que has pulsado, sumará o restará o multiplicará o dividirá el primer número y el segundo dependiendo de la operación aritmética que hayas pulsado y luego imprimirá el resultado en el cuadro de texto.