Added Credit Card Payoff Calculator (#611)

Rakesh9100 · Feb 24, 2024 · cbf7da8 · cbf7da8
1 parent 5cbee6e
commit cbf7da8
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 0 deletions.
diff --git a/Calculators/Credit-Card-Payoff-Calculator/README.md b/Calculators/Credit-Card-Payoff-Calculator/README.md
@@ -0,0 +1,24 @@
+# <p align="center">Credit Card Payoff Calculator</p>
+
+<p> This is a credit card payoff calculator that helps you determine how long it will take to pay off your credit card debt, given your current balance, interest rate, and monthly payment. It can also help you calculate how much interest you will pay over the life of the loan. <p>
+
+## How to use the calculator:
+
+1) Enter your current credit card balance in the "Enter Credit Card Balance" field.
+2) Enter your annual percentage rate (APR) in the "Enter Annual Percentage Rate(APR)" field.
+3) Enter your monthly payment in the "Enter Monthly Payment" field.
+4) Click the "Calculate" button.
+
+### The calculator will display the following results:
+
+The number of years and months it will take to pay off your credit card debt.
+
+## Benefits of using the credit card payoff calculator:
+
+It can help you understand how much debt you really have.
+It can help you create a plan to pay off your debt faster.
+It can help you save money on interest.
+
+## Screenshots:
+
+![Screenshot](image.png)
diff --git a/Calculators/Credit-Card-Payoff-Calculator/image.png b/Calculators/Credit-Card-Payoff-Calculator/image.png
diff --git a/Calculators/Credit-Card-Payoff-Calculator/index.html b/Calculators/Credit-Card-Payoff-Calculator/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Credit Card Payoff Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Credit Card Payoff Calculator</h1>
+        <label for="balance">Enter Credit Card Balance:</label>
+        <input type="number" id="balance" placeholder="Enter balance (in ₹)">
+
+        <label for="apr">Enter Annual Percentage Rate(APR):</label>
+        <input type="number" id="apr" placeholder="Enter APR (in %)">
+
+        <label for="monthly-payment">Enter Monthly Payment:</label>
+        <input type="number" id="monthly-payment" placeholder="Enter monthly payment (in ₹)">
+
+        <button onclick="calculate()">Calculate</button>
+        <button onclick="reset()">Reset</button>
+
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Credit-Card-Payoff-Calculator/script.js b/Calculators/Credit-Card-Payoff-Calculator/script.js
@@ -0,0 +1,25 @@
+function calculate() {
+    var balance = parseFloat(document.getElementById('balance').value);
+    var apr = parseFloat(document.getElementById('apr').value);
+    var monthlyPayment = parseFloat(document.getElementById('monthly-payment').value);
+
+    var monthlyInterestRate = (apr / 100) / 12;
+    var months = Math.log(monthlyPayment / (monthlyPayment - balance * monthlyInterestRate)) / Math.log(1 + monthlyInterestRate);
+
+    if (isFinite(months)) {
+        var years = Math.floor(months / 12);
+        var remainingMonths = Math.ceil(months % 12);
+        var result = `It will take ${years} years and ${remainingMonths} months to pay off the credit card.`;
+    } else {
+        var result = 'Invalid input. Please check your numbers.';
+    }
+
+    document.getElementById('result').innerHTML = result;
+}
+
+function reset() {
+    document.getElementById('balance').value = '';
+    document.getElementById('apr').value = '';
+    document.getElementById('monthly-payment').value = '';
+    document.getElementById('result').innerHTML = '';
+}
diff --git a/Calculators/Credit-Card-Payoff-Calculator/style.css b/Calculators/Credit-Card-Payoff-Calculator/style.css
@@ -0,0 +1,57 @@
+body {
+    font-family: Arial, sans-serif;
+    /* background-color: #f4f4f4; */
+    background: linear-gradient(90deg, #9AD0C2, #2D9596);
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    max-width: 600px;
+    margin: 100px auto;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
+                0 0 20px rgba(0, 0, 0, 0.1),
+                0 0 40px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+}
+
+input {
+    width: 96%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #265073;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-bottom: 10px;
+}
+
+button:hover {
+    background-color: #12372A;
+}
+
+#result {
+    margin-top: 10px;
+    font-weight: bold;
+}
diff --git a/index.html b/index.html
@@ -1869,6 +1869,20 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Credit Card Payoff Calculator</h2>
+                <h3>Calculates the time in which you can payoff your Credits.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Credit-Card-Payoff-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Credit-Card-Payoff-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Calculator Section Ends Here  -->