diff --git a/loan-calc/README.md b/loan-calc/README.md new file mode 100644 index 0000000..7ab4358 --- /dev/null +++ b/loan-calc/README.md @@ -0,0 +1,3 @@ +## Handy Loan Calculator + +**here is the link** [Calc](https://ruhanrk.github.io/loan-calc/). \ No newline at end of file diff --git a/loan-calc/css/style.css b/loan-calc/css/style.css new file mode 100644 index 0000000..c40f25e --- /dev/null +++ b/loan-calc/css/style.css @@ -0,0 +1,19 @@ +@import url('https://fonts.googleapis.com/css?family=Merienda'); +@import url('https://fonts.googleapis.com/css?family=Satisfy'); + +#loading, +#results{ + display: none; +} + +.card2{ + background-color: transparent; +} + +.heading{ + font-family: 'Merienda', cursive; +} +.submits{ + font-family: 'Satisfy', cursive; + font-size: 25px; +} \ No newline at end of file diff --git a/loan-calc/img/favicon.ico b/loan-calc/img/favicon.ico new file mode 100644 index 0000000..d9cfded Binary files /dev/null and b/loan-calc/img/favicon.ico differ diff --git a/loan-calc/img/loading.gif b/loan-calc/img/loading.gif new file mode 100644 index 0000000..22220a2 Binary files /dev/null and b/loan-calc/img/loading.gif differ diff --git a/loan-calc/index.html b/loan-calc/index.html new file mode 100644 index 0000000..b840391 --- /dev/null +++ b/loan-calc/index.html @@ -0,0 +1,91 @@ + + + + + + + + + + + + + Loan Calculator + + +
+
+
+
+

Loan Calculator

+
+
+
+ ₹ + +
+
+
+
+ % + +
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+ + +
+ +
+ +
+
Results
+
+
+ Monthly Payment + +
+
+ +
+
+ Total Payment + +
+
+ +
+
+ Total Interest + +
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/loan-calc/js/app.js b/loan-calc/js/app.js new file mode 100644 index 0000000..c5b8d8a --- /dev/null +++ b/loan-calc/js/app.js @@ -0,0 +1,75 @@ +// all UI value + +const amount = document.getElementById('amount'); +const interest = document.getElementById('interest'); +const year = document.getElementById('years'); + +const monthlyPayment = document.getElementById('monthly-payment'); +const totalPayment = document.getElementById('total-payment'); +const totalInterest = document.getElementById('total-interest'); + +const calculateInterest = document.getElementById('loan-form'); + +const loader = document.getElementById('loading'); +const results = document.querySelector('#results'); +const card2 = document.querySelector('.card2'); + +// Show error +const showError = function(error){ + //show loader + loader.style.display = 'none'; + card2.style.backgroundColor = "transparent"; + const errorDiv = document.createElement('div'); + const card = document.querySelector('.card1'); + const heading = document.querySelector('.heading'); + + errorDiv.className = 'alert alert-danger mb-3'; + + errorDiv.appendChild(document.createTextNode(error)); + + card.insertBefore(errorDiv, heading); + + setTimeout(function(){ + document.querySelector('.alert').remove(); + },3000) +} + +// calculate function +const result = function(){ + + const principal = parseFloat(amount.value); + const calcInterest = parseFloat(interest.value) / 100 / 12; + const calcPayment = parseFloat(year.value) * 12; + + //compute monthly payment + const x = Math.pow(1 + calcInterest, calcPayment); + const monthly = (principal * x * calcInterest) / (x -1); + + if(isFinite(monthly)){ + monthlyPayment.value = monthly.toFixed(2); + totalPayment.value = (monthly * calcPayment).toFixed(2); + totalInterest.value = ((monthly * calcPayment) - principal).toFixed(2); + //hide result + results.style.display = 'block'; + //show loader + loader.style.display = 'none'; + } + else{ + showError('Input valid Amount'); + } +} + + +// calculate event listener +calculateInterest.addEventListener('submit', function(e){ + e.preventDefault(); + + card2.style.backgroundColor = "#fff"; + + //hide result + results.style.display = 'none'; + //show loader + loader.style.display = 'block'; + + setTimeout(result, 2000) +}); \ No newline at end of file