Skip to content

Commit

Permalink
merge main
Browse files Browse the repository at this point in the history
  • Loading branch information
@angelcaz-msft
angelcaz-msft committed Aug 17, 2023
1 parent 76e46d2 commit ab38f47
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 154 deletions.
143 changes: 107 additions & 36 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,118 @@
<!DOCTYPE html>
<html lang="es">
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculadora de Impuestos</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Agrega los enlaces a los estilos de Bootstrap y Font Awesome -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div class="container">
<h1 class="mt-4">Calculadora de Impuestos</h1>
<form id="taxCalculator" class="mt-4">
<div class="form-group">
<label for="houseCost">Costo de la Casa:</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">$</span>
</span>
<input type="number" id="houseCost" class="form-control" step="any" required inputmode="numeric" pattern="[0-9]*" title="Por favor, ingresa solo números">
</div>
</div>
<!-- <div class="form-group">
<label for="notaryFees">Honorarios de la Notaría:</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">$</span>
</span>
<input type="number" id="notaryFees" class="form-control" step="any" required inputmode="numeric" pattern="[0-9]*" title="Por favor, ingresa solo números">
</div>
</div> -->
<button type="submit" class="btn btn-primary">Calcular Impuesto</button>
</form>
<div id="result" class="result mt-4"></div>
<div class="container mt-5">
<h1 class="text-center">Calculadora de Impuestos</h1>
<div class="form-group">
<label for="transferTax">Impuesto sobre Traslado de Dominio:</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">$</span>
</span>
<input type="text" id="transferTax" class="form-control" readonly>
<label for="valorInmueble">Ingrese el valor del inmueble:</label>
<input type="number" id="valorInmueble" class="form-control" inputmode="numeric" pattern="[0-9]*">
</div>
<button class="btn btn-primary btn-block" onclick="calcularImpuesto()">Calcular Impuesto</button>
<p id="resultado" class="text-center mt-3"></p>

<!-- Agrega el panel oculto con los pasos del cálculo -->
<div class="mt-3">
<button class="btn btn-primary btn-block" data-toggle="collapse" data-target="#pasosCalculo">
<i class="fas fa-info-circle"></i> Ver Pasos de Cálculo
</button>
<div id="pasosCalculo" class="collapse mt-3">
<h4 class="text-center">Pasos de Cálculo:</h4>
<div>
<div id="pasoRango"></div>
<table class="table table-bordered">
<thead>
<tr>
<th>NÚMERO DE RANGO</th>
<th>RANGO INFERIOR</th>
<th>RANGO SUPERIOR</th>
<th>CUOTA EN PESOS</th>
<th>CIFRA SOBRE EL EXCEDENTE DEL LÍMITE INFERIOR</th>
</tr>
</thead>
<tbody id="tablaRangos">
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
<script>

function calcularImpuesto() {
const valorInmueble = parseFloat(document.getElementById('valorInmueble').value);
const rangos = [
{ numero: 1, inferior: 0.00, superior: 81611.20, cuota: 0.00, cifra: 0.03999999197 },
{ numero: 2, inferior: 81611.21, superior: 143307.72, cuota: 3264.45, cifra: 0.04476282369 },
{ numero: 3, inferior: 143307.73, superior: 251645.65, cuota: 6026.17, cifra: 0.04705766918 },
{ numero: 4, inferior: 251645.66, superior: 441885.00, cuota: 11124.31, cifra: 0.04947010434 },
{ numero: 5, inferior: 441885.01, superior: 775941.70, cuota: 20535.48, cifra: 0.05200614302 },
{ numero: 6, inferior: 775941.71, superior: 1362538.94, cuota: 37908.49, cifra: 0.05467223225 },
{ numero: 7, inferior: 1362538.95, superior: 2392592.59, cuota: 69979.08, cifra: 0.05747495829 },
{ numero: 8, inferior: 2392592.60, superior: Infinity, cuota: 129181.38, cifra: 0.06042137653 }
];

let rangoSeleccionado = null;
let diferencia = 0;
let diferenciaPorExcedente = 0;
let calculoFinal = 0;

for (const rango of rangos) {
if (valorInmueble >= rango.inferior && valorInmueble <= rango.superior) {
rangoSeleccionado = rango;

diferencia = valorInmueble - rango.inferior;
diferenciaPorExcedente = diferencia * rango.cifra;
calculoFinal = diferenciaPorExcedente + rango.cuota;
break;
}
}

const resultadoElement = document.getElementById('resultado');
resultadoElement.textContent = `Traslado de dominio: $${calculoFinal.toFixed(2)}`;

// Mostrar pasos de cálculo
const pasosLista = document.getElementById('tablaRangos');
pasosLista.innerHTML = rangos.map(rango => {
const selected = rango === rangoSeleccionado ? 'table-info' : '';
return `
<tr class="${selected}">
<td>${rango.numero}</td>
<td>${rango.inferior}</td>
<td>${rango.superior}</td>
<td>${rango.cuota}</td>
<td>${rango.cifra}</td>
</tr>
`;
}).join('');


const resultHtml = `
<p><strong>1. El valor de inmueble cae en el rango de</strong> ${rangoSeleccionado.inferior} a ${rangoSeleccionado.superior}.</p>
<p><strong>2. Diferencia desde el límite inferior del rango:</strong> ${valorInmueble} - ${rangoSeleccionado.inferior} = ${diferencia.toFixed(2)}.</p>
<p><strong>3. Multiplicamos la diferencia por la cifra sobre el excedente del límite inferior:</strong> ${diferencia.toFixed(2)} * ${rangoSeleccionado.cifra} = ${diferenciaPorExcedente.toFixed(2)}</p>
<p><strong>4. Sumamos la cuota en pesos:</strong> ${diferenciaPorExcedente.toFixed(2)} + ${rangoSeleccionado.cuota} = ${calculoFinal.toFixed(2)}</p>
<p>TOTAL del traslado de dominio: $${calculoFinal.toFixed(2)}</p>
`;

document.getElementById('pasoRango').innerHTML = resultHtml;
}


</script>
<!-- Agrega los enlaces a los scripts de Bootstrap y Font Awesome -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

</html>
118 changes: 0 additions & 118 deletions index2.html
View file

This file was deleted.

47 changes: 47 additions & 0 deletions index3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Impuestos</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="mt-4">Calculadora de Impuestos</h1>
<form id="taxCalculator" class="mt-4">
<div class="form-group">
<label for="houseCost">Costo de la Casa:</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">$</span>
</span>
<input type="number" id="houseCost" class="form-control" step="any" required inputmode="numeric" pattern="[0-9]*" title="Por favor, ingresa solo números">
</div>
</div>
<!-- <div class="form-group">
<label for="notaryFees">Honorarios de la Notaría:</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">$</span>
</span>
<input type="number" id="notaryFees" class="form-control" step="any" required inputmode="numeric" pattern="[0-9]*" title="Por favor, ingresa solo números">
</div>
</div> -->
<button type="submit" class="btn btn-primary">Calcular Impuesto</button>
</form>
<div id="result" class="result mt-4"></div>
<div class="form-group">
<label for="transferTax">Impuesto sobre Traslado de Dominio:</label>
<div class="input-group">
<span class="input-group-prepend">
<span class="input-group-text">$</span>
</span>
<input type="text" id="transferTax" class="form-control" readonly>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

0 comments on commit ab38f47

Please sign in to comment.