sareiodata · February 6, 2025 07:55
diff --git a/compounding.html b/compounding.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compounding Interest Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .calculator {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 95%;
            max-width: 600px;
        }
        .calculator h2 {
            margin-bottom: 20px;
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="number"] {
            width: calc(100% - 22px);
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 15px;
            background-color: #2a9fd6;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #238ab4;
        }
        .result {
            margin-top: 30px;
            padding: 15px;
            background-color: #e7f3fe;
            border-left: 6px solid #2a9fd6;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 8px 12px;
            text-align: right;
        }
        th:first-child, td:first-child {
            text-align: left;
        }
    </style>
 </head>
 <body>

 <div class="calculator">
    <h2>Compounding Interest Calculator</h2>
    
    <div class="form-group">
        <label for="initialSum">Initial Sum:</label>
        <input type="number" id="initialSum" step="1" required value="10000">
    </div>
    
    <div class="form-group">
        <label for="expectedReturn">Expected Return per Year (%):</label>
        <input type="number" id="expectedReturn" step="0.01" required value="5">
    </div>
    
    <div class="form-group">
        <label for="yearlyRetrieval">Yearly Retrieval Amount:</label>
        <input type="number" id="yearlyRetrieval" step="1" required value="500">
    </div>
    
    <div class="form-group">
        <label for="retrievalIncrease">Annual Increase in Yearly Retrieval (%):</label>
        <input type="number" id="retrievalIncrease" step="0.01" required value="2">
    </div>
    
    <button onclick="calculate()">Calculate</button>

    <div class="result">
        <table id="resultsTable" style="display: none;">
            <thead>
                <tr>
                    <th>Year</th>
                    <th>Initial Sum at Start of Year</th>
                    <th>Expected Return (%)</th>
                    <th>Adjusted Yearly Retrieval</th>
                    <th>Retrieval Increase (%)</th>
                    <th>End of Year Amount</th>
                </tr>
            </thead>
            <tbody id="resultsBody">
            </tbody>
        </table>
    </div>
 </div>

 <script>
 function calculate() {
    const initialSum = parseFloat(document.getElementById('initialSum').value);
    const expectedReturn = parseFloat(document.getElementById('expectedReturn').value) / 100;
    const yearlyRetrieval = parseFloat(document.getElementById('yearlyRetrieval').value);
    const retrievalIncrease = parseFloat(document.getElementById('retrievalIncrease').value) / 100;

    if (isNaN(initialSum) || isNaN(expectedReturn) || isNaN(yearlyRetrieval) || isNaN(retrievalIncrease)) {
        alert("Please enter valid numbers.");
        return;
    }

    let amount = initialSum;
    const resultsBody = document.getElementById('resultsBody');
    resultsBody.innerHTML = '';

    for (let year = 1; year <= 40; year++) {
        const interestGained = Math.round(amount * expectedReturn);
        const adjustedRetrieval = Math.round(yearlyRetrieval * Math.pow((1 + retrievalIncrease), year - 1));
        const endOfYearAmount = Math.round(amount + interestGained - adjustedRetrieval);

        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${year}</td>
            <td>$${amount.toLocaleString()}</td>
            <td>${(expectedReturn * 100).toFixed(2)}%</td>
            <td>$${adjustedRetrieval.toLocaleString()}</td>
            <td>${(retrievalIncrease * 100).toFixed(2)}%</td>
            <td>$${endOfYearAmount.toLocaleString()}</td>
        `;
        resultsBody.appendChild(row);

        amount = endOfYearAmount;
    }

    document.getElementById('resultsTable').style.display = 'table';
 }
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Compounding Interest Calculator</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f4f4f9;
	margin: 0;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	}
	.calculator {
	background: white;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 95%;
	max-width: 600px;
	}
	.calculator h2 {
	margin-bottom: 20px;
	color: #333;
	}
	.form-group {
	margin-bottom: 15px;
	}
	label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	}
	input[type="number"] {
	width: calc(100% - 22px);
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}
	button {
	padding: 10px 15px;
	background-color: #2a9fd6;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}
	button:hover {
	background-color: #238ab4;
	}
	.result {
	margin-top: 30px;
	padding: 15px;
	background-color: #e7f3fe;
	border-left: 6px solid #2a9fd6;
	color: #333;
	}
	table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	}
	th, td {
	padding: 8px 12px;
	text-align: right;
	}
	th:first-child, td:first-child {
	text-align: left;
	}
	</style>
	</head>
	<body>

	<div class="calculator">
	<h2>Compounding Interest Calculator</h2>

	<div class="form-group">
	<label for="initialSum">Initial Sum:</label>
	<input type="number" id="initialSum" step="1" required value="10000">
	</div>

	<div class="form-group">
	<label for="expectedReturn">Expected Return per Year (%):</label>
	<input type="number" id="expectedReturn" step="0.01" required value="5">
	</div>

	<div class="form-group">
	<label for="yearlyRetrieval">Yearly Retrieval Amount:</label>
	<input type="number" id="yearlyRetrieval" step="1" required value="500">
	</div>

	<div class="form-group">
	<label for="retrievalIncrease">Annual Increase in Yearly Retrieval (%):</label>
	<input type="number" id="retrievalIncrease" step="0.01" required value="2">
	</div>

	<button onclick="calculate()">Calculate</button>

	<div class="result">
	<table id="resultsTable" style="display: none;">
	<thead>
	<tr>
	<th>Year</th>
	<th>Initial Sum at Start of Year</th>
	<th>Expected Return (%)</th>
	<th>Adjusted Yearly Retrieval</th>
	<th>Retrieval Increase (%)</th>
	<th>End of Year Amount</th>
	</tr>
	</thead>
	<tbody id="resultsBody">
	</tbody>
	</table>
	</div>
	</div>

	<script>
	function calculate() {
	const initialSum = parseFloat(document.getElementById('initialSum').value);
	const expectedReturn = parseFloat(document.getElementById('expectedReturn').value) / 100;
	const yearlyRetrieval = parseFloat(document.getElementById('yearlyRetrieval').value);
	const retrievalIncrease = parseFloat(document.getElementById('retrievalIncrease').value) / 100;

	if (isNaN(initialSum) \|\| isNaN(expectedReturn) \|\| isNaN(yearlyRetrieval) \|\| isNaN(retrievalIncrease)) {
	alert("Please enter valid numbers.");
	return;
	}

	let amount = initialSum;
	const resultsBody = document.getElementById('resultsBody');
	resultsBody.innerHTML = '';

	for (let year = 1; year <= 40; year++) {
	const interestGained = Math.round(amount * expectedReturn);
	const adjustedRetrieval = Math.round(yearlyRetrieval * Math.pow((1 + retrievalIncrease), year - 1));
	const endOfYearAmount = Math.round(amount + interestGained - adjustedRetrieval);

	const row = document.createElement('tr');
	row.innerHTML = `
	<td>${year}</td>
	<td>$${amount.toLocaleString()}</td>
	<td>${(expectedReturn * 100).toFixed(2)}%</td>
	<td>$${adjustedRetrieval.toLocaleString()}</td>
	<td>${(retrievalIncrease * 100).toFixed(2)}%</td>
	<td>$${endOfYearAmount.toLocaleString()}</td>
	`;
	resultsBody.appendChild(row);

	amount = endOfYearAmount;
	}

	document.getElementById('resultsTable').style.display = 'table';
	}
	</script>

	</body>
	</html>