hice también una calculadora básica también
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variables</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
* {
font-family: Arial, Helvetica, sans-serif;
margin: 5px;
padding: 5px;
text-align: center;
width: fit-content;
}
</style>
</head>
<body>
<div class="calcula">
<h1>Calculadora básica:</h1>
<label for="num1">Número 1:</label>
<input id="num1" type="number" placeholder="Ingrese el número.">
<button class="quitar">Repetir</button><br>
<label for="num2">Número 2:</label>
<input id="num2" type="number" placeholder="Ingrese el número."><br>
<h3>El resultado de la<span class="operador"></span>es:<span class="respuesta"></span></h3>
<br>
<button class="sumar">Sumar</button>
<button class="restar">Restar</button>
<button class="multiplicar">Multiplicar</button>
<button class="dividir">Dividir</button><br>
</div>
<script>
let operador = ["suma", "resta", "multiplicación", "división"]
let sumar = $(".sumar");
let restar = $(".restar");
let multiplicar = $(".multiplicar");
let dividir = $(".dividir");
$("h3").hide();
$(".quitar").click(function () {
$("h3, .resultado").hide();
})
sumar.click(function () {
let num1 = parseInt($("#num1").val());
let num2 = parseInt($("#num2").val());
let respuesta = num1 + num2
$(".operador").text(operador[0]);
$("h3").show();
if (isNaN(respuesta)) {
$(".respuesta").text("Por favor, ingrese un número válido en las casillas requeridas.");
return;
}
$(".respuesta").text(respuesta);
})
restar.click(function () {
let num1 = parseInt($("#num1").val());
let num2 = parseInt($("#num2").val());
let respuesta = num1 - num2
$(".operador").text(operador[1]);
$("h3").show();
if (isNaN(respuesta)) {
$(".respuesta").text("Por favor, ingrese un número válido en las casillas requeridas.");
return;
}
$(".respuesta").text(respuesta);
})
multiplicar.click(function () {
let num1 = parseInt($("#num1").val());
let num2 = parseInt($("#num2").val());
let respuesta = num1 * num2
$(".operador").text(operador[2]);
$("h3").show();
if (isNaN(respuesta)) {
$(".respuesta").text("Por favor, ingrese un número válido en las casillas requeridas.");
return;
}
$(".respuesta").text(respuesta);
})
dividir.click(function () {
let num1 = parseInt($("#num1").val());
let num2 = parseInt($("#num2").val());
let respuesta = num1 / num2
$(".operador").text(operador[3]);
$("h3").show();
if (isNaN(respuesta)) {
$(".respuesta").text("Por favor, ingrese un número válido en las casillas requeridas.");
return;
}
$(".respuesta").text(respuesta);
})
</script>
</body>
</html>
