(function() {
// Crear e insertar el estilo CSS mejorado
const style = document.createElement('style');
style.innerHTML = `
body {
font-family: 'Arial', sans-serif;
background-color: #f4f7f9;
margin: 0;
padding: 20px;
}
#calcContainer {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border: 2px solid #0074D9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #0074D9;
margin-bottom: 20px;
font-size: 24px;
}
h2 {
color: #0074D9;
border-bottom: 2px solid #0074D9;
padding-bottom: 5px;
margin-bottom: 15px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #333;
font-weight: bold;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
button {
flex: 1;
padding: 12px;
background-color: #0074D9;
color: #ffffff;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
text-align: center; /* Asegura que el texto esté centrado */
}
button:hover {
background-color: #005bb5;
}
.clear-button {
background-color: #f44336;
text-align: center; /* Asegura que el texto esté centrado */
}
.clear-button:hover {
background-color: #d32f2f;
}
#savingsResult, #tripTimeResult {
margin-top: 20px;
padding: 20px;
background-color: #28a745;
color: #ffffff;
border-radius: 5px;
text-align: center;
font-size: 18px;
}
.trip-result-text {
color: white !important;
}
.hidden {
display: none;
}
.card {
background-color: #ffffff;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.form-group select, .form-group input {
border: 1px solid #0074D9;
}
`;
document.head.appendChild(style); // Añadir los estilos al de la página
// Crear el contenido de la calculadora
const container = document.getElementById('calcContainer');
container.innerHTML = `
Income and Savings Calculator
Income
`;
// Funciones internas de la calculadora
window.displayIncomeOptions = function() {
const personaType = document.getElementById('personaType').value;
document.getElementById('studentIncome').style.display = personaType === 'student' ? 'block' : 'none';
document.getElementById('workerIncome').style.display = personaType === 'worker' ? 'block' : 'none';
document.getElementById('retiredIncome').style.display = personaType === 'retired' ? 'block' : 'none';
};
window.calculateSavings = function() {
const personaType = document.getElementById('personaType').value;
let totalIncome = 0;
if (personaType === 'student') {
totalIncome = parseFloat(document.getElementById('familyHelp').value) || 0;
totalIncome += parseFloat(document.getElementById('sporadicIncome').value) || 0;
} else if (personaType === 'worker') {
totalIncome = parseFloat(document.getElementById('salary').value) || 0;
totalIncome += parseFloat(document.getElementById('commissions').value) || 0;
totalIncome += parseFloat(document.getElementById('bonuses').value) || 0;
totalIncome += parseFloat(document.getElementById('freelanceIncome').value) || 0;
} else if (personaType === 'retired') {
totalIncome = parseFloat(document.getElementById('pension').value) || 0;
totalIncome += parseFloat(document.getElementById('rentalIncomeRetired').value) || 0;
}
const expenses = ['rent', 'utilities', 'food', 'transport', 'healthInsurance', 'debt', 'entertainment', 'savings', 'childcare'];
let totalExpenses = 0;
expenses.forEach(id => {
totalExpenses += parseFloat(document.getElementById(id).value) || 0;
});
const savingsResult = totalIncome - totalExpenses;
document.getElementById('savingsResult').textContent = 'Your monthly savings: $' + savingsResult.toFixed(2);
if (savingsResult > 0) {
document.getElementById('travelCostSection').classList.remove('hidden');
} else {
document.getElementById('travelCostSection').classList.add('hidden');
}
};
window.calculateTripTime = function() {
const savings = parseFloat(document.getElementById('savingsResult').textContent.split('$')[1]) || 0;
const travelCost = parseFloat(document.getElementById('travelCost').value) || 0;
const creditAmount = parseFloat(document.getElementById('creditAmount').value) || 0;
if (savings > 0) {
const remainingCost = travelCost - creditAmount;
const monthsToSave = remainingCost / savings;
const years = Math.floor(monthsToSave / 12);
const months = Math.ceil(monthsToSave % 12);
document.getElementById('tripTimeResult').innerHTML = `
You can pay for your trip in ${years} years and ${months} months.
| Payment Method |
Amount (USD) |
| With credit/loan |
$${creditAmount.toFixed(2)} |
| With savings |
$${remainingCost.toFixed(2)} |
`;
document.getElementById('tripTimeResult').classList.remove('hidden');
} else {
document.getElementById('tripTimeResult').textContent = `You don't have enough savings to calculate the trip time.`;
document.getElementById('tripTimeResult').classList.remove('hidden');
}
};
window.clearFields = function() {
document.querySelectorAll('input').forEach(input => input.value = '');
document.getElementById('personaType').value = '';
document.getElementById('savingsResult').textContent = '';
document.getElementById('studentIncome').classList.add('hidden');
document.getElementById('workerIncome').classList.add('hidden');
document.getElementById('retiredIncome').classList.add('hidden');
document.getElementById('travelCostSection').classList.add('hidden');
document.getElementById('tripTimeResult').textContent = '';
};
})();