República Dominicana

Hogarium Real Estate

hogariumrd.com

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculadora de Cuota Hipotecaria (RD$)</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background-color: #f0f4f8;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }
        .card {
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
            padding: 32px;
            width: 100%;
            max-width: 500px;
        }
        h2 {
            margin-top: 0;
            color: #1e293b;
            text-align: center;
            font-size: 1.6rem;
            margin-bottom: 24px;
            font-weight: 700;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #475569;
            font-size: 0.95rem;
        }
        input, select {
            width: 100%;
            padding: 14px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 1.05rem;
            outline: none;
            transition: all 0.2s ease;
            color: #0f172a;
            background-color: #f8fafc;
        }
        input:focus, select:focus {
            border-color: #2563eb;
            background-color: #ffffff;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        }

        /* Texto explicativo justo debajo del selector de Inicial */
        .monto-inicial-subtext {
            margin-top: 8px;
            font-size: 0.95rem;
            color: #2563eb;
            font-weight: 600;
        }

        /* Destacado Principal: La Cuota */
        .result-box {
            margin: 28px 0;
            padding: 24px;
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
            border-radius: 14px;
            text-align: center;
            color: #ffffff;
            box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
        }
        .result-box span {
            display: block;
            font-size: 0.85rem;
            color: #93c5fd;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .result-box strong {
            display: block;
            font-size: 2.2rem;
            color: #ffffff;
            margin-top: 8px;
            font-weight: 800;
        }

        /* Desglose al final */
        .info-panel {
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 16px 20px;
            margin-top: 20px;
            font-size: 0.9rem;
            color: #64748b;
        }
        .info-panel .info-title {
            font-weight: 700;
            color: #334155;
            margin-bottom: 10px;
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 6px;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .info-panel div {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .info-panel div:last-child {
            margin-bottom: 0;
        }
        .info-panel strong {
            color: #1e293b;
        }
    </style>
</head>
<body>

<div class="card">
    <h2>Calculadora de Hipoteca</h2>

    
    <div class="form-group">
        <label for="precio">Precio de Venta (RD$)</label>
        <input type="number" id="precio" placeholder="Ej: 5000000" min="0" oninput="calcularCuota()">
    </div>

    <div class="form-group">
        <label for="inicialPorcentaje">Porcentaje de Inicial (%)</label>
        <select id="inicialPorcentaje" onchange="calcularCuota()">
            <option value="10">10%</option>
            <option value="20">20%</option>
            <option value="30">30%</option>
            <option value="40">40%</option>
            <option value="50">50%</option>
            <option value="60">60%</option>
            <option value="70">70%</option>
            <option value="80">80%</option>
            <option value="90">90%</option>
            <option value="100">100%</option>
        </select>
        
        
        <div class="monto-inicial-subtext">
            Monto del inicial: <span id="montoInicialDirecto">RD$ 0.00</span>
        </div>
    </div>

    
    <div class="result-box">
        <span>Cuota Mensual Estimada</span>
        <strong id="resultadoCuota">RD$ 0.00</strong>
    </div>

    
    <div class="info-panel">
        <div class="info-title">Detalles del Financiamiento</div>
        <div><span>Monto a Financiar:</span> <strong id="montoPrestamo">RD$ 0.00</strong></div>
        <div><span>Tasa de Interés:</span> <strong>12% anual (1% mensual)</strong></div>
        <div><span>Plazo del Crédito:</span> <strong>240 meses (20 años)</strong></div>
    </div>
</div>

<script>
    function calcularCuota() {
        const precio = parseFloat(document.getElementById('precio').value);
        const porcentajeInicial = parseFloat(document.getElementById('inicialPorcentaje').value) / 100;
        
        const tasaAnual = 0.12;
        const tasaMensual = tasaAnual / 12; // 0.01
        const numMeses = 240;

        if (isNaN(precio) || precio <= 0) {
            document.getElementById('montoInicialDirecto').textContent = 'RD$ 0.00';
            document.getElementById('montoPrestamo').textContent = 'RD$ 0.00';
            document.getElementById('resultadoCuota').textContent = 'RD$ 0.00';
            return;
        }

        const montoInicial = precio * porcentajeInicial;
        const montoPrestamo = precio - montoInicial;

        let cuotaMensual = 0;

        if (montoPrestamo > 0) {
            cuotaMensual = montoPrestamo * (tasaMensual * Math.pow(1 + tasaMensual, numMeses)) / (Math.pow(1 + tasaMensual, numMeses) - 1);
        }

        // Formato para Peso Dominicano (RD$)
        const formatoMoneda = (valor) => {
            return 'RD$ ' + valor.toLocaleString('es-DO', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        };

        // Asignación dinámica
        document.getElementById('montoInicialDirecto').textContent = formatoMoneda(montoInicial);
        document.getElementById('resultadoCuota').textContent = formatoMoneda(cuotaMensual);
        document.getElementById('montoPrestamo').textContent = formatoMoneda(montoPrestamo);
    }
</script>

</body>
</html>