<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
#loading, #results {
display:none;
}
</style>
</head>
<body class="bg-dark">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Loan Calculator</h1>
<form id="loan-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">%</span>
<input type="number" class="form-control" id="interest" placeholder="Interest">
</div>
</div>
<div class="form-group">
<input type="number" class="form-control" id="years" placeholder="Years To Repay">
</div>
<div class="form-group">
<input type="submit" value="Calculate" class="btn btn-dark btn-block">
</div>
<div class="form-group">
<input type="submit" onclick="myFunction()" value="Reset" class="btn btn-dark btn-block">
</div>
</form>
<!-- LOADER -->
<div id="loading">
<img src="img/loading.gif" alt="">
</div>
<!-- RESULTS -->
<div id="results" class="pt-4">
<h5>Results</h5>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Monthly Payment</span>
<input type="number" class="form-control" id="monthly-payment" disabled>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Total Payment</span>
<input type="number" class="form-control" id="total-payment" disabled>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Total Interest</span>
<input type="number" class="form-control" id="total-interest" disabled>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
// app.js
// Listen for submit
document.getElementById('loan-form').addEventListener('submit', function(e){
// Hide results
document.getElementById('results').style.display = 'none';
// Show loader
document.getElementById('loading').style.display = 'block';
setTimeout(calculateResults, 2000);
e.preventDefault();
});
// Reset input
function myFunction() {
document.getElementById("loan-form").reset();
}
//
// Calculate Results
function calculateResults(){
console.log('Calculating...');
// UI Vars
const amount = document.getElementById('amount');
const interest = document.getElementById('interest');
const years = document.getElementById('years');
const monthlyPayment = document.getElementById('monthly-payment');
const totalPayment = document.getElementById('total-payment');
const totalInterest = document.getElementById('total-interest');
const principal = parseFloat(amount.value);
const calculatedInterest = parseFloat(interest.value) / 100 / 12;
const calculatedPayments = parseFloat(years.value) * 12;
// Compute monthly payment
const x = Math.pow(1 + calculatedInterest, calculatedPayments);
const monthly = (principal*x*calculatedInterest)/(x-1);
if(isFinite(monthly)) {
monthlyPayment.value = monthly.toFixed(2);
totalPayment.value = (monthly * calculatedPayments).toFixed(2);
totalInterest.value = ((monthly * calculatedPayments)-principal).toFixed(2);
// Show results
document.getElementById('results').style.display = 'block';
// Hide loader
document.getElementById('loading').style.display = 'none';
} else {
showError('Please check your numbers');
}
}
// Show Error
function showError(error){
// Hide results
document.getElementById('results').style.display = 'none';
// Hide loader
document.getElementById('loading').style.display = 'none';
// Create a div
const errorDiv = document.createElement('div');
// Get elements
const card = document.querySelector('.card');
const heading = document.querySelector('.heading');
// Add class
errorDiv.className = 'alert alert-danger';
// Create text node and append to div
errorDiv.appendChild(document.createTextNode(error));
// Insert error above heading
card.insertBefore(errorDiv, heading);
// Clear error after 3 seconds
setTimeout(clearError, 3000);
}
// Clear error
function clearError(){
document.querySelector('.alert').remove();
}
Hey thanks for the feedback. If you look into my code I modified a little bit and when you put your values into inputs, it will calculate outputs. However when you click reset button it will give the same error when you’ll not put anything into inputs you can try it.
It took me almost 4 hours to make this reset button, and I was trying to do once you click reset it will reset results box, however but for now its only reset input boxes when you click.
After calculator gives you a input values did you click reset button?
and now to try press a calculate button without putting any values it will give you warning message that you have to put some numbers into fields. My point is when you click a reset button that I’ve made it will reset all inputs but you can see that the same warning message appears if there is no value put into fields got it?
I want to hide this warning message when you press a reset button.
no when you have no values into fields the warning message is pop up its totally fine, and now try to click a reset button did you see that’s clear all inputs? Did you alsosee the same warning message is pop up?
click on reset button man what did you see?
ooh thats what I wanted I implement your code but it didn’t worked out for me.
when I remove type=“submit” & implement your code
function myFunction() {
document.getElementById(“loan-form”).reset();
document.getElementById(‘results’).style.display = ‘none’;
}
I can press and it works fine but the problem is that is hard to submit and you can edit button on code itself.
Check this out I updated my code
try to press on reset button again and you will see what I’m talking about.
next time try to help clearly with a good understanding otherwise don’t respond. Bottom line code is still not functioning and problem remain the same.
look I fixed thanks to your hint with a buttons actually
check this out try to press a reset button.