Calculadora de Propina Interactiva con HTML y JavaScript

por
Tiempo de lectura: 2 minutos

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.

Post Views: 21

Deja un comentario