1. Introducción: En este tutorial, vamos a aprender a crear una calculadora simple utilizando JavaScript. Esta calculadora tomará dos números y realizará operaciones básicas como suma, resta, multiplicación y división.
2. Estructura HTML: Primero, necesitamos crear la estructura HTML para nuestra calculadora. Creamos un formulario que contiene dos campos de entrada de texto para los dos números, cuatro botones de operación y un botón de “Calcular”.
<html>
<head>
<title>Calculadoratitle>
<styletype="text/css">
input[type=text], button {
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 5px;
width: 150px;
box-shadow: 2px2px5px#ccc;
}
button {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
style>
head>
<body>
<form>
<inputtype="text"id="num1"placeholder="Primer número">
<inputtype="text"id="num2"placeholder="Segundo número">
<br>
<buttontype="button"onclick="sumar()">Sumarbutton>
<buttontype="button"onclick="restar()">Restarbutton>
<buttontype="button"onclick="multiplicar()">Multiplicarbutton>
<buttontype="button"onclick="dividir()">Dividirbutton>
<br>
<buttontype="button"onclick="calcular()">Calcularbutton>
form>
<p>Resultado:p>
<inputtype="text"id="resultado"disabled>
<scripttype="text/javascript"src="script.js">script>
body>
html>
3. Funciones JavaScript: Ahora necesitamos crear algunas funciones JavaScript que se encarguen de realizar las operaciones matemáticas. Creamos cuatro funciones para cada una de las operaciones: suma, resta, multiplicación y división. Cada función toma los dos números como parámetros y devuelve el resultado de la operación.
4. Eventos de clic: Luego, necesitamos agregar eventos de clic a los botones de operación y al botón “Calcular”. Cuando se hace clic en un botón de operación, llamamos a la función correspondiente para realizar la operación y mostramos el resultado en un elemento de texto. Cuando se hace clic en el botón “Calcular”, llamamos a todas las funciones y mostramos los resultados en los elementos de texto correspondientes.
functionsumar() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var resultado = num1 + num2;
document.getElementById("resultado").value = resultado;
}
functionrestar() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var resultado = num1 - num2;
document.getElementById("resultado").value = resultado;
}
functionmultiplicar() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var resultado = num1 * num2;
document.getElementById("resultado").value = resultado;
}
functiondividir() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var resultado = num1 / num2;
document.getElementById("resultado").value = resultado;
}
functioncalcular() {
sumar();
restar();
multiplicar();
dividir();
}
5. Estilos CSS: Finalmente, necesitamos agregar algunos estilos CSS para que nuestra calculadora se vea bien. Podemos agregar un estilo de borde y un estilo de fuente para los campos de entrada de texto y los botones.
Conclusión: Ahora hemos creado una calculadora simple utilizando JavaScript. Con este tutorial, hemos aprendido cómo crear estructuras HTML, funciones JavaScript y eventos de clic para interactuar con los elementos de la página y mostrar los resultados de las operaciones matemáticas. ¡Espero que te haya resultado útil este tutorial!
