-
Notifications
You must be signed in to change notification settings - Fork 404
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0c67d8c
commit be599e3
Showing
5 changed files
with
236 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|  | ||
|
|
||
|
|
||
| ### 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. | ||
|  | ||
|  | ||
|  | ||
|
|
||
| ### Sample Output, | ||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters