Mortgage Loan JavaScript Calculator

Hosted Project

https://js-beginners.github.io/mortgage-loan-calculator/

GitHub Source Files

https://github.com/JS-Beginners/mortgage-loan-calculator

Project Objective

The objective of this JavaScript Project is to wire up a very basic mortgage javascript calculator.

JavaScript Used

• Inline JavaScript
• JavaScript regular expressions

My Personalize Summary

Level of Difficulty

As stated in this project's objective, it is a very basic project that requires you to know how to retrieve values from a HTML input field. Once the values are retrieved, you'll use them to perform one calculation. The calculation is a simple interest calculation that outputs the payment amount on a mortgage, given its interest rate, principal amount, and number of months to pay. The code was pretty easy to follow. Fortunately, this project used inline JavaScript functions to call the function that computed the payment amount. I say fortunately, because it allowed me to refresh myself as to how to use inline JavaScript. While it's not hard, it's something that'll make you look at the documentation again.

New Things Learned or Refreshed

As stated in the previous section, I had to go to the MDN event handling documentation to remind myself how to use inline JavaScript to call functions that are located in an external JavaScript file. It's not hard, but it can be easy to forget the syntax when you rarely use it. For example, this project uses onchange="computeLoan()" every time an input field was manipulated. I normally use the addEventListener property in external javascript files. According to the documentation, you shouldn't use inline event handles for two reasons. One reason not to use inline JavaScript to access external JavaScript, it states, is because it's not a good idea to mix up your HTML and JavaScript. The other reason is because the larger your code, the harder it would be to maintain. Oh! The other thing this project looked at was regular expressions. I haven't spent much time and effort to learn as much as I can about regular expressions because I figured I'll learn it as I really need it. payment = payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //\B looks for a word boundary, ? says what to look for, \d looks for 3 digits in a row Other than this, the code is straight forward.

Time to Code

Since I simply followed along on this project, it took me about a half hour to listen, watch, and code out the solution.

Lines of Code

This project uses around 20 lines of JavaScript code, including white space and code comments.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the loancalculator.js file.
3. Implement the JavaScript code in your own loancalculator.js file.
4. If you think you need to see a video solution first, be sure to pick up John's Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Mortgage Loan Calculator in action.

Need to see the video solution for this project?

Get BlueLime's JavaScript for Beginners: Create 27 Projects from Scratch Course