Added Finance Calculator (#1832)

Rakesh9100 · Aug 10, 2024 · 80a78d0 · 80a78d0
1 parent 1111934
commit 80a78d0
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 0 deletions.
diff --git a/Calculators/Finance-Calculator/favicon_io/android-chrome-192x192.png b/Calculators/Finance-Calculator/favicon_io/android-chrome-192x192.png
diff --git a/Calculators/Finance-Calculator/favicon_io/android-chrome-512x512.png b/Calculators/Finance-Calculator/favicon_io/android-chrome-512x512.png
diff --git a/Calculators/Finance-Calculator/favicon_io/apple-touch-icon.png b/Calculators/Finance-Calculator/favicon_io/apple-touch-icon.png
diff --git a/Calculators/Finance-Calculator/favicon_io/favicon-16x16.png b/Calculators/Finance-Calculator/favicon_io/favicon-16x16.png
diff --git a/Calculators/Finance-Calculator/favicon_io/favicon-32x32.png b/Calculators/Finance-Calculator/favicon_io/favicon-32x32.png
diff --git a/Calculators/Finance-Calculator/favicon_io/favicon.ico b/Calculators/Finance-Calculator/favicon_io/favicon.ico
diff --git a/Calculators/Finance-Calculator/favicon_io/site.webmanifest b/Calculators/Finance-Calculator/favicon_io/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/Calculators/Finance-Calculator/index.html b/Calculators/Finance-Calculator/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Finance Calculator</title>
+    <link rel="shortcut icon" href="favicon_io/android-chrome-192x192.png" type="image/x-icon">
+    <link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+    <div class="container card">
+        <h1>Finance Calculator</h1>
+
+        <!-- Future Value Calculation -->
+        <div class="calculator" id="investment-calculator">
+            <h2>Future Value of Investment</h2>
+            <label for="investment-principal">Principal ($):</label>
+            <input type="number" id="investment-principal" step="0.01">
+            <label for="investment-rate">Annual Interest Rate (%):</label>
+            <input type="number" id="investment-rate" step="0.01">
+            <label for="investment-years">Number of Years:</label>
+            <input type="number" id="investment-years">
+            <button onclick="calculateFutureValue()">Calculate</button>
+            <p id="investment-result"></p>
+        </div>
+
+        <!-- Monthly Payment Calculation -->
+        <div class="calculator" id="loan-calculator">
+            <h2>Monthly Loan Payment</h2>
+            <label for="loan-principal">Principal ($):</label>
+            <input type="number" id="loan-principal" step="0.01">
+            <label for="loan-rate">Annual Interest Rate (%):</label>
+            <input type="number" id="loan-rate" step="0.01">
+            <label for="loan-years">Loan Term (Years):</label>
+            <input type="number" id="loan-years">
+            <button onclick="calculateMonthlyPayment()">Calculate</button>
+            <p id="loan-result"></p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Finance-Calculator/script.js b/Calculators/Finance-Calculator/script.js
@@ -0,0 +1,42 @@
+function calculateFutureValue() {
+    const principal = document.getElementById("investment-principal").value;
+    const annualRate = document.getElementById("investment-rate").value;
+    const years = document.getElementById("investment-years").value;
+
+    // Validate if any field is empty
+    if (!principal || !annualRate || !years) {
+        document.getElementById("investment-result").textContent = "Please fill in all fields.";
+        return;
+    }
+
+    const principalValue = parseFloat(principal);
+    const annualRateValue = parseFloat(annualRate) / 100;
+    const yearsValue = parseInt(years);
+
+    const futureValue = principalValue * Math.pow((1 + annualRateValue), yearsValue);
+    document.getElementById("investment-result").textContent = `Future Value: $${futureValue.toFixed(2)}`;
+}
+
+function calculateMonthlyPayment() {
+    const principal = document.getElementById("loan-principal").value;
+    const annualRate = document.getElementById("loan-rate").value;
+    const years = document.getElementById("loan-years").value;
+
+    // Validate if any field is empty
+    if (!principal || !annualRate || !years) {
+        document.getElementById("loan-result").textContent = "Please fill in all fields.";
+        return;
+    }
+
+    const principalValue = parseFloat(principal);
+    const annualRateValue = parseFloat(annualRate) / 100;
+    const yearsValue = parseInt(years);
+
+    const monthlyRate = annualRateValue / 12;
+    const numberOfPayments = yearsValue * 12;
+    const monthlyPayment = (principalValue * monthlyRate * Math.pow((1 + monthlyRate), numberOfPayments)) /
+                           (Math.pow((1 + monthlyRate), numberOfPayments) - 1);
+
+    document.getElementById("loan-result").textContent = `Monthly Payment: $${monthlyPayment.toFixed(2)}`;
+}
+
diff --git a/Calculators/Finance-Calculator/style.css b/Calculators/Finance-Calculator/style.css
diff --git a/README.md b/README.md
@@ -345,6 +345,7 @@ CalcDiverse is a customized collection of calculators for various aspects of mat
 | 279 | Yarn Density Calculator | Calculates the linear density of the yarn from unit system to another. | https://calcdiverse.netlify.app/calculators/yarn-density-calculator/ |
 | 280 | Chi-Square Calculator | Calculates the chi-square value from the observed and expected data. | https://calcdiverse.netlify.app/calculators/Chi-Square-Calculator/ |
 | 281 | Pet Care Cost Calculator | Calculates the cost required to keep the pet throughout lifespan from the entered data. | https://calcdiverse.netlify.app/calculators/Pet-Care-Cost-Calculator/ |
+| 282 | Finance Calculator | Calculates the future value of investments and monthly loan payments| https://calcdiverse.netlify.app/Calculators/Finance-Calculator/|
 <br>
 <p align="right">(<a href="#top">back to top</a>)</p>
 

diff --git a/index.html b/index.html
@@ -2203,6 +2203,20 @@ <h3>Calculates the Nth number from Fibonacci Sequence.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Finance Calculator</h2>
+                <h3>Calculate the future value of investments and monthly loan payments.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Finance-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/priyashuu/CalcDiverse/tree/main/Calculators/Finance-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>Force Calculator</h2>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}