Hosted Project
https://js-beginners.github.io/mortgage-loan-calculator/GitHub Source Files
https://github.com/JS-Beginners/mortgage-loan-calculatorProject 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 usesonchange="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
- Download the source code from the github repository above.
- Delete the contents of the
loancalculator.js
file. - Implement the JavaScript code in your own
loancalculator.js file.
- 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 .
- 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
Leave a Reply