From 8e8d21c9defbcc325c72b3ab6e3534f694e70ddf Mon Sep 17 00:00:00 2001 From: avnee-gy Date: Thu, 12 Oct 2023 22:05:44 +0530 Subject: [PATCH] EMI calculator added --- EmiCalculator/avnee-gy/home.html | 81 ++++++++++ EmiCalculator/avnee-gy/js/script.js | 81 ++++++++++ EmiCalculator/avnee-gy/style.css | 228 ++++++++++++++++++++++++++++ 3 files changed, 390 insertions(+) create mode 100644 EmiCalculator/avnee-gy/home.html create mode 100644 EmiCalculator/avnee-gy/js/script.js create mode 100644 EmiCalculator/avnee-gy/style.css diff --git a/EmiCalculator/avnee-gy/home.html b/EmiCalculator/avnee-gy/home.html new file mode 100644 index 000000000..2a2f06dd2 --- /dev/null +++ b/EmiCalculator/avnee-gy/home.html @@ -0,0 +1,81 @@ + + + + + + + EMI Calculator + + + + +
+
+
+ Principal Amount (₹): +
+ +
+ +
+
+
+
+ Loan Tenure (months): +
+
+
+ +
+
+
0
+
+
+
+
+
+ Interest Rate (%) : +
+
+ +
+
+
+ +
+ +
+ +
+
+ Total Amount to be paid: (₹): +
+
+
+ EMI per Month (₹): +
+
+
+ Compound Interest: (₹): +
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/EmiCalculator/avnee-gy/js/script.js b/EmiCalculator/avnee-gy/js/script.js new file mode 100644 index 000000000..ae9cab316 --- /dev/null +++ b/EmiCalculator/avnee-gy/js/script.js @@ -0,0 +1,81 @@ +const loanAmount = document.getElementById("amt"); +const loanTenure = document.getElementById("time"); +const loanRate = document.getElementById("rate"); + +const out1 = document.querySelector(".val1"); +const out2 = document.querySelector(".val2"); + + +loanTenure.oninput = (()=>{ + let value = loanTenure.value; + out2.textContent = value; + out2.style.left = (value/2) + "%"; + out2.classList.add("show"); + }); + loanTenure.onblur = (()=>{ + out2.classList.remove("show"); + }); + +loanAmount.oninput = (()=>{ + let value = loanAmount.value; + out1.textContent = value; + out1.style.left = (value/2) + "%"; + out1.classList.add("show"); + } +); +loanAmount.onblur = (()=>{ + out1.classList.remove("show"); +}); + + + + +const loanEmi = document.querySelector(".emi"); +// const loanPrinciple = document.querySelector(".loan_principle"); +const loanTotal = document.querySelector(".pay"); +const loanInterest = document.querySelector(".inter"); +console.log("Developed By Avnee Goyal :)") + + + +const submitBtn = document.querySelector("#calc"); + + submitBtn.addEventListener("click", function(){ + + // amount = loanAmount.value; + // tenure = (loanTenure.value); // 1Year = 12 months + // let time = tenure/12; + // rate = (loanRate.value); // loan rate per year / 100 = loan percentage + // total= amount*(Math.pow(1+(rate/100),time)) //compound interest formula + // emi = total/(tenure*12); + // emi = amount*rate*Math.pow((1+rate),tenure)/(Math.pow((1+r), tenure)-1); + // // total = emi * tenure; // total amount to be paid including interest + // interest = total - amount // interest = total amount - principle amount + + + amount = loanAmount.value; + tenure = (loanTenure.value); // 1Year = 12 months + time = tenure/12; + rate = (loanRate.value); // loan rate per year / 100 = loan percentage + total= amount*(Math.pow(1+(rate/100),time)) ;//compound interest formula + // emi = amount*rate*Math.pow((1+rate),tenure*12)/(Math.pow((1+r), tenure*12)-1); + monthly_rate = rate/(12*100); + frst_int = monthly_rate*amount; + emi = Math.pow((1+ monthly_rate), (tenure-1)) / (Math.pow((1+ monthly_rate), (tenure-1)) -1) * frst_int; + // total = emi * tenure; // total amount to be paid including interest + interest = total - amount ; + + + loanEmi.innerHTML = Math.floor(emi); + // loanPrinciple.innerHTML = Math.floor(amount); + loanTotal.innerHTML = Math.floor (total); + loanInterest.innerHTML = Math.floor (interest); + + + + + + + + + }); \ No newline at end of file diff --git a/EmiCalculator/avnee-gy/style.css b/EmiCalculator/avnee-gy/style.css new file mode 100644 index 000000000..e2579440c --- /dev/null +++ b/EmiCalculator/avnee-gy/style.css @@ -0,0 +1,228 @@ +html{ + scroll-behavior: smooth; +} + +html,body{ + margin: 0; + font-size: 20px; + font-weight: 400; + font-family: Georgia, 'Times New Roman', Times, serif; + color: #7883d3; + /* display: flex; */ + /* align-items: center; */ +} + +nav{ + height: 70px; + width: 100%; + overflow: hidden; + background-color: #7883d3; + color: #fff; + display: flex; + justify-content: center; /* Center the content horizontally */ + align-items: center; +} +h2{ + margin: 0 auto; +} + + +.inputs_{ + /* margin-top: 50px; */ + align-items: center; + margin-top: 30px; + +} + +.container{ + display: flex; + padding: 20px 20px 20px 30px; + align-items: center; + place-content: center; + margin-right: 20px; +} + +.inputs_labels{ + margin-right: 20px; + color: #7883d3; + text-decoration: solid; +} + +.sliders{ + display: flex; + justify-content: space-around; +} + +.container .sliders .sliderValue{ + height: 40px; + width: 600px; + display: flex; +} + +.container .sliders .sliderValue input{ + height: 10px; + width: 100%; + margin-right: 20px; + cursor: pointer; + -webkit-appearance: none; + outline: none; + background: #f2f2f2; + border-radius: 25px; + box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2); + +} + +/* .sliderValue input::-moz-range-progress{ + height: 10px; + border-radius: 25px; + background: #f9cf08; +} + +.sliderValue input::-moz-range-thumb{ + height: 20px; + width: 20px; + border-radius: 50%; + border: 4px solid white; + background-color: #7883d3; + +} */ + +.sliderValue input::-webkit-slider-runnable-track { + height: 12px; + border-radius: 25px; + background: #f9cf08; + border: none; +} + +.sliderValue input::-webkit-slider-thumb { + -webkit-appearance: none; + height: 20px; + width: 20px; + border-radius: 50%; + border: 2px solid white; + background-color: #7883d3; +} + +.sliderValue input:focus { + outline: none; +} + +.custom-btn { + width: 130px; + height: 40px; + color: #fff; + border-radius: 5px; + padding: 10px 25px; + font-family: Georgia, 'Times New Roman', Times, serif; + font-weight: 500; + background: transparent; + cursor: pointer; + transition: all 0.3s ease; + margin-bottom: 100px; + margin-left: 600px; + position: relative; + box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), + 7px 7px 20px 0px rgba(0,0,0,.1), + 4px 4px 5px 0px rgba(0,0,0,.1); + outline: none; + display: flex; + justify-content: center; + align-items: center; + } + +.btn-3 { + background: rgb(1,196,223); + /* background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); */ + width: 130px; + height: 40px; + line-height: 42px; + padding: 0; + border: none; + + } + .btn-3 span { + position: relative; + display: block; + width: 100%; + height: 100%; + color: #7883d3; + text-decoration: solid; + align-items: center; + } + .btn-3:before, + .btn-3:after { + position: absolute; + content: ""; + right: 0; + top: 0; + /* left: 0; + bottom: 0; */ + background: rgba(1,196,223,1); + transition: all 0.3s ease; + } + .btn-3:before { + height: 0%; + width: 2px; + } + .btn-3:after { + width: 0%; + height: 2px; + } + .btn-3:hover{ + background: transparent; + box-shadow: none; + } + .btn-3:hover:before { + height: 100%; + + } + .btn-3:hover:after { + width: 100%; + } + .btn-3 span:hover{ + color: rgba(1,196,223,1); + } + .btn-3 span:before, + .btn-3 span:after { + position: absolute; + content: ""; + left: 0; + bottom: 0; + /* right: 0; + top: 0; */ + background: rgba(1,196,223,1); + transition: all 0.3s ease; + } + .btn-3 span:before { + width: 2px; + height: 0%; + } + .btn-3 span:after { + width: 0%; + height: 2px; + } + .btn-3 span:hover:before { + height: 100%; + } + .btn-3 span:hover:after { + width: 100%; + } +.output_{ + display: flex; + justify-content:space-evenly; + margin-top: 50px; +} + +.labels{ + border: 10px; + border-color: gray; + padding: 80px 65px 100px 45px; + background-color: white; + box-shadow :2px; + box-shadow: 2px 4px 8px rgba(0,0,0,0.1); +} + +.out{ + color: rgb(1,196,223); + align-items: center; +}