Added Debt Payoff Calculator (#1400)

Rakesh9100 · Jun 24, 2024 · 430c816 · 430c816
1 parent b1ec9c6
commit 430c816
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 0 deletions.
diff --git a/Calculators/Debt-Payoff-Calculator/README.md b/Calculators/Debt-Payoff-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Debt Payoff Calculator</p>
+
+## Description :-
+
+The Debt Payoff Calculator helps you determine how long it will take to pay off your debt and how much interest you'll accrue over time. By inputting your current debt amount, the number of months you plan to take to pay it off, and the interest rate, the calculator provides a clear repayment plan.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/3fdc696e-2878-41a4-ae38-2dc7a1ccc6dc)
diff --git a/Calculators/Debt-Payoff-Calculator/index.html b/Calculators/Debt-Payoff-Calculator/index.html
@@ -0,0 +1,35 @@
+<!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>Debt Payoff Calculator</title>
+</head>
+
+<body>
+    <div class="calculator-container">
+        <h1>Debt Payoff Calculator</h1>
+        <div class="input-container">
+            <label for="debt">Current Debt</label>
+            <input type="number" id="debt" placeholder="Enter your debt" required>
+        </div>
+        <div class="input-container">
+            <label for="months">Pay Debt in (Months)</label>
+            <input type="number" id="months" placeholder="Enter months" required>
+        </div>
+        <div class="input-container">
+            <label for="interest">Interest Rate (%)</label>
+            <input type="number" id="interest" placeholder="Enter interest rate" required>
+        </div>
+        <button type="button" id="calculate">Calculate</button>
+        <div class="result-container">
+            <div id="result">Total Payment: <span id="output" class="red">Rs. 0.00</span></div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Debt-Payoff-Calculator/script.js b/Calculators/Debt-Payoff-Calculator/script.js
@@ -0,0 +1,28 @@
+document.getElementById('calculate').addEventListener('click', function() {
+    let debt = parseFloat(document.getElementById('debt').value);
+    let months = parseInt(document.getElementById('months').value);
+    let interestRate = parseFloat(document.getElementById('interest').value) / 100;
+
+    if (isNaN(debt) || isNaN(months) || isNaN(interestRate)) {
+        alert("Please fill out all fields with valid numbers.");
+        return;
+    }
+
+    // Calculate monthly interest rate
+    let monthlyInterestRate = interestRate / 12;
+
+    // Calculate the monthly payment using the formula for an amortizing loan
+    let monthlyPayment = (debt * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -months));
+
+    // Calculate total interest paid
+    let totalPayment = monthlyPayment * months;
+    let totalInterest = totalPayment - debt;
+
+    // Display the result
+    document.getElementById('output').innerHTML = `
+        You have a debt of ₹${debt.toFixed(2)} with an interest rate of ${(interestRate * 100).toFixed(2)}%.<br>
+        To pay it off in ${months} months, you will have to pay:<br>
+        <strong>₹${monthlyPayment.toFixed(2)} / month</strong><br>
+        You will pay a total of ₹${totalInterest.toFixed(2)} in interest.
+    `;
+});
diff --git a/Calculators/Debt-Payoff-Calculator/style.css b/Calculators/Debt-Payoff-Calculator/style.css
@@ -0,0 +1,71 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(to right, #f48a8a, #a3dbf5);
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.calculator-container {
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 500px;
+    text-align: center;
+}
+
+h1 {
+    color: #333;
+}
+
+.input-container {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    color: #555;
+}
+
+input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+button {
+    background-color: #4caf50;
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button:hover {
+    background-color: #45a049;
+    transform: scale(1.05);
+    transition: 0.2s ease-in-out;
+}
+
+.result-container {
+    margin-top: 20px;
+}
+
+#result {
+    font-size: 18px;
+    font-family: 'Courier New', Courier, monospace;
+    font-weight: bold;
+    color: #333;
+}
+
+.red {
+    color: #f44336;
+}
diff --git a/index.html b/index.html
@@ -1156,6 +1156,20 @@ <h3>Calculates the number of days remaining until a selected date.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Debt Payoff Calculator</h2>
+                <h3>Effortlessly plan and manage your debt repayment with our easy-to-use Debt Payoff Calculator.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Debt-Payoff-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Debt-Payoff-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>Definite Integral Calculator</h2>