added loan calculator

khushi-purwar · khushi-purwar · commit 2cc9f23f331b · 2021-08-01T21:52:40.000+05:30
diff --git a/Loan Calculator/index.html b/Loan Calculator/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Loan Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h3>Loan Calculator</h3>
+        <p>Loan Amount: <input type="number" value="1" id="amount" min="0" onchange="calculateLoan()"> ₹</p>
+        <p>Interest Rate: <input type="number" value="0.1" id="interest" min="0"  onchange="calculateLoan()"> % </p>
+        <p>Months to Pay: <input type="number"  value="1" id="months" min="0"  onchange="calculateLoan()"> </p>
+
+        <h2 id="payment"></h2>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Loan Calculator/script.js b/Loan Calculator/script.js
@@ -0,0 +1,12 @@
+
+function calculateLoan(){
+    const amount = document.querySelector("#amount").value;
+    const interestRate = document.querySelector("#interest").value;
+    const months =  document.querySelector("#months").value;
+
+    const interest =(amount*(interestRate*0.01))/months;
+    const payment = ((amount/months) + interest).toFixed(2);
+
+    document.querySelector("#payment").innerHTML = `EMI: ₹ ${payment}`
+
+}
diff --git a/Loan Calculator/style.css b/Loan Calculator/style.css
@@ -0,0 +1,42 @@
+body{
+    background-color: pink;
+}
+
+.container{
+    width: 400px;
+    height: 450px;
+    background-color: #ff1d58;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    color: white;
+    padding: 20px 0 0 100px;
+    border-radius: 50px;
+}
+
+h3{
+    font-size: 35px;
+}
+
+input{
+    width: 80%;
+    padding: 8px;
+    border: none;
+    margin-top: 10px;
+}
+
+input:focus{
+    outline: none;
+}
+
+h2{
+    margin-top: 30px;
+}
+
+@media screen  and (max-width:360px){
+    .container{
+       border-radius: 0;
+       top: 37%;
+    }    
+}
