first commit

nidhiupman568 · Jun 12, 2024 · 1754bfd · 1754bfd
commit 1754bfd
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Loan Calculator - BY NIDHI UPMAN</title>
+        <link rel="stylesheet" href="style.css">
+        <script src="script.js"></script>
+    </head>
+    <div>
+    <div>
+        <center>
+                <h1>Loan Calculator - BY NIDHI UPMAN</h1>
+        </center>
+            </div>
+
+    <body>
+
+
+        <div class="container">
+            <h1>Loan Calculator</h1>
+            <div class="wrapper">
+                <div>
+                    <p>Loan Amount (₹)</p>
+                    <input id="amount" type="number">
+                </div>
+                <div>
+                    <p>Interest Rate (%)</p>
+                    <input id="interest" type="number">
+                </div>
+                <div>
+                    <p>Tenure (in months)</p>
+                    <input id="tenure" type="number">
+                </div>
+            </div>
+            <h2 id="emi"></h2>
+            <h2 id="totalAmount"></h2>
+            <h2 id="totalInterest"></h2>
+        </div>
+</div>
+    </body>
+</div>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,25 @@
+window.onload = () => {
+    const inputs = document.querySelectorAll("input");
+
+    inputs.forEach(input => {
+        input.addEventListener('change', calculateLoan)
+    })
+}
+
+function calculateLoan () {
+    const principal = document.querySelector('#amount').value;
+    const interestRate = document.querySelector('#interest').value;
+    const tenure = document.querySelector('#tenure').value;
+
+    if (!principal || !interestRate || !tenure) return;
+
+    const monthlyInterest = interestRate / 100 / 12;
+    const emi = principal * monthlyInterest * Math.pow(1 + monthlyInterest, tenure) / (Math.pow(1 + monthlyInterest, tenure) - 1);
+
+    const totalAmount = emi * tenure;
+    const totalInterest = totalAmount - principal;
+
+    document.querySelector('#emi').innerText = 'EMI: ₹' + emi.toFixed(2);
+    document.querySelector('#totalAmount').innerText = 'Total Amount: ₹' + totalAmount.toFixed(2);
+    document.querySelector('#totalInterest').innerHTML = 'Total Interest: ₹' + totalInterest.toFixed(2);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    background-color: #F5F5F5;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.container {
+    width: 600px;
+    height: 450px;
+    background-color: #445A6F;
+    color: #FFFFFF;
+    padding: 25px;
+    border-radius: 10px;
+    margin-top: 50px;
+}
+
+.wrapper {
+    display: flex;
+}
+
+.wrapper div {
+    background-color: #e63946;
+    padding: 20px;
+    margin-top: 10px;
+}
+
+input {
+    width: 80%;
+    padding: 8px;
+    margin-top: 10px;
+    border: none;
+    font-size: 20px;
+}
+
+input:focus {
+    outline: none;
+}
+
+h2 {
+    margin-top: 40px;
+}