Calculadora de Pagos
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
align-items: stretch;
}
.calculator, .chart-container {
background-color: #fff;
margin: 10px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: calc(100% – 20px);
}
.calculator h2 {
color: #0056b3;
margin-bottom: 20px;
display: none; /* Oculta el título */
}
.calculator label {
display: block;
margin-bottom: 5px;
}
.calculator input {
width: calc(100% – 12px);
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.calculator button {
width: 100%;
padding: 10px;
background-color: #0056b3;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.calculator button:hover {
background-color: #003d82;
}
.chart-container {
position: relative;
padding-bottom: 20px;
height: auto; /* Ajuste de la altura para que sea igual al de la calculadora */
}
canvas {
display: block;
width: 100%;
height: auto; /* Cambiado para adaptarse al contenido */
max-width: 100%;
max-height: 100%; /* Ajuste de la altura */
}
#result {
margin-top: 50px; /* Agrega un margen de 50px hacia arriba */
font-size: 16px;
text-align: center; /* Centra el texto */
}
@media only screen and (min-width: 600px) {
.calculator, .chart-container {
width: calc(50% – 20px);
}
}
// Función para inicializar el gráfico al cargar la página
function initPaymentChart() {
updatePaymentChart([1994, 166, 292, 146, 125]); // Valores iniciales para el gráfico
}
// Función para calcular los impuestos y actualizar el gráfico
function calculatePayments() {
var homeValue = parseFloat(document.getElementById(‘homeValue’).value);
var downPaymentPercentage = parseFloat(document.getElementById(‘downPaymentPercentage’).value);
var mortgageTerm = parseFloat(document.getElementById(‘mortgageTerm’).value);
var interestRate = parseFloat(document.getElementById(‘interestRate’).value);
var propertyTaxes = parseFloat(document.getElementById(‘propertyTaxes’).value);
var insurance = parseFloat(document.getElementById(‘insurance’).value);
var hoaFees = parseFloat(document.getElementById(‘hoaFees’).value);
if (!homeValue || downPaymentPercentage == null || !mortgageTerm || !interestRate || !propertyTaxes || !insurance || !hoaFees) {
document.getElementById(‘result’).innerText = ‘Por favor, completa todos los campos.’;
return;
}
var downPayment = homeValue * (downPaymentPercentage / 100);
var loanAmount = homeValue – downPayment;
var annualPropertyTaxes = homeValue * (propertyTaxes / 100);
var annualInsurance = homeValue * (insurance / 100);
var monthlyInterestRate = interestRate / 100 / 12;
var numberOfPayments = mortgageTerm * 12;
var monthlyMortgagePayment = loanAmount *
(monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfPayments)) /
(Math.pow(1 + monthlyInterestRate, numberOfPayments) – 1);
// Calcular PMI si el pago inicial es menor al 20%
var pmi = downPaymentPercentage < 20 ? homeValue * 0.0057 : 0;
var totalMonthlyPayment = monthlyMortgagePayment +
(annualPropertyTaxes / 12) +
(annualInsurance / 12) +
hoaFees +
(pmi / 12); // Agregar PMI al pago mensual
document.getElementById('result').innerText = 'Pago Mensual Total: $' + totalMonthlyPayment.toFixed(2);
updatePaymentChart([
monthlyMortgagePayment,
annualPropertyTaxes / 12,
annualInsurance / 12,
hoaFees,
pmi / 12 // Agregar PMI al gráfico
]);
}
// Función para actualizar el gráfico
function updatePaymentChart(paymentComponents) {
var ctx = document.getElementById('paymentChart').getContext('2d');
if(window.paymentChart instanceof Chart) {
window.paymentChart.destroy();
}
window.paymentChart = new Chart(ctx, {
type: 'doughnut', // Cambiado a gráfico de anillo delgado
data: {
labels: ['Capital e intereses', 'Impuestos', 'Seguro', 'HOA', 'PMI'],
datasets: [{
label: 'Desglose de los Pagos',
data: paymentComponents,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)' // Color para PMI
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)' // Borde para PMI
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
},
elements: {
arc: {
borderWidth: 0.5 // Hace que el anillo sea más delgado
}
}
}
});
}
window.onload = initPaymentChart;
Calculadora de Impuestos
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
align-items: stretch;
}
.calculator, .chart-container {
background-color: #fff;
margin: 10px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: calc(100% – 20px);
}
.calculator h2 {
color: #0056b3;
margin-bottom: 20px;
display: none; /* Oculta el título */
}
.calculator label {
display: block;
margin-bottom: 5px;
font-size: 14px; /* Reducción del tamaño de las etiquetas de entrada */
}
.calculator input {
width: calc(100% – 16px); /* Reducción del ancho de las casillas de entrada */
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.calculator button {
width: 100%;
padding: 10px;
background-color: #0056b3;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.calculator button:hover {
background-color: #003d82;
}
.chart-container {
position: relative;
padding-bottom: 20px;
height: auto; /* Ajuste de la altura para que sea igual al de la calculadora */
}
canvas {
display: block;
/* Se removió el height y el max-height */
width: 100%;
/* Se añadió el max-height */
max-height: 400px; /* Limita la altura máxima del gráfico */
}
#tax_result {
margin-top: 50px; /* Agrega un margen de 50px hacia arriba */
font-size: 16px;
text-align: center; /* Centra el texto */
}
@media only screen and (min-width: 600px) {
.calculator, .chart-container {
width: calc(50% – 20px);
}
}
// Función para inicializar el gráfico al cargar la página
function tax_initChart() {
tax_updateChart([1649, 365, 292, 125]); // Valores iniciales para el gráfico
}
// Función para calcular los impuestos y actualizar el gráfico
function tax_calculateTaxes() {
var tax_homeValue = parseFloat(document.getElementById(‘tax_homeValue’).value);
var tax_loanAmount = parseFloat(document.getElementById(‘tax_loanAmount’).value);
var tax_mortgageTerm = parseFloat(document.getElementById(‘tax_mortgageTerm’).value);
var tax_interestRate = parseFloat(document.getElementById(‘tax_interestRate’).value);
var tax_propertyTaxes = parseFloat(document.getElementById(‘tax_propertyTaxes’).value);
var tax_insurance = parseFloat(document.getElementById(‘tax_insurance’).value);
var tax_hoaFees = parseFloat(document.getElementById(‘tax_hoaFees’).value);
if (!tax_homeValue || !tax_loanAmount || !tax_mortgageTerm || !tax_interestRate || !tax_propertyTaxes || !tax_insurance || !tax_hoaFees) {
document.getElementById(‘tax_result’).innerText = ‘Por favor, completa todos los campos.’;
return;
}
var tax_annualPropertyTaxes = tax_homeValue * (tax_propertyTaxes / 100);
var tax_annualInsurance = tax_homeValue * (tax_insurance / 100);
var tax_monthlyInterestRate = tax_interestRate / 100 / 12;
var tax_numberOfPayments = tax_mortgageTerm * 12;
var tax_monthlyMortgagePayment = tax_loanAmount *
(tax_monthlyInterestRate * Math.pow(1 + tax_monthlyInterestRate, tax_numberOfPayments)) /
(Math.pow(1 + tax_monthlyInterestRate, tax_numberOfPayments) – 1);
var tax_totalMonthlyPayment = tax_monthlyMortgagePayment +
(tax_annualPropertyTaxes / 12) +
(tax_annualInsurance / 12) +
tax_hoaFees;
document.getElementById(‘tax_result’).innerText = ‘Pago Mensual Total: $’ + tax_totalMonthlyPayment.toFixed(2);
tax_updateChart([
tax_monthlyMortgagePayment,
tax_annualPropertyTaxes / 12,
tax_annualInsurance / 12,
tax_hoaFees
]);
}
// Función para actualizar el gráfico
function tax_updateChart(paymentComponents) {
var tax_ctx = document.getElementById(‘taxChart’).getContext(‘2d’);
if(window.taxChart instanceof Chart) {
window.taxChart.destroy();
}
window.taxChart = new Chart(tax_ctx, {
type: ‘doughnut’, // Cambiado a gráfico de anillo delgado
data: {
labels: [‘Hipoteca’, ‘Impuestos’, ‘Seguro’, ‘HOA’],
datasets: [{
label: ‘Desglose de los Pagos’,
data: paymentComponents,
backgroundColor: [
‘rgba(255, 99, 132, 0.2)’,
‘rgba(54, 162, 235, 0.2)’,
‘rgba(255, 206, 86, 0.2)’,
‘rgba(75, 192, 192, 0.2)’
],
borderColor: [
‘rgba(255, 99, 132, 1)’,
‘rgba(54, 162, 235, 1)’,
‘rgba(255, 206, 86, 1)’,
‘rgba(75, 192, 192, 1)’
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
}
window.onload = tax_initChart;
