Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Savings Calculator #882

Merged
merged 9 commits into from
May 26, 2024
Merged

Added Savings Calculator #882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
658de6a
Add savings calculator
krishan-07 May 26, 2024
a222f77
Delete Calculators/Savings-Calculator/assets directory
Rakesh9100 May 26, 2024
ca395a8
Update style.css
Rakesh9100 May 26, 2024
a187c68
Update and rename scripts.js to script.js
Rakesh9100 May 26, 2024
5274b2f
Update style.css
Rakesh9100 May 26, 2024
bde099d
Update index.html
Rakesh9100 May 26, 2024
c09287b
Update style.css
Rakesh9100 May 26, 2024
6becd89
Update README.md
Rakesh9100 May 26, 2024
dd734ca
Update index.html
Rakesh9100 May 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions Calculators/Savings-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# <p align="center">Savings Calculator</p>

## Description :-

This calculator estimates the total amount you can save over a specified period by making monthly deposits into your bank savings account at a fixed interest rate.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/fa5073c4-3081-4c0e-9e24-c2d62ebc57e6)
65 changes: 65 additions & 0 deletions Calculators/Savings-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!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>Savings Calculator</title>
</head>

<body>

<div class="header">
<p>Savings Calculator</p>
</div>
<div class="main-container">
<div class="container">
<div class="element">
<label for="initial-invst" class="text">Initial Investment</label>
<input type="number" min="0" max="1000000" step="500" id="initial-invst" class="input"
placeholder="0 - 1000000/-">
</div>
<div class="element">
<label for="monthly-contro" class="text">Monthly contribution amount</label>
<input type="number" min="0" max="100000" step="500" id="monthly-contro" class="input"
placeholder="0 - 10000/-">
</div>
<div class="element">
<label for="interest" class="text">Rate of Interest (%)</label>
<input type="number" min="0" max="10" id="interest" class="input" placeholder="0 - 10%">
</div>
<div class="element">
<label for="time" class="text">Time in years</label>
<input type="number" min="1" max="30" id="time" class="input" placeholder="1 - 30 years" value="1">
</div>
<div class="element">
<label for="compound" class="text">compounding frequency</label>
<select name="compound" id="compound" class="input">
<option value="12">Monthly</option>
<option value="3">Quarterly</option>
<option value="1" selected>Yearly</option>
</select>
</div>
<button class="button">Calculate</button>
</div>
<div class="result-card">
<div class="result-header">Details of savings</div>
<div class="element">
<div class="result-text">Total investments</div>
<div class="result" id="r-invst">/-</div>
</div>
<div class="element">
<div class="result-text">Total savings accumulated</div>
<div class="result" id="r-t-s">/-</div>
</div>
<div class="element">
<div class="result-text">Total interest earned</div>
<div class="result" id="r-t-i">/-</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>

</html>
74 changes: 74 additions & 0 deletions Calculators/Savings-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
document.querySelector(".button").addEventListener("click", () => {
const initialInvst = parseFloat(document.getElementById("initial-invst").value) || 0;
const monthlyContro = parseFloat(document.getElementById("monthly-contro").value) || 0;
const rateOfInterest = parseFloat(document.getElementById("interest").value) / 100 || 0;
const time = parseFloat(document.getElementById("time").value);
const compound = parseFloat(document.getElementById("compound").value);

//function to stop computation and throw error on wrong inputs
if (
initialInvst > parseFloat(document.getElementById("initial-invst").getAttribute("max")) ||
initialInvst < parseFloat(document.getElementById("initial-invst").getAttribute("min"))) {
document.getElementById("initial-invst").classList.add("input-exceeded");
alert("Initial investment should be between 0 and 1000000");
return;
} else {
document.getElementById("initial-invst").classList.remove("input-exceeded");
}

if (
monthlyContro < parseFloat(document.getElementById("monthly-contro").getAttribute("min")) ||
monthlyContro > parseFloat(document.getElementById("monthly-contro").getAttribute("max"))) {
document.getElementById("monthly-contro").classList.add("input-exceeded");
alert("Monthy deposits should be between 0 and 10000");
return;
} else {
document.getElementById("monthly-contro").classList.remove("input-exceeded");
}

if (
rateOfInterest < parseFloat(document.getElementById("interest").getAttribute("min")) ||
rateOfInterest > parseFloat(document.getElementById("interest").getAttribute("max"))) {
document.getElementById("interest").classList.add("input-exceeded");
alert("interest value should be between 0 and 10");
return;
} else {
document.getElementById("interest").classList.remove("input-exceeded");
}

if (
time < parseFloat(document.getElementById("time").getAttribute("min")) ||
time > parseFloat(document.getElementById("time").getAttribute("max")) || !time) {
document.getElementById("time").classList.add("input-exceeded");
alert("time should be between 1 and 30 years");
return;
} else {
document.getElementById("time").classList.remove("input-exceeded");
}

// Calculate the compound interest for the initial investment
const totalSavingsInitial =
initialInvst * Math.pow(1 + rateOfInterest / compound, compound * time);

//calculate the compound interest for monthly investment
let totalSavingsContributions = 0;
for (let i = 1; i <= time * 12; i++) {
totalSavingsContributions +=
monthlyContro *
Math.pow(1 + rateOfInterest / compound, compound * (time - i / 12));
}

// Total savings
const totalSavings = totalSavingsInitial + totalSavingsContributions;

// Calculate total interest earned
const totalInvested = initialInvst + (monthlyContro * time * 12);
const totalInterest = totalSavings - totalInvested;

// Display results
document.getElementById("r-invst").innerText = `${totalInvested.toFixed(
2
)}/-`;
document.getElementById("r-t-s").innerText = `${totalSavings.toFixed(2)}/-`;
document.getElementById("r-t-i").innerText = `${totalInterest.toFixed(2)}/-`;
});
122 changes: 122 additions & 0 deletions Calculators/Savings-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
* {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
box-sizing: border-box;
}

body {
height: 100%;
background-color: #1f5a82;
}

.header p {
margin: 30px auto 0 auto;
font-size: 36px;
text-align: center;
font-weight: 700;
color: #ffffff;
}

.main-container {
display: flex;
flex-direction: row;
justify-content: center;
gap: 10px;
}

.container {
width: 500px;
padding: 25px;
margin: 50px 10px;
border-radius: 10px;
background: #ffffff;
box-shadow: 15px 30px 35px rgba(0, 0, 0, 0.1);
}

.element {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}

.text {
width: 100%;
font-size: 18px;
font-weight: 500;
margin-bottom: 5px;
}

.input {
width: 100%;
height: 40px;
outline: none;
font-size: 16px;
border: 1px solid grey;
border-radius: 5px;
padding: 2px 8px;
}

.input-exceeded {
border-color: red;
}

.button {
width: 100%;
font-size: 18px;
font-weight: 500;
background: #10ac37;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 12px;
}

.result-card {
/* display: none; */
width: 500px;
padding: 25px;
margin: 50px 10px;
border-radius: 10px;
background: #ffffffd7;
box-shadow: 15px 30px 35px rgba(0, 0, 0, 0.1);
}

.result-header {
font-size: 18px;
margin-bottom: 15px;
text-align: center;
}

.result-text {
font-size: 16px;
font-weight: 500;
margin-bottom: 6px;
}

.result {
font-size: 30px;
font-weight: 700;
}

@media only screen and (max-width: 450px) {
.header p {
font-size: 40px;
}

.container {
width: 350px;
}

.result-card {
width: 350px;
}

.main-container {
flex-direction: column;
}
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1798,6 +1798,20 @@ <h3>Calculates salary across across various timeframes simultaneously.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Savings Calculator</h2>
<h3>Calculates the total amount we can save over a specified period by making monthly deposits at a fixed interest rate.</h3>
<div class="card-footer">
<a href="./Calculators/Savings-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Savings-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>Short URL Calculator</h2>
Expand Down