made the working laon calculator

Akshat162001 · Akshat162001 · commit 0a26c623ae15 · 2023-07-13T00:03:06.000+05:30
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,6 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5502,
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
 }
diff --git a/projects/loan-calculator/index.html b/projects/loan-calculator/index.html
@@ -7,20 +7,26 @@
     <title>Loan Calculator</title>
     <link rel="stylesheet" href="style.css">
 </head>
-<body>
+<body style="font-family: 'Times New Roman', Times, serif;">
+    <form action="" id="from">
     <div class="container">
         <h1>Loan Calculator</h1>
         <p>Loan Amount $
-            <input onchange="calculateLoan()" class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
+            <input  class="input" type="number" id="loan-amount" min="1" max="500000" value="10000">
         </p>
         <p>Interest Rate %
-            <input onchange="calculateLoan()" class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
+            <input  class="input" type="number" id="interest-rate" min="0" max="100" value="10" step=".1">
         </p>
         <p>Months to pay
-            <input onchange="calculateLoan()" class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
+            <input   class="input" type="number" id="months-to-pay" min="6" max="48" value="12">
         </p>
-        <p class="payment" id="payment">Monthly Payment:</p>
+        <button id="c" class="Cen" onclick="calculateLoan()" style="font-size: 15px; border-radius: 5px;height: 30px;text-align: center;">Calculate</button>
+        <br>
+        <br>
+        
+        <div id="payment"></div>
     </div>
+</form>
 
     <script src="index.js"></script>
 </body>
diff --git a/projects/loan-calculator/index.js b/projects/loan-calculator/index.js
@@ -1,15 +1,21 @@
 function calculateLoan() {
-  loanAmountValue = document.getElementById("loan-amount").value;
+  event.preventDefault();
 
-  interestRateValue = document.getElementById("interest-rate").value;
+   var loanAmountValue = document.getElementById("loan-amount").value;
 
-  MonthsToPayValue = document.getElementById("months-to-pay").value;
+   var interestRateValue = document.getElementById("interest-rate").value;
 
-  interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
+  var MonthsToPayValue = document.getElementById("months-to-pay").value;
+
+ var interest = (loanAmountValue * (interestRateValue * 0.01)) / MonthsToPayValue;
 
   monthlyPayment = (loanAmountValue / MonthsToPayValue + interest).toFixed(2);
 
-  document.getElementById(
-    "payment"
-  ).innerHTML = `Monthly Payment: ${monthlyPayment}`;
+ 
+  document.getElementById("payment").innerHTML="Total Loan to be paid is Ruppees " + monthlyPayment
+  document.getElementById("loan-amount").value = "";
+  document.getElementById("interest-rate").value = "";
+  document.getElementById("months-to-pay").value = "";
+
+   
 }
diff --git a/projects/loan-calculator/style.css b/projects/loan-calculator/style.css
@@ -6,6 +6,7 @@ body{
     justify-content: center;
     align-items: center;
     font-family: 'Courier New', Courier, monospace;
+    background-color: rgb(246, 150, 82);
 }
 
 .container{
@@ -24,4 +25,10 @@ body{
 .payment{
     font-weight: 600;
     font-size: 20px;
+}
+.Cen{
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    margin-left: 80px;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,6 @@`
`1`	`1`	`{`
`2`		`- "liveServer.settings.port": 5502`
	`2`	`+ "liveServer.settings.port": 5502,`
	`3`	`+ "githubPullRequests.ignoredPullRequestBranches": [`
	`4`	`+ "main"`
	`5`	`+ ]`
`3`	`6`	`}`