<!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();
}
I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
That is a lot of code you posted. It might be easier if you put all of this into Codepen, JSFiddle or the equivalent so if you make any changes based on our help, we can see the results immediately without you having to repost your code to the thread each time.
Also, can you describe exactly what you mean by get rid of an error message when click on reset button? What error specific error message are you talking about? Explain how I can duplicate the problem you are seeing.
After experimenting with your calculator I assume I found what you do not want.
If you remove the type=“submit” from the reset input and change your myFunction code to the following, I believe that will fix the issue for you.
function myFunction() {
document.getElementById("loan-form").reset();
document.getElementById('results').style.display = 'none';
}
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.
Again, if you are going to keep changing the code, please put it into Codepen, so that I do not have to keep copying/pasting into my own editor for testing purposes.
I will wait for a link before making additional comments about your project.
Thank you.
Thank you. Give me a few minutes to test what you said out.
This is pretty much the same code as before, but you did not implement what I showed you above. If you implement my suggestion, you can click on Reset with the input elements empty or with values and the error message will not display.
I may be misunderstanding what you have described, but first try making the changes I suggested into the Codepen and then let me know what issue you are still having. I am just not seeing the error message again after my suggestions are implemented.
The only time I see the error message and should see it is if I click on the Calculate button with nothing entered in the fields.
After calculator gives you a input values did you click reset button?
Yes and once I do, the top inputs reset to empty and the result section rolls up and there is no error message displayed.
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.
So if the user clicks Calculate without entering any values in the fields, what exactly do you want to see or not see happen? I think it is good that the error message displays when a user clicks the Calculate button when there are no values, but that is just my opinions I guess.
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?
No I do not, because I implemented the code changes I gave you earlier which prevents that from happening.
click on reset button man what did you see?
You will see in the video below that I first entered values in the loan calculator and clicked Calculate. The results appear below the reset button and then I clicked Reset and the form elements clear out and the results section is hidden. Finally, you will see me click on the Reset button 3 more times after the form has been cleared and there is no error message displayed. I do not understand why you think there should be any error message displaying based on what I have done here.
If I did not enter or click something as you were expecting me to, I suggest you make a video, so I can see the exact steps you want me to take.
ooh thats what I wanted I implement your code but it didn’t worked out for me.
Update the Codepen with the code suggestions I made earlier, so I can see what you did.
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.