2,405 lecturas

La mejor manera de crear una calculadora simple usando HTML y JavaScript

por Shuseel Baral5m2023/08/01

Demasiado Largo; Para Leer

Estos son los pasos para hacer una calculadora simple usando HTML y JavaScript que pueda realizar operaciones aritméticas simples con números enteros.

featured image - La mejor manera de crear una calculadora simple usando HTML y JavaScript

Construir una calculadora simple usando HTML y JavaScript puede ser un trabajo divertido y educativo para los desarrolladores web que recién comienzan.

Al combinar las capacidades de HTML para el diseño de la interfaz de usuario y JavaScript para el manejo de cálculos, puede construir una calculadora interactiva y funcional directamente en su navegador.

En esta publicación, lo guiaremos a través del proceso paso a paso para crear una calculadora básica desde cero mientras exploramos los principios de la programación web en el camino.

Para comenzar, primero debemos crear el entorno del proyecto. Construiremos el marco HTML básico que servirá como base para nuestra calculadora. Además, para hacer que la calculadora sea más atractiva visualmente, configuraremos su apariencia usando CSS.

Finalmente, configuraremos el entorno de JavaScript para agregar funcionalidad a nuestra calculadora.

Tabla de contenido

Pasos para crear una calculadora simple usando HTML y JavaScript
- 1. Diseño de la interfaz de usuario
- 1. Manejo de la entrada del usuario
- 1. Realización del cálculo
Código HTML completo para una calculadora HTML simple
Vista previa de la calculadora HTML simple
Conclusión

Pasos para crear una calculadora simple usando HTML y JavaScript

Estos son los pasos para hacer una calculadora simple usando HTML y JavaScript que pueda realizar operaciones aritméticas simples con números enteros.

Las entradas de texto y botón se usan en una tabla dentro de un elemento de formulario, y el evento OnClick se usó para colocar valores de botón en la pantalla o para evaluar los números.

1. Diseño de la interfaz de usuario

La interfaz de usuario (UI) es la cara frontal de la calculadora. Crearemos una pantalla limpia para mostrar la entrada y los resultados. También proporcionaremos botones interactivos para números enteros y operadores. Nuestro objetivo es producir un diseño intuitivo y fácil de usar que enriquezca todos los aspectos de los usuarios de calculadoras.

Utilice los siguientes pasos para diseñar la interfaz de usuario de la calculadora.

Paso 1. Inicialmente, cree la etiqueta <html> junto con el elemento <form> y la etiqueta <body> como se indica a continuación.

 <html> <head><title>A Simple Calculator Using HTML</title></head> <body> <h3>A Simple Calculator Using HTML</h3> <form Name="calc"> </form> </body> </html>

Paso 2. Ahora, cree una tabla dentro de la etiqueta <form>……</form> usando la etiqueta <table> …..</table> e inserte dos tipos de texto de entrada y botones dentro de los datos de la tabla de la fila de la tabla usando <tr ><td>….</td></tr> etiqueta.

 <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> </table>

Paso 3. Luego, cree botones usando la etiqueta <input>, y también configure la "id" y el "valor" de estos botones dentro de la fila de la tabla que tiene las etiquetas <tr><td>….</td></tr> como mostrado abajo.

 <tr> <td><input id="btn" type=button value="MC"></td> <td><input id="btn" type=button value="0"></td> <td><input id="btn" type=button value="1"></td> <td><input id="btn" type=button value="2"></td> <td><input id="btn" type=button value="+"></td> </tr> <tr> <td><input id="btn" type=button value="MS"></td> <td><input id="btn" type=button value="3"></td> <td><input id="btn" type=button value="4"></td> <td><input id="btn" type=button value="5"></td> <td><input id="btn" type=button value="-"></td> </tr> <tr> <td><input id="btn" type=button value="MR"></td> <td><input id="btn" type=button value="6"></td> <td><input id="btn" type=button value="7"></td> <td><input id="btn" type=button value="8"></td> <td><input id="btn" type=button value="x"></td> </tr> <tr> <td><input id="btn" type=button value="M+"></td> <td><input id="btn" type=button value="9"></td> <td><input id="btn" type=button value="±"></td> <td><input id="btn" type=button value="="></td> <td><input id="btn" type=button value="/"></td> </tr> <tr> <td><input id="btn" type=button value="1/x"></td> <td><input id="btn" type=button value="."></td> <td><input id="btn" type=button value="x2"></td> <td><input id="btn" type=button value="√"></td> <td><input id="btn" type=button value="C"></td> </tr>

Paso 4. Finalmente, agregue el siguiente código CSS para dar el diseño de la calculadora con la etiqueta <style>…..</style> como se indica a continuación.

 <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style>

2. Manejo de la entrada del usuario

Utilice los siguientes pasos para diseñar la interfaz de usuario de la calculadora.

#Paso 1. Asigne un evento "onkeypress" para un botón de visualización que se ha creado para mostrar la entrada y el resultado del cálculo como se indica a continuación.

 <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr>

Paso 2. Asigne un evento OnClick para todos los botones que tengan números y operadores aritméticos como se indica a continuación.

 <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr>

3. Realización del cálculo

Asigne un evento OnClick para todos los operadores aritméticos, proporcione una comilla doble con espacio ("") para el botón Borrar (C) y use la función eval() para evaluar los números en el evento OnClick como se indica a continuación.

 <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr>

Código HTML completo para una calculadora HTML simple

 <html> <head></head> <body> <h3>Simple Calculator</h3> <br/> <style> #calc{width:300px;height:250px;} #btn{width:100%;height:40px;font-size:20px;} </style> <form Name="calc"> <table id="calc" border=2> <tr> <td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td> <td style="display:none"><input name="M" type="number"></td> </tr> <tr> <td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td> <td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td> <td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td> <td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td> <td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td> </tr> <tr> <td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td> <td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td> <td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td> <td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td> <td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td> </tr> <tr> <td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td> <td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td> <td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td> <td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td> <td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td> </tr> <tr> <td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td> <td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td> <td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))"> </td> <td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td> <td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td> </tr> <tr> <td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td> <td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td> <td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td> <td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td> <td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td> </tr> </table> </form> </body> </html>