En este tutorial, vamos a construir una calculadora de propina interactiva que permitirá a los usuarios ingresar el monto de su factura y la cantidad de propina que desean dejar. A medida que los usuarios ingresen estos valores, la calculadora mostrará automáticamente el monto total a pagar, lo que puede ser útil en situaciones como salir a comer en un restaurante.
Aquí tienes el paso a paso:
Paso 1: Preparación Antes de comenzar, asegúrate de tener un editor de código instalado, como Visual Studio Code, y un navegador web para probar tu proyecto.
Paso 2: Estructura HTML
Comencemos creando la estructura HTML básica para nuestra calculadora de propina. Abre tu editor de código y crea un archivo HTML con el siguiente contenido:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Propina</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<h1>Calculadora de Propina</h1>
<label for="billAmount">Monto de la factura:</label>
<input type="number" id="billAmount" placeholder="Ingrese el monto de la factura">
<label for="tipPercentage">Porcentaje de propina:</label>
<input type="number" id="tipPercentage" placeholder="Ingrese el porcentaje de propina">
<button id="calculate">Calcular</button>
<p>Total a pagar con propina: <span id="totalAmount"></span></p>
</div>
<script src="script.js"></script>
</body>
</html>
Paso 3: Estilos CSS (styles.css)
Crea un archivo CSS llamado styles.css en la misma carpeta que tu archivo HTML y agrega algunos estilos básicos para mejorar la apariencia de la calculadora:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.calculator {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
input, button {
margin: 10px;
padding: 5px;
font-size: 16px;
}
button {
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Paso 4: Lógica JavaScript (script.js)
Crea un archivo JavaScript llamado script.js en la misma carpeta que tu archivo HTML y agrega el siguiente código:
document.addEventListener("DOMContentLoaded", function() {
const billAmountInput = document.getElementById("billAmount");
const tipPercentageInput = document.getElementById("tipPercentage");
const calculateButton = document.getElementById("calculate");
const totalAmountSpan = document.getElementById("totalAmount");
calculateButton.addEventListener("click", function() {
const billAmount = parseFloat(billAmountInput.value);
const tipPercentage = parseFloat(tipPercentageInput.value);
if (!isNaN(billAmount) && !isNaN(tipPercentage)) {
const tipAmount = (billAmount * (tipPercentage / 100)).toFixed(2);
const totalAmount = (billAmount + parseFloat(tipAmount)).toFixed(2);
totalAmountSpan.textContent = `$${totalAmount}`;
} else {
totalAmountSpan.textContent = "Ingrese valores válidos";
}
});
});
Este código JavaScript se encarga de realizar los cálculos cuando se hace clic en el botón «Calcular». Toma el monto de la factura y el porcentaje de propina ingresados por el usuario, calcula la propina y muestra el total a pagar en la página.
Paso 5: Prueba
Guarda todos los archivos y ábrelos en tu navegador web. Deberías ver la calculadora de propina en acción. Ingresa el monto de la factura y el porcentaje de propina que desees, luego haz clic en «Calcular» para ver el resultado.
Este tutorial te permite crear una calculadora de propina interactiva utilizando HTML, CSS y JavaScript. Puedes personalizarla y agregar más características según tus necesidades y conocimientos.
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.