Rakesh9100 · Rakesh9100 · May 24, 2024 · May 23, 2024 · May 23, 2024 · May 24, 2024
diff --git a/Calculators/Loan_Calculator/README.md b/Calculators/Loan_Calculator/README.md
@@ -0,0 +1,16 @@
+# <p align="center">Loan Amount Calculator</p>
+
+## Description :-
+
+This is a loan repayment date calculator which provides the amount of money you will pay as compound intrest. This calculator requires inputs for the loan amount, the interest rate, the number of months for repayment. It calculates the monthly payment and provides a breakdown of the principal and interest payments.
+
+
+## Tech Stacks:-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/manishh12/CalcDiverse/blob/main/Calculators/Loan_Calculator/image_calc.jpeg)
diff --git a/Calculators/Loan_Calculator/app.js b/Calculators/Loan_Calculator/app.js
@@ -0,0 +1,36 @@
+const calcForm = document.getElementById('calc-form'),
+      loanAmount = document.getElementById('loan-amount'),
+      interestRate = document.getElementById('interest-rate'),
+      noOfMonth = document.getElementById('no-of-month'),
+      calcBtn = document.getElementById('calc-btn'),
+      clearBtn = document.getElementById('clear-btn'),
+      paymentInfoList = document.querySelectorAll('.payment-info div span');
+
+calcForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    showPaymentInfo();
+});
+
+clearBtn.addEventListener('click', clearInputAndResult);
+
+// show payment info
+function showPaymentInfo(){
+    let monthlyPayment = calcMonthlyPayment(loanAmount.value, interestRate.value, noOfMonth.value);
+    paymentInfoList[0].innerHTML = `₹${loanAmount.value.toLocaleString()}`;
+    paymentInfoList[1].innerHTML = `${interestRate.value}%`;
+    paymentInfoList[2].innerHTML = noOfMonth.value;
+    paymentInfoList[3].innerHTML = `₹${parseFloat(monthlyPayment).toLocaleString()}`;
+}
+
+function calcMonthlyPayment(PV, i, n){
+    i = (i/100) / 12;
+    let PMT = (PV * i * Math.pow(1 + i, n)) / (Math.pow(1 + i, n) - 1);
+    return PMT.toFixed(2);
+}
+
+function clearInputAndResult(){
+    calcForm.reset();
+    paymentInfoList.forEach(item => {
+        item.innerHTML = "&mdash;";
+    });
+}
diff --git a/Calculators/Loan_Calculator/image_calc.jpeg b/Calculators/Loan_Calculator/image_calc.jpeg
diff --git a/Calculators/Loan_Calculator/index.html b/Calculators/Loan_Calculator/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Loan Calculator</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+
+    <div class = "calc-wrapper">
+      <div class = "calc-content">
+        <h2>Loan Calculator</h2>
+        <form id = "calc-form">
+          <!-- item -->
+          <div class = "form-item">
+            <div class = "input-name">
+              <span>1</span>
+              <label for = "loan-amount">Loan Amount</label>
+            </div>
+            <div class = "input-control">
+              <span>(in rupees)</span>
+              <input type = "number" placeholder="0" id = "loan-amount" min = "0" step = "any" required>
+            </div>
+          </div>
+          <!-- end of item -->
+
+          <!-- item -->
+          <div class = "form-item">
+            <div class = "input-name">
+              <span>2</span>
+              <label for = "interest-rate">Interest Rate</label>
+            </div>
+            <div class = "input-control">
+              <span>(in percent)</span>
+              <input type = "number" placeholder="0" id = "interest-rate" min = "0" step = "any" required>
+            </div>
+          </div>
+          <!-- end of item -->
+
+          <!-- item -->
+          <div class = "form-item">
+            <div class = "input-name">
+              <span>3</span>
+              <label for = "no-of-month">Number Of Months</label>
+            </div>
+            <div class = "input-control">
+              <span>(in months)</span>
+              <input type = "number" placeholder="0" id = "no-of-month" min = "0" step = "any" required>
+            </div>
+          </div>
+          <!-- end of item -->
+
+          <div class = "btns">
+            <input type = "submit" id = "calc-btn" value = "Calculate">
+            <input type = "button" id = "clear-btn" value = "Clear">
+          </div>
+        </form>
+      </div>
+
+      <div class = "result-content">
+        <h2>Your Monthly Payments</h2>
+        <div class = "payment-info">
+          <div>
+            <h4>Loan Amount</h4>
+            <span>&mdash;</span>
+          </div>
+          <div>
+            <h4>Interest Rate</h4>
+            <span>&mdash;</span>
+          </div>
+          <div>
+            <h4>Number of Months</h4>
+            <span>&mdash;</span>
+          </div>
+          <div>
+            <h4>Monthly Payments</h4>
+            <span>&mdash;</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/Calculators/Loan_Calculator/style.css b/Calculators/Loan_Calculator/style.css
@@ -0,0 +1,176 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: 'Fira Sans', sans-serif;
+}
+
+body {
+    background-color: #f4f7f6;
+    line-height: 1.6;
+    font-size: 1.1rem;
+    color: #333;
+}
+
+.calc-wrapper {
+    max-width: 800px;
+    padding: 3rem 1rem;
+    margin: 0 auto;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    background: #ffffff;
+    border-radius: 10px;
+}
+
+.calc-wrapper > div {
+    padding: 1.5rem 2.5rem;
+}
+
+.calc-content {
+    margin-bottom: 1.6rem;
+}
+
+.calc-content h2,
+.result-content h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    text-align: center;
+    color: #06d6a0;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    padding: 0.5rem 0;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+
+#calc-form,
+.payment-info {
+    margin-top: 1.6rem;
+}
+
+.form-item {
+    margin: 1rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.input-name span {
+    background-color: #089de2;
+    display: block;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+}
+
+.input-name {
+    display: flex;
+    align-items: center;
+}
+
+.input-name label {
+    padding-left: 0.8rem;
+    font-weight: 500;
+    color: #555;
+}
+
+.input-control input {
+    font-size: 1rem;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 0.5rem 0.7rem;
+    border-radius: 5px;
+    width: 100%;
+}
+
+.input-control input:focus {
+    outline: none;
+    border-color: #089de2;
+}
+
+.input-control span {
+    padding-right: 0.6rem;
+    font-weight: 300;
+    opacity: 0.7;
+}
+
+.btns {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: space-between;
+}
+
+.btns input {
+    background-color: #089de2;
+    border: none;
+    font-family: inherit;
+    text-transform: uppercase;
+    font-size: 1.1rem;
+    color: #fff;
+    padding: 0.7rem 1rem;
+    border-radius: 5px;
+    outline: 0;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.btns input:hover {
+    background-color: #089de2;
+}
+
+.payment-info {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    text-align: center;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.payment-info div {
+    padding: 1rem 0;
+    background: #089de2;
+    color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.payment-info div h4 {
+    font-weight: 500;
+    padding: 0.6rem 0;
+}
+
+.payment-info div span {
+    font-weight: 400;
+    font-size: 1.75rem;
+}
+
+@media screen and (max-width: 992px) {
+    .payment-info {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width: 680px) {
+    .form-item {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .input-name {
+        margin-bottom: 0.6rem;
+    }
+    .input-control span {
+        display: block;
+    }
+    .btns {
+        flex-direction: column;
+        align-items: center;
+    }
+    .btns input {
+        margin-bottom: 1rem;
+        width: 100%;
+    }
+}
diff --git a/index.html b/index.html
@@ -1951,7 +1951,21 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
                     </a>
                 </div>
             </div>
-        </div>        
+        </div>
+        <div class="box">
+            <div class="content">
+                <h2>Loan Amount Calculator</h2>
+                <h3>This is a loan repayment date calculator which provides the amount of money you will pay as compound intrest.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Loan_Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/manishh12/CalcDiverse/tree/main/Calculators/Loan_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  -->