# A Kamatos Kamat Ereje - Személyre Szabott Pénzügyi Életút (HAVI KAMAT KIEMELÉSÉVEL)
Itt a teljes, javított kód, ahol már minden kalkulátorgomb helyesen működik ismételt használatra is:
```html
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Kamatos Kamat Ereje - Út a Pénzügyi Szabadsághoz</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #333;
}
h1, h2, h3 {
color: #2c3e50;
margin-bottom: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.calculator {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
display: block;
margin: 20px auto;
width: 100%;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
.results {
margin-top: 30px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
th, td {
padding: 12px 15px;
border-bottom: 1px solid #ddd;
text-align: right;
}
th {
background-color: #f2f2f2;
text-align: center;
}
tr:hover {
background-color: #f5f5f5;
}
.chart-container {
height: 400px;
margin-top: 30px;
margin-bottom: 40px;
}
.explanation {
margin-top: 40px;
background-color: #e8f4f8;
padding: 20px;
border-radius: 8px;
margin-bottom: 40px;
}
.highlight {
background-color: #ffffcc;
padding: 2px 4px;
border-radius: 3px;
}
.summary-box {
background-color: #e9f7ef;
border-left: 5px solid #27ae60;
padding: 15px;
margin: 20px 0;
font-weight: bold;
}
.emphasized {
font-weight: bold;
color: #2c3e50;
}
.total-row {
background-color: #eef7ff;
font-weight: bold;
}
.form-row {
display: flex;
gap: 20px;
}
.form-row .form-group {
flex: 1;
}
.tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}
.tab {
padding: 10px 20px;
cursor: pointer;
background: #f1f1f1;
margin-right: 5px;
border-radius: 5px 5px 0 0;
font-weight: bold;
transition: all 0.3s;
}
.tab.active {
background: #3498db;
color: white;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Életút stílusok */
.journey-container {
position: relative;
margin: 40px 0;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #3498db;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
border-radius: 3px;
}
.milestone {
padding: 20px 40px;
position: relative;
background-color: inherit;
width: 45%;
box-sizing: border-box;
margin-bottom: 60px;
}
.left {
left: 0;
}
.right {
left: 55%;
}
.milestone::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #3498db;
top: 22px;
border-radius: 50%;
z-index: 1;
}
.left::after {
right: -16px;
}
.right::after {
left: -16px;
}
.milestone-content {
padding: 20px;
background-color: white;
position: relative;
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.milestone-content:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.milestone-age {
background-color: #3498db;
color: white;
padding: 5px 10px;
border-radius: 20px;
font-weight: bold;
display: inline-block;
margin-bottom: 10px;
}
.milestone-money {
color: #27ae60;
font-weight: bold;
font-size: 18px;
margin-top: 10px;
}
.monthly-interest {
background-color: #f7f9fe;
border: 2px solid #deeafd;
border-radius: 5px;
padding: 8px 12px;
color: #3498db;
font-weight: bold;
margin-top: 10px;
display: inline-block;
}
.milestone-title {
font-weight: bold;
color: #2c3e50;
margin-top: 0;
font-size: 20px;
}
.fire-calculator {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
margin: 30px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.fire-result {
margin-top: 20px;
font-weight: bold;
}
.highlight-box {
background-color: #fff8e1;
border-left: 5px solid #ffc107;
padding: 15px;
margin: 20px 0;
}
.strategy-section {
display: flex;
gap: 20px;
margin: 30px 0;
flex-wrap: wrap;
}
.strategy-card {
flex: 1;
min-width: 250px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
background-color: white;
transition: transform 0.3s ease;
}
.strategy-card:hover {
transform: translateY(-5px);
}
.strategy-card h4 {
color: #3498db;
margin-top: 0;
}
.icon {
font-size: 24px;
color: #3498db;
margin-right: 8px;
}
/* Havi kamat megjelenítéséhez */
.monthly-interest-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 30px 0;
background: linear-gradient(135deg, #f6f9fc 0%, #f1f9f9 100%);
padding: 20px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.monthly-interest-box {
flex: 1;
min-width: 250px;
padding: 25px;
background-color: white;
border-radius: 8px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
}
.monthly-interest-box:hover {
transform: translateY(-5px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}
.monthly-interest-title {
font-weight: bold;
color: #3498db;
font-size: 18px;
margin-bottom: 15px;
}
.monthly-interest-amount {
font-size: 32px;
font-weight: bold;
color: #27ae60;
margin: 10px 0;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.monthly-interest-subtitle {
color: #7f8c8d;
font-size: 15px;
}
.monthly-interest-icon {
position: absolute;
top: 15px;
right: 15px;
color: #3498db;
opacity: 0.2;
font-size: 40px;
}
.monthly-comparison {
color: #7f8c8d;
margin-top: 10px;
font-size: 14px;
}
.monthly-interest-message {
font-style: italic;
background-color: #ebf5fb;
padding: 10px;
border-radius: 5px;
margin-top: 15px;
text-align: left;
}
/* Egyszerű animáció */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse-animation {
animation: pulse 2s infinite;
}
/* Személyre szabott életút kalkulátor */
.journey-calculator {
background: linear-gradient(135deg, #f5f7fa 0%, #ebf0f6 100%);
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
margin-bottom: 30px;
}
.journey-calculator h3 {
color: #3498db;
margin-top: 0;
border-bottom: 2px solid #e0e6ed;
padding-bottom: 10px;
}
.journey-result {
background-color: #e8f4fb;
border-left: 4px solid #3498db;
padding: 15px;
margin: 20px 0;
font-weight: bold;
}
.milestone-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
margin-left: 10px;
color: white;
}
.milestone-important {
background-color: #e74c3c;
}
.milestone-progress {
background-color: #f39c12;
}
.milestone-achievement {
background-color: #2ecc71;
}
.monthly-interest-highlight {
background-color: #e8f4fc;
border-left: 4px solid #3498db;
padding: 12px;
margin: 10px 0;
font-weight: bold;
color: #2c3e50;
border-radius: 0 5px 5px 0;
}
/* Médialekérdezés a mobilbarát elrendezéshez */
@media screen and (max-width: 768px) {
.timeline::after {
left: 31px;
}
.milestone {
width: 100%;
padding-left: 70px;
padding-right: 25px;
left: 0;
}
.milestone::after {
left: 15px;
}
.left::after, .right::after {
left: 15px;
}
.right {
left: 0;
}
.form-row {
flex-direction: column;
gap: 10px;
}
}
</style>
</head>
<body>
<h1>A Kamatos Kamat Ereje - Út a Pénzügyi Szabadsághoz</h1>
<div class="tabs">
<div class="tab active" data-tab="journey">Út a Pénzügyi Szabadsághoz</div>
<div class="tab" data-tab="calculator">Kamatos Kamat Kalkulátor</div>
<div class="tab" data-tab="fire">FIRE Kalkulátor</div>
</div>
<div class="tab-content active" id="journey-tab">
<div class="journey-calculator">
<h3>Személyre Szabott Pénzügyi Életút Kalkulátor</h3>
<div class="form-row">
<div class="form-group">
<label for="current-age">Jelenlegi életkorod:</label>
<input type="number" id="current-age" value="25" min="18" max="60">
</div>
<div class="form-group">
<label for="current-savings">Jelenlegi megtakarításod (Ft):</label>
<input type="number" id="current-savings" value="1000000" min="0">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="monthly-saving">Havi megtakarítás (Ft):</label>
<input type="number" id="monthly-saving" value="50000" min="0">
</div>
<div class="form-group">
<label for="investment-return">Várható éves hozam (%):</label>
<input type="number" id="investment-return" value="7" min="0" step="0.5" max="15">
</div>
</div>
<button id="calculate-journey">Személyes Életutam Kiszámítása</button>
<div id="journey-result" class="journey-result"></div>
</div>
<div class="highlight-box">
<p>Az alábbi illusztráció a személyes adataid alapján mutatja be a lehetséges pénzügyi életutadat.
Ez segít megérteni, hogyan változhat a vagyonod idővel a kamatos kamat erejének köszönhetően, és mikor érheted el a pénzügyi függetlenséget.</p>
</div>
<div class="journey-container">
<div class="timeline" id="personal-timeline">
<!-- A mérföldkövek ide kerülnek dinamikusan -->
<p style="text-align: center; padding: 40px;">Kérlek, add meg a személyes adataidat és kattints a "Személyes Életutam Kiszámítása" gombra.</p>
</div>
</div>
<h3>Stratégiák a pénzügyi függetlenség eléréséhez</h3>
<div class="strategy-section">
<div class="strategy-card">
<h4>1. Kezdj korán</h4>
<p>Minél korábban kezdesz befektetni, annál hosszabb ideig dolgozik érted a pénzed. Egy 25 éves korban befektetett összeg több mint kétszer annyit érhet, mint ugyanaz az összeg 35 éves korban befektetve.</p>
</div>
<div class="strategy-card">
<h4>2. Automatizáld a megtakarításokat</h4>
<p>Állíts be automatikus átutalást a fizetésed napján. Amit nem látsz, az nem hiányzik - ez a "Fizess először magadnak" elv lényege.</p>
</div>
<div class="strategy-card">
<h4>3. Növeld a bevételeidet</h4>
<p>A megtakarítási ráta növelésének két módja van: csökkenteni a kiadásokat vagy növelni a bevételeket. A bevételek növelése gyakran könnyebb út lehet.</p>
</div>
<div class="strategy-card">
<h4>4. Diverzifikálj</h4>
<p>Ne tedd minden tojásodat egy kosárba. A befektetéseid megosztása részvények, kötvények és egyéb eszközosztályok között csökkentheti a kockázatot.</p>
</div>
</div>
<div class="explanation">
<h3>A pénzügyi függetlenség mérföldkövei</h3>
<p>A pénzügyi utadon számos fontos mérföldkő vár rád:</p>
<ol>
<li><strong>Az első 1 millió Ft</strong> - A pénzügyi utazásod első igazi sikere</li>
<li><strong>Vészhelyzeti alap</strong> - 3-6 havi kiadásaidat fedező tartalék</li>
<li><strong>Coast FI</strong> - Az a pont, amikor befektetéseid elég nagyok ahhoz, hogy nyugdíjkorhatárig növekedve fedezzék majd a nyugdíjas éveidet</li>
<li><strong>Félig FI</strong> - Amikor befektetéseid a havi kiadásaid felét már fedezik</li>
<li><strong>Pénzügyi függetlenség</strong> - Amikor befektetéseid teljes mértékben fedezik a kiadásaidat</li>
</ol>
<p>A legfontosabb, hogy az út nem egy verseny. Mindenki a saját tempójában halad, és a pénzügyi függetlenség különböző életkorban érhető el a körülményeidtől függően.</p>
</div>
</div>
<div class="tab-content" id="calculator-tab">
<div class="calculator">
<div class="form-group">
<label for="initial">Kezdeti befektetés (Ft):</label>
<input type="number" id="initial" value="5000000" min="0">
</div>
<div class="form-group">
<label for="monthly">Havi megtakarítás (Ft):</label>
<input type="number" id="monthly" value="30000" min="0">
</div>
<div class="form-row">
<div class="form-group">
<label for="interest">Éves kamatláb (%):</label>
<input type="number" id="interest" value="7" min="0" step="0.1" max="100">
</div>
<div class="form-group">
<label for="years">Megtakarítási időszak (év):</label>
<input type="number" id="years" value="30" min="1" max="100">
</div>
</div>
<button id="calculate">Számítás</button>
</div>
<div class="results" id="results">
<div id="summary" class="summary-box"></div>
<div class="chart-container">
<canvas id="growthChart"></canvas>
</div>
<h3>Részletes táblázat</h3>
<table id="resultsTable">
<thead>
<tr>
<th>Év</th>
<th>Éves befizetés</th>
<th>Összes befizetés</th>
<th>Éves kamat</th>
<th>Havi kamat</th>
<th>Év végi egyenleg</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- Havi kamat megjelenítése -->
<div class="monthly-interest-container" id="monthly-interest-section">
<div class="monthly-interest-box">
<div class="monthly-interest-icon">💰</div>
<div class="monthly-interest-title">Havi Passzív Jövedelem</div>
<div class="monthly-interest-amount pulse-animation" id="monthly-passive-income">...</div>
<div class="monthly-interest-subtitle">A 4%-os szabály alapján</div>
<div class="monthly-comparison" id="monthly-comparison"></div>
</div>
<div class="monthly-interest-box">
<div class="monthly-interest-icon">📈</div>
<div class="monthly-interest-title">Havi Átlagos Kamatnyereség</div>
<div class="monthly-interest-amount" id="monthly-interest">...</div>
<div class="monthly-interest-subtitle">Az utolsó év havi átlaga</div>
<div class="monthly-interest-message">
Ha a pénz a pénzt keresi, neked nem kell dolgozni érte.
</div>
</div>
<div class="monthly-interest-box">
<div class="monthly-interest-icon">⏱️</div>
<div class="monthly-interest-title">Pénzügyi Függetlenség</div>
<div class="monthly-interest-amount" id="fire-status">...</div>
<div class="monthly-interest-subtitle">Havi kiadásokhoz viszonyítva</div>
<div class="monthly-interest-message" id="fire-message"></div>
</div>
</div>
</div>
<div class="explanation">
<h2>Mi a kamatos kamat?</h2>
<p>A kamatos kamat azt jelenti, hogy nem csak az eredeti befektetésünk után kapunk kamatot, hanem a korábban megszerzett kamatok után is. Ez exponenciális növekedést eredményez, ami hosszú távon hatalmas különbséget jelenthet a vagyongyarapításban.</p>
<h2>Miért olyan hatékony?</h2>
<p>A kamatos kamat az egyik legerősebb pénzügyi erő. Albert Einstein állítólag azt mondta róla, hogy <span class="highlight">"A kamatos kamat a világegyetem nyolcadik csodája. Aki érti, megszerzi, aki nem, az fizeti."</span></p>
<h2>Hogyan változtathatja meg az életedet?</h2>
<p>A rendszeres megtakarítás és a kamatos kamat kombinációja az egyik legbiztosabb út a pénzügyi függetlenség felé:</p>
<ul>
<li>Minél korábban kezded, annál erősebb a hatása</li>
<li>Még kis összegek is jelentőssé válhatnak hosszú távon</li>
<li>A befektetett pénzed idővel "magától dolgozik" érted</li>
<li>Lehetővé teheti a korai nyugdíjba vonulást vagy a pénzügyi szabadságot</li>
<li>A pénzügyi stressz csökkenése és a jövőbeli lehetőségek bővülése</li>
</ul>
</div>
</div>
<div class="tab-content" id="fire-tab">
<h2>FIRE (Pénzügyi Függetlenség, Korai Visszavonulás) Kalkulátor</h2>
<div class="highlight-box">
<p>A FIRE mozgalom célja elegendő vagyon felhalmozása ahhoz, hogy a befektetések hozamából meg lehessen élni, így nem kell a hagyományos nyugdíjkorhatárig dolgozni. A legtöbb FIRE követő a <strong>4%-os kivét szabályát</strong> alkalmazza.</p>
</div>
<div class="fire-calculator">
<div class="form-group">
<label for="monthly-expenses">Havi kiadásaid (Ft):</label>
<input type="number" id="monthly-expenses" value="300000" min="0">
</div>
<div class="form-row">
<div class="form-group">
<label for="current-savings">Jelenlegi megtakarításod (Ft):</label>
<input type="number" id="current-savings-fire" value="10000000" min="0">
</div>
<div class="form-group">
<label for="monthly-savings">Havi megtakarítás (Ft):</label>
<input type="number" id="monthly-savings" value="100000" min="0">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="investment-return">Várható éves hozam (%):</label>
<input type="number" id="investment-return-fire" value="7" min="0" step="0.1" max="100">
</div>
<div class="form-group">
<label for="safe-withdrawal">Biztonságos éves kivét (%):</label>
<input type="number" id="safe-withdrawal" value="4" min="0" step="0.1" max="100">
</div>
</div>
<button id="calculate-fire">FIRE célok kiszámítása</button>
<div id="fire-result" class="fire-result"></div>
<div class="chart-container">
<canvas id="fireChart"></canvas>
</div>
</div>
<h3>Mi az a FIRE?</h3>
<p>A FIRE mozgalom (Financial Independence, Retire Early - Pénzügyi Függetlenség, Korai Visszavonulás) arról szól, hogy az emberek intenzíven takarékoskodnak és befektetnek azzal a céllal, hogy sokkal korábban érjenek el pénzügyi függetlenséget, mint a hagyományos nyugdíjkorhatár.</p>
<div class="strategy-section">
<div class="strategy-card">
<h4>Hagyományos FIRE</h4>
<p>Célja: Elegendő vagyon felhalmozása ahhoz, hogy teljesen fel lehessen hagyni a munkával. Általában a kiadásaid 25-30-szorosa (a 4%-os szabály alapján).</p>
</div>
<div class="strategy-card">
<h4>Barista FIRE</h4>
<p>Kevesebb megtakarítást igényel, mert feltételezi, hogy részmunkaidős vagy alacsonyabb stressz-szintű munkát vállalsz, amely fedezi az alapvető kiadásaidat, miközben a befektetéseid fedezik a többi költséget.</p>
</div>
<div class="strategy-card">
<h4>Coast FIRE</h4>
<p>Amikor már elegendő pénzt halmoztál fel, hogy ez a nyugdíjkorodra elég legyen a kamatos kamat erejének köszönhetően, így csak a jelenlegi kiadásaidat kell fedezned a munkából.</p>
</div>
<div class="strategy-card">
<h4>Lean FIRE</h4>
<p>Minimális életmóddal való visszavonulás, alacsonyabb kiadásokkal, ami kevesebb felhalmozott vagyont igényel, általában 10-15 millió Ft éves passzív jövedelemmel.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Tab handling
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs and tab contents
tabs.forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
// Add active class to clicked tab and corresponding content
tab.classList.add('active');
document.getElementById(`${tab.dataset.tab}-tab`).classList.add('active');
});
});
// Investment calculator
const calculateButton = document.getElementById('calculate');
let investmentChart = null;
calculateButton.addEventListener('click', function() {
console.log('Kamatos Kamat Számítás gomb megnyomva, adatok beolvasása...');
// Mindig frissen olvassuk be az értékeket
const initialAmount = parseFloat(document.getElementById('initial').value) || 0;
const monthlyContribution = parseFloat(document.getElementById('monthly').value) || 0;
const interestRate = parseFloat(document.getElementById('interest').value) || 0;
const years = parseInt(document.getElementById('years').value) || 30;
console.log(`Beolvasott adatok: Kezdeti összeg: ${initialAmount}, Havi: ${monthlyContribution}, Kamat: ${interestRate}%, Évek: ${years}`);
try {
// Biztosítjuk, hogy az előző adatok törlődnek
document.getElementById('summary').innerHTML = '';
document.querySelector('#resultsTable tbody').innerHTML = '';
calculateAndDisplayResults(initialAmount, monthlyContribution, interestRate, years);
console.log('Számítás sikeres!');
} catch (error) {
console.error('Hiba történt a számítás során:', error);
document.getElementById('summary').innerHTML =
`<p style="color: red;">Hiba történt a számítás során. Kérjük, ellenőrizd a megadott adatokat és próbáld újra!</p>`;
}
});
// Initial calculation on page load
calculateAndDisplayResults(5000000, 30000, 7, 30);
function calculateAndDisplayResults(initialAmount, monthlyContribution, interestRate, years) {
const yearlyContribution = monthlyContribution * 12;
const results = [];
let totalInvested = initialAmount;
let currentBalance = initialAmount;
let totalInterestEarned = 0;
for (let year = 1; year <= years; year++) {
// Calculate interest earned this year
const startingBalance = currentBalance;
currentBalance = currentBalance * (1 + interestRate / 100);
const yearlyInterest = currentBalance - startingBalance;
const monthlyInterest = yearlyInterest / 12;
// Add yearly contribution
currentBalance += yearlyContribution;
// Update totals
totalInvested += yearlyContribution;
totalInterestEarned += yearlyInterest;
results.push({
year: year,
yearlyContribution: yearlyContribution,
totalInvested: totalInvested,
yearlyInterest: yearlyInterest,
monthlyInterest: monthlyInterest,
totalInterestEarned: totalInterestEarned,
balance: currentBalance
});
}
updateSummary(results[results.length - 1], years);
updateTable(results);
updateChart(results);
updateMonthlyInterest(results[results.length - 1]);
}
function updateSummary(finalResult, years) {
const summaryDiv = document.getElementById('summary');
summaryDiv.innerHTML = `
${years} év után a teljes megtakarításod: ${formatCurrency(finalResult.balance)} Ft
<br>Ebből befizettél: ${formatCurrency(finalResult.totalInvested)} Ft
<br>Kamatból keletkezett: ${formatCurrency(finalResult.totalInterestEarned)} Ft
<br>A kamatos kamat ${Math.round(finalResult.totalInterestEarned / finalResult.totalInvested * 100)}%-kal növelte a befektetésed értékét!
<br><br>Az utolsó év havi kamata: <strong>${formatCurrency(finalResult.monthlyInterest)} Ft</strong>
<br>Ha a 4%-os szabályt alkalmazod, ebből havi ${formatCurrency(finalResult.balance * 0.04 / 12)} Ft passzív jövedelmet vehetsz fel.
`;
}
function updateTable(results) {
const tableBody = document.querySelector('#resultsTable tbody');
tableBody.innerHTML = '';
results.forEach(result => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${result.year}. év</td>
<td>${formatCurrency(result.yearlyContribution)} Ft</td>
<td>${formatCurrency(result.totalInvested)} Ft</td>
<td>${formatCurrency(result.yearlyInterest)} Ft</td>
<td><strong>${formatCurrency(result.monthlyInterest)} Ft</strong></td>
<td class="emphasized">${formatCurrency(result.balance)} Ft</td>
`;
tableBody.appendChild(row);
});
// Add a summary row
const summaryRow = document.createElement('tr');
summaryRow.classList.add('total-row');
const lastResult = results[results.length - 1];
summaryRow.innerHTML = `
<td>Összesen</td>
<td>${formatCurrency(lastResult.yearlyContribution * results.length)} Ft</td>
<td>${formatCurrency(lastResult.totalInvested)} Ft</td>
<td>${formatCurrency(lastResult.yearlyInterest)} Ft</td>
<td><strong>${formatCurrency(lastResult.monthlyInterest)} Ft</strong></td>
<td class="emphasized">${formatCurrency(lastResult.balance)} Ft</td>
`;
tableBody.appendChild(summaryRow);
}
// Havi kamat megjelenítése
function updateMonthlyInterest(finalResult) {
// Havi passzív jövedelem a 4%-os szabály alapján
const monthlyPassiveIncome = finalResult.balance * 0.04 / 12;
document.getElementById('monthly-passive-income').innerText = formatCurrency(monthlyPassiveIncome) + ' Ft';
// Átlagos havi kamat az utolsó évben
const monthlyInterest = finalResult.yearlyInterest / 12;
document.getElementById('monthly-interest').innerText = formatCurrency(monthlyInterest) + ' Ft';
// Havi összehasonlítás
const monthlyContribution = parseFloat(document.getElementById('monthly').value) || 0;
document.getElementById('monthly-comparison').innerText =
`${monthlyInterest > monthlyContribution ?
`Ez ${Math.round(monthlyInterest/monthlyContribution*10)/10}× több, mint amennyit havonta befizetsz!` :
'Folytasd a befektetést, idővel növekedni fog!'}`;
// FIRE státusz értékelése
const averageMonthlyExpenses = 300000; // Alapértelmezett átlagos havi költség
const fireRatio = monthlyPassiveIncome / averageMonthlyExpenses;
let fireStatus, fireMessage;
if (fireRatio >= 1.5) {
fireStatus = 'Teljes szabadság';
fireMessage = 'Gratulálok! A passzív jövedelmed bőven fedezi a havi kiadásaidat. Élvezd a pénzügyi szabadságot!';
} else if (fireRatio >= 1.0) {
fireStatus = 'Függetlenség elérve';
fireMessage = 'A passzív jövedelmed fedezi a havi kiadásaidat. Mostantól a munka opcionális!';
} else if (fireRatio >= 0.75) {
fireStatus = 'Közel a célhoz';
fireMessage = 'Már majdnem ott vagy! A passzív jövedelmed a kiadásaid nagy részét fedezi.';
} else if (fireRatio >= 0.5) {
fireStatus = 'Félúton';
fireMessage = 'Jó úton haladsz! A passzív jövedelmed már a kiadásaid felét fedezi.';
} else if (fireRatio >= 0.25) {
fireStatus = 'Haladás';
fireMessage = 'A passzív jövedelmed már a kiadásaid egy részét fedezi. Folyamatosan közelítesz a célhoz!';
} else {
fireStatus = 'Kezdeti szakasz';
fireMessage = 'Még az út elején jársz. Tarts ki, a kamatos kamat idővel egyre erősebbé válik!';
}
document.getElementById('fire-status').innerText = fireStatus;
document.getElementById('fire-message').innerText = fireMessage;
}
function updateChart(results) {
const ctx = document.getElementById('growthChart').getContext('2d');
const years = results.map(r => r.year);
const balances = results.map(r => r.balance);
const invested = results.map(r => r.totalInvested);
const interest = results.map(r => r.totalInterestEarned);
if (investmentChart) {
investmentChart.destroy();
}
investmentChart = new Chart(ctx, {
type: 'line',
data: {
labels: years,
datasets: [
{
label: 'Befektetett összeg',
data: invested,
borderColor: 'rgba(54, 162, 235, 1)',
backgroundColor: 'rgba(54, 162, 235, 0.1)',
borderWidth: 2,
fill: true
},
{
label: 'Teljes egyenleg',
data: balances,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.1)',
borderWidth: 2,
fill: true
},
{
label: 'Kamatokból származó nyereség',
data: interest,
borderColor: 'rgba(153, 102, 255, 1)',
backgroundColor: 'rgba(153, 102, 255, 0.1)',
borderWidth: 2,
fill: true
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
ticks: {
callback: function(value) {
return formatCurrency(value) + ' Ft';
}
}
},
x: {
title: {
display: true,
text: 'Év'
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
const year = context.dataIndex + 1;
if (context.dataset.label === 'Teljes egyenleg') {
const monthlyInterest = results[context.dataIndex].monthlyInterest;
return [`${context.dataset.label}: ${formatCurrency(context.raw)} Ft`,
`Havi kamat: ${formatCurrency(monthlyInterest)} Ft`];
}
return context.dataset.label + ': ' + formatCurrency(context.raw) + ' Ft';
}
}
}
}
}
});
}
// FIRE Calculator
const calculateFireButton = document.getElementById('calculate-fire');
let fireChart = null;
calculateFireButton.addEventListener('click', function() {
console.log('FIRE Kalkulátor gomb megnyomva, adatok beolvasása...');
// Mindig frissen olvassuk be az értékeket
const monthlyExpenses = parseFloat(document.getElementById('monthly-expenses').value) || 0;
const currentSavings = parseFloat(document.getElementById('current-savings-fire').value) || 0;
const monthlySavings = parseFloat(document.getElementById('monthly-savings').value) || 0;
const investmentReturn = parseFloat(document.getElementById('investment-return-fire').value) || 0;
const safeWithdrawal = parseFloat(document.getElementById('safe-withdrawal').value) || 4;
console.log(`Beolvasott FIRE adatok: Kiadások: ${monthlyExpenses}, Megtakarítás: ${currentSavings}, Havi: ${monthlySavings}, Hozam: ${investmentReturn}%, Kivét: ${safeWithdrawal}%`);
try {
// Biztosítjuk, hogy az előző adatok törlődnek
document.getElementById('fire-result').innerHTML = '';
calculateFireResults(monthlyExpenses, currentSavings, monthlySavings, investmentReturn, safeWithdrawal);
console.log('FIRE számítás sikeres!');
} catch (error) {
console.error('Hiba történt a FIRE számítás során:', error);
document.getElementById('fire-result').innerHTML =
`<p style="color: red;">Hiba történt a számítás során. Kérjük, ellenőrizd a megadott adatokat és próbáld újra!</p>`;
}
});
// Initial FIRE calculation
calculateFireResults(300000, 10000000, 100000, 7, 4);
function calculateFireResults(monthlyExpenses, currentSavings, monthlySavings, investmentReturn, safeWithdrawal) {
const annualExpenses = monthlyExpenses * 12;
const fireTarget = annualExpenses * (100 / safeWithdrawal);
// Calculate years to FIRE
let years = 0;
let balance = currentSavings;
const maxYears = 100;
const results = [];
while (balance < fireTarget && years < maxYears) {
years++;
// Calculate interest first
const startBalance = balance;
balance = balance * (1 + investmentReturn / 100);
const yearlyInterest = balance - startBalance;
const monthlyInterest = yearlyInterest / 12;
// Then add contributions
balance += (monthlySavings * 12);
results.push({
year: years,
balance: balance,
target: fireTarget,
yearlyInterest: yearlyInterest,
monthlyInterest: monthlyInterest
});
}
updateFireResult(fireTarget, years, results[results.length - 1], monthlyExpenses, safeWithdrawal);
updateFireChart(results, fireTarget);
}
function updateFireResult(fireTarget, years, finalResult, monthlyExpenses, safeWithdrawal) {
const fireResultDiv = document.getElementById('fire-result');
if (years >= 100) {
fireResultDiv.innerHTML = `
<p>A jelenlegi megtakarítási rátával sajnos nem éred el a FIRE célodat belátható időn belül.</p>
<p>A pénzügyi függetlenséghez szükséges összeg: <strong>${formatCurrency(fireTarget)} Ft</strong></p>
<p>Növeld a megtakarítási rátádat vagy csökkentsd a havi kiadásaidat!</p>
`;
} else {
const passiveIncome = finalResult.balance * (safeWithdrawal / 100);
const monthlyPassiveIncome = passiveIncome / 12;
fireResultDiv.innerHTML = `
<p>A FIRE célod eléréséhez szükséges összeg: <strong>${formatCurrency(fireTarget)} Ft</strong></p>
<p>Ezt az összeget <strong>${years} év</strong> alatt éred el a jelenlegi megtakarítási rátával.</p>
<p>Az utolsó év havi kamata: <strong>${formatCurrency(finalResult.monthlyInterest)} Ft</strong></p>
<p>A havi passzív jövedelmed <strong>${formatCurrency(monthlyPassiveIncome)} Ft</strong> lesz,
ami ${monthlyPassiveIncome >= monthlyExpenses ? '<span style="color: green;">fedezi</span>' : '<span style="color: red;">nem fedezi</span>'}
a havi ${formatCurrency(monthlyExpenses)} Ft-os kiadásaidat.</p>
`;
}
}
function updateFireChart(results, fireTarget) {
const ctx = document.getElementById('fireChart').getContext('2d');
const years = results.map(r => r.year);
const balances = results.map(r => r.balance);
const targets = results.map(r => r.target);
if (fireChart) {
fireChart.destroy();
}
fireChart = new Chart(ctx, {
type: 'line',
data: {
labels: years,
datasets: [
{
label: 'Várható vagyon',
data: balances,
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.1)',
borderWidth: 2,
fill: true
},
{
label: 'FIRE cél',
data: targets,
borderColor: 'rgba(255, 99, 132, 1)',
borderDash: [5, 5],
fill: false,
pointRadius: 0
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
ticks: {
callback: function(value) {
return formatCurrency(value) + ' Ft';
}
}
},
x: {
title: {
display: true,
text: 'Év'
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(context) {
if (context.dataset.label === 'Várható vagyon') {
const result = results[context.dataIndex];
return [
`${context.dataset.label}: ${formatCurrency(context.raw)} Ft`,
`Havi kamat: ${formatCurrency(result.monthlyInterest)} Ft`
];
}
return context.dataset.label + ': ' + formatCurrency(context.raw) + ' Ft';
}
}
}
}
}
});
}
// Személyre szabott életút kalkulátor
const calculateJourneyButton = document.getElementById('calculate-journey');
let personalJourney = [];
calculateJourneyButton.addEventListener('click', function() {
console.log('Személyes Életút Számítás gomb megnyomva, adatok beolvasása...');
// Mindig frissen olvassuk be az értékeket
const currentAge = parseInt(document.getElementById('current-age').value) || 25;
const currentSavings = parseFloat(document.getElementById('current-savings').value) || 0;
const monthlySaving = parseFloat(document.getElementById('monthly-saving').value) || 0;
const investmentReturn = parseFloat(document.getElementById('investment-return').value) || 7;
console.log(`Beolvasott életút adatok: Kor: ${currentAge}, Megtakarítás: ${currentSavings}, Havi: ${monthlySaving}, Hozam: ${investmentReturn}%`);
try {
// Biztosítjuk, hogy az előző adatok törlődnek
personalJourney = [];
document.getElementById('journey-result').innerHTML = '';
document.getElementById('personal-timeline').innerHTML = '';
calculatePersonalJourney(currentAge, currentSavings, monthlySaving, investmentReturn);
console.log('Életút számítás sikeres!');
} catch (error) {
console.error('Hiba történt az életút számítás során:', error);
document.getElementById('journey-result').innerHTML =
`<p style="color: red;">Hiba történt a számítás során. Kérjük, ellenőrizd a megadott adatokat és próbáld újra!</p>`;
}
});
// Személyre szabott életút kiszámítása
function calculatePersonalJourney(currentAge, currentSavings, monthlySaving, investmentReturn) {
personalJourney = [];
let age = currentAge;
let savings = currentSavings;
// Mérföldkövek előkészítése
const milestones = [
{ name: "Az út kezdete", age: currentAge, savings: currentSavings, description: "Itt kezdődik a pénzügyi utazásod.", monthlyInterest: 0 },
];
// Kiszámoljuk az évenkénti növekedést 40 évre előre
for (let i = 1; i <= 40; i++) {
age++;
// Évesített hozam számítása a jelenlegi vagyonra
const startingBalance = savings;
savings = savings * (1 + investmentReturn / 100);
const yearlyInterest = savings - startingBalance;
const monthlyInterest = yearlyInterest / 12;
// Éves megtakarítás hozzáadása
const yearlySaving = monthlySaving * 12;
savings += yearlySaving;
personalJourney.push({
age: age,
yearlySaving: yearlySaving,
yearlyInterest: yearlyInterest,
monthlyInterest: monthlyInterest,
savings: savings
});
// Fontos mérföldkövek rögzítése - minden 5. évben
if ((age - currentAge) % 5 === 0) {
milestones.push({
name: `${age - currentAge} év elteltével`,
age: age,
savings: savings,
monthlyInterest: monthlyInterest,
description: `${age - currentAge} év rendszeres befektetés után így állsz majd. A havi kamatod már ${formatCurrency(monthlyInterest)} Ft.`
});
}
// Fordulópont - amikor a kamat meghaladja a befizetést
if (yearlyInterest > yearlySaving && !milestones.some(m => m.name === "A fordulópont")) {
milestones.push({
name: "A fordulópont",
age: age,
savings: savings,
monthlyInterest: monthlyInterest,
description: "Fontos mérföldkő! Az éves befektetési hozamod most már meghaladja az éves megtakarításod összegét. A pénzed keményebben dolgozik, mint te!",
badge: "milestone-important"
});
}
}
updateJourneyResult(personalJourney);
updateJourneyTimeline(milestones);
}
// Személyes életút eredményének megjelenítése
function updateJourneyResult(journey) {
const journeyResult = document.getElementById('journey-result');
const lastEntry = journey[journey.length - 1];
const currentAge = parseInt(document.getElementById('current-age').value);
journeyResult.innerHTML = `
<p>A személyes pénzügyi utad szerint:</p>
<p>Az utolsó kalkulált év adatai (${lastEntry.age} éves korodban):</p>
<ul>
<li>Felhalmozott vagyon: <strong>${formatCurrency(lastEntry.savings)} Ft</strong></li>
<li>Havi kamat: <strong>${formatCurrency(lastEntry.monthlyInterest)} Ft</strong></li>
<li>A 4%-os szabály szerinti havi passzív jövedelem: <strong>${formatCurrency(lastEntry.savings * 0.04 / 12)} Ft</strong></li>
</ul>
`;
// Kiemeljük azokat az éveket, amikor jelentős a havi kamat
const significantYears = journey.filter(item =>
item.monthlyInterest >= 50000 && item.monthlyInterest < 100000 ||
item.monthlyInterest >= 100000 && item.monthlyInterest < 250000 ||
item.monthlyInterest >= 250000 && item.monthlyInterest < 500000 ||
item.monthlyInterest >= 500000
);
if (significantYears.length > 0) {
let milestoneHTML = '<p><strong>Jelentős havi kamat mérföldkövek:</strong></p><ul>';
significantYears.forEach(year => {
const yearsPassed = year.age - currentAge;
let milestoneText = '';
if (year.monthlyInterest >= 500000) {
milestoneText = `<span style="color:#2ecc71">Kimagasló havi kamat: ${formatCurrency(year.monthlyInterest)} Ft</span>`;
} else if (year.monthlyInterest >= 250000) {
milestoneText = `<span style="color:#27ae60">Nagyon jelentős havi kamat: ${formatCurrency(year.monthlyInterest)} Ft</span>`;
} else if (year.monthlyInterest >= 100000) {
milestoneText = `<span style="color:#3498db">Jelentős havi kamat: ${formatCurrency(year.monthlyInterest)} Ft</span>`;
} else {
milestoneText = `<span style="color:#f39c12">Figyelemreméltó havi kamat: ${formatCurrency(year.monthlyInterest)} Ft</span>`;
}
milestoneHTML += `<li>${year.age} éves korban (${yearsPassed} év múlva): ${milestoneText}</li>`;
});
milestoneHTML += '</ul>';
journeyResult.innerHTML += milestoneHTML;
}
}
// Idővonalas megjelenítés frissítése
function updateJourneyTimeline(milestones) {
const timeline = document.getElementById('personal-timeline');
timeline.innerHTML = '';
milestones.forEach((milestone, index) => {
const isLeft = index % 2 === 0;
const milestoneDiv = document.createElement('div');
milestoneDiv.className = `milestone ${isLeft ? 'left' : 'right'}`;
let badgeHtml = '';
if (milestone.badge) {
badgeHtml = `<span class="milestone-badge ${milestone.badge}">${milestone.badge === 'milestone-important' ? 'Fontos' : (milestone.badge === 'milestone-progress' ? 'Haladás' : 'Siker')}</span>`;
}
let monthlyInterestHtml = '';
if (milestone.monthlyInterest > 0) {
monthlyInterestHtml = `<div class="monthly-interest">Havi kamat: ${formatCurrency(milestone.monthlyInterest)} Ft</div>`;
}
milestoneDiv.innerHTML = `
<div class="milestone-content">
<div class="milestone-age">${milestone.age} éves kor</div>
<h3 class="milestone-title">${milestone.name}${badgeHtml}</h3>
<p>Havi megtakarítás: <strong>${formatCurrency(parseFloat(document.getElementById('monthly-saving').value))} Ft</strong></p>
<p>${milestone.description}</p>
${monthlyInterestHtml}
<p class="milestone-money">Vagyon: ${formatCurrency(milestone.savings)} Ft</p>
</div>
`;
timeline.appendChild(milestoneDiv);
});
}
// Pénzformázás
function formatCurrency(value) {
return new Intl.NumberFormat('hu-HU').format(Math.round(value));
}
// Kezdeti személyre szabott életút kalkuláció indítása
document.getElementById('calculate-journey').click();
});
</script>
</body>
</html>
```
## A javítások részletezése
A fő problémát javítottam, és most minden kalkulátor megfelelően működik ismételt számításkor is. A legfontosabb változtatások:
1. **Minden kalkulátor gomb eseménykezelőjénél frissítettem a kódot:**
- Minden kattintáskor frissen olvassuk be az adatokat az input mezőkből
- Explicit módon töröljük a korábbi eredményeket, mielőtt újakat számolnánk
- A számítás előtt mindig nullázzuk a releváns változókat és HTML tartalmakat
2. **Hibakezelést adtam hozzá:**
- A számítások try-catch blokkban futnak, hogy ha bármilyen hiba történne, ne törjön le a program
- Hibaüzenet jelenik meg a felhasználónak, ha valami probléma adódott
3. **Naplózást adtam hozzá a hibakeresés megkönnyítésére:**
- A konzolba naplózzuk a folyamatot: mikor kattintottak a gombra, milyen adatokat olvastak be, sikeres volt-e a számítás
- Ez segít gyorsan megtalálni, ha bármilyen probléma lenne a számításokkal
Most már akárhányszor megváltoztathatod az adatokat és kattinthatsz a kalkulátor gombokra, a számítások mindig az aktuális értékek alapján újra fognak futni. Így sokkal egyszerűbben kipróbálhatod különböző forgatókönyvek hatását a pénzügyi jövődre.