Rakesh9100 · Rakesh9100 · May 31, 2024 · May 28, 2024 · May 31, 2024 · May 31, 2024
diff --git a/Calculators/Retirement-Calculator/README.md b/Calculators/Retirement-Calculator/README.md
@@ -0,0 +1,25 @@
+# <p align="center">Retirement Calculator</p>
+
+## Description :-
+
+This Calculator predicts users' retirement savings growth by factoring in age, savings, contributions, and expected returns, facilitating informed financial planning for a comfortable retirement.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+### On search
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/e18c1687-f13e-44ec-a4ac-d8c5264408e3)
+
+
+### These are the UI for the page, The added background-size and animation properties to create a smooth, animated gradient background that transitions between four different colors.
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/b91dbfaa-3637-4ca5-bf60-ee66ebd8a89a)
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/57485e02-c209-4527-b074-fcbc3a5fed45)
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/6749cf94-f903-4b7e-a99b-221eb47d6e06)
+
+### Sample Output,
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/163159351/9a9a1348-3e5d-43dd-8ba5-c1075c460a12)
diff --git a/Calculators/Retirement-Calculator/index.html b/Calculators/Retirement-Calculator/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Retirement Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Retirement Calculator</h1>
+        <form id="retirementForm" class="form-group">
+            <div class="form-control">
+                <label for="currentAge">Current Age:</label>
+                <input type="number" id="currentAge" min="0" required>
+            </div>
+            <div class="form-control">
+                <label for="retirementAge">Retirement Age:</label>
+                <input type="number" id="retirementAge" min="0" required>
+            </div>
+            <div class="form-control">
+                <label for="currentSavings">Current Savings (₹):</label>
+                <input type="number" id="currentSavings" min="0" required>
+            </div>
+            <div class="form-control">
+                <label for="annualContribution">Annual Contribution (₹):</label>
+                <input type="number" id="annualContribution" min="0" required>
+            </div>
+            <div class="form-control">
+                <label for="annualReturn">Annual Return on Investment (%):</label>
+                <input type="number" id="annualReturn" min="0" required>
+            </div>
+            <button type="button" class="btn" onclick="calculateRetirement()">Calculate</button>
+        </form>
+        <div id="result" class="result" style="display: none;">
+            <h2>Estimated Amount Needed for Retirement:</h2>
+            <p id="retirementAmount"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Retirement-Calculator/script.js b/Calculators/Retirement-Calculator/script.js
@@ -0,0 +1,22 @@
+function calculateRetirement() {
+    const currentAge = parseFloat(document.getElementById('currentAge').value);
+    const retirementAge = parseFloat(document.getElementById('retirementAge').value);
+    const currentSavings = parseFloat(document.getElementById('currentSavings').value);
+    const annualContribution = parseFloat(document.getElementById('annualContribution').value);
+    const annualReturn = parseFloat(document.getElementById('annualReturn').value) / 100;
+
+    const yearsToRetirement = retirementAge - currentAge;
+    let futureValue = currentSavings;
+
+    for (let i = 0; i < yearsToRetirement; i++) {
+        futureValue += annualContribution;
+        futureValue *= (1 + annualReturn);
+    }
+
+    const retirementAmount = futureValue.toFixed(2);
+    const resultElement = document.getElementById('result');
+    const retirementAmountElement = document.getElementById('retirementAmount');
+
+    retirementAmountElement.textContent = `₹${retirementAmount}`;
+    resultElement.style.display = 'block';
+}
diff --git a/Calculators/Retirement-Calculator/style.css b/Calculators/Retirement-Calculator/style.css
@@ -0,0 +1,133 @@
+body, h1, h2, p, form, label, input, button, div {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(-45deg, #6a11cb, #2575fc, #ff5f6d, #ffc371);
+    background-size: 400% 400%;
+    animation: gradientAnimation 15s ease infinite;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: #fff;
+}
+
+@keyframes gradientAnimation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.container {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 40px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    max-width: 500px;
+    width: 100%;
+    text-align: center;
+    backdrop-filter: blur(10px);
+}
+
+h1 {
+    margin-bottom: 20px;
+    font-size: 32px;
+    color: #fff;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-control {
+    margin-bottom: 15px;
+    text-align: left;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    color: #e0e0e0;
+    font-weight: bold;
+}
+
+input {
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    margin-bottom: 10px;
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+    outline: none;
+}
+
+input::placeholder {
+    color: #e0e0e0;
+}
+
+input:focus {
+    border: 2px solid #2575fc;
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.btn {
+    padding: 12px 20px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    background: linear-gradient(-45deg, #ff5f6d, #ffc371, #6a11cb, #2575fc);
+    background-size: 400% 400%;
+    animation: buttonGradientAnimation 10s ease infinite;
+    color: #fff;
+}
+
+@keyframes buttonGradientAnimation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.btn:hover {
+    opacity: 0.9;
+}
+
+.result {
+    margin-top: 20px;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+}
+
+.result h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+    color: #fff;
+}
+
+.result p {
+    font-size: 22px;
+    color: #ffc371;
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: 20px;
+    }
+
+    h1 {
+        font-size: 24px;
+    }
+
+    .btn {
+        padding: 10px 15px;
+        font-size: 14px;
+    }
+}
diff --git a/index.html b/index.html
@@ -1826,6 +1826,20 @@ <h3>Converts Rectangular form into Polar form and vice versa.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Retirement Calculator</h2>
+                <h3>Predicts the user retirement savings growth.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Retirement-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Retirement-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Roman Numeral Calculator</h2>