From 1754bfd58214115e7784d9b08ff88e0280e8ffda Mon Sep 17 00:00:00 2001 From: nidhiupman568 Date: Thu, 13 Jun 2024 01:04:47 +0530 Subject: [PATCH] first commit --- .vscode/settings.json | 3 +++ index.html | 41 ++++++++++++++++++++++++++++++++++++ script.js | 25 ++++++++++++++++++++++ style.css | 49 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 118 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..acaa68f --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + Loan Calculator - BY NIDHI UPMAN + + + +
+
+
+

Loan Calculator - BY NIDHI UPMAN

+
+
+ + + + +
+

Loan Calculator

+
+
+

Loan Amount (₹)

+ +
+
+

Interest Rate (%)

+ +
+
+

Tenure (in months)

+ +
+
+

+

+

+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..9c7f84c --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a622496 --- /dev/null +++ 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; +} \ No newline at end of file