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  Diseño de la interfaz de usuario  Manejo de la entrada del usuario  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>  Vista previa de la calculadora HTML simple  Puede ver y usar la calculadora HTML del artículo original publicado en InfoTechSite.   Haga clic aquí para ver la calculadora HTML.   También publicado  aquí

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Get free Tech Tutorials Now!

Read My Stories

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Telegram: el puente de Crypto Island hacia el continente

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Telegram: el puente de Crypto Island hacia el continente

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps