diff --git a/Calculators/Savings-Calculator/README.md b/Calculators/Savings-Calculator/README.md new file mode 100644 index 000000000..2ad666423 --- /dev/null +++ b/Calculators/Savings-Calculator/README.md @@ -0,0 +1,15 @@ +#

Savings Calculator

+ +## 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) diff --git a/Calculators/Savings-Calculator/index.html b/Calculators/Savings-Calculator/index.html new file mode 100644 index 000000000..4146df332 --- /dev/null +++ b/Calculators/Savings-Calculator/index.html @@ -0,0 +1,65 @@ + + + + + + + + Savings Calculator + + + + +
+

Savings Calculator

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
Details of savings
+
+
Total investments
+
/-
+
+
+
Total savings accumulated
+
/-
+
+
+
Total interest earned
+
/-
+
+
+
+ + + + diff --git a/Calculators/Savings-Calculator/script.js b/Calculators/Savings-Calculator/script.js new file mode 100644 index 000000000..73303ede5 --- /dev/null +++ b/Calculators/Savings-Calculator/script.js @@ -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)}/-`; +}); diff --git a/Calculators/Savings-Calculator/style.css b/Calculators/Savings-Calculator/style.css new file mode 100644 index 000000000..0aa36363f --- /dev/null +++ b/Calculators/Savings-Calculator/style.css @@ -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; + } +} diff --git a/index.html b/index.html index 20e3919cf..98e76fba6 100644 --- a/index.html +++ b/index.html @@ -1798,6 +1798,20 @@

Calculates salary across across various timeframes simultaneously.

+
+
+

Savings Calculator

+

Calculates the total amount we can save over a specified period by making monthly deposits at a fixed interest rate.

+
+ + + + + Source Code + +
+
+

Short URL Calculator