Welcome back! Last week we learned how to set up VS Code and create our HTML document that will be used to create our Amortization Table. This week, we will be creating the JavaScript that will execute on the client side once they enter in the loan information and click the Calculate button. By the end of this tutorial, you will have a fully functioning site that will show the amortization schedule for a loan. However, it will look rather basic since we have not styled the page yet. This is key, because, you want to have the site working properly before you begin to add the flare that will make for a nice UI. Next week, we will add some more JavaScript to increase our app’s functionality and then the following week we will style the page.

So, let’s begin by creating the JavaScript file. In VS Code, while in your Amortization directory that we created last week, click the button in the Explorer pane to add a new file to this directory. Name the file app.js, which will create a JavaScript file for us to work with. Now, we are going to use an external js file. This technique allows us to have a separation of concerns among our different code files which is considered a best practice. So, in order to access this file in our HTML, we need to create a script tag that will have our js file as the source. Create a script tag  in between the opening and closing head tags. Now, set the type attribute equal to “text/javascript” and the src attribute equal to “../Amortization/app.js”. The script tag will tell the browser to looks up one level from the current folder, then looks in the Amortization for a file named app.js, which we just created. Now, click back over to the JavaScript file and we will begin writing some code.

The first thing we want to do is create a function named btnCalculate_click. Remember, that in our HTML we called this function name in the onclick attribute of the btnCalculate button. This essentially ties our JavaScript and HTML together. Next, we need to create some variables to house the info that the user has input into the app. When a user types some input into the page, they are essentially typing in a string of characters. However, we need to convert this input into a floating point data type. Thus, we use the parseFloat method to achieve this action. The document.querySelector is a method in JavaScript that allows us to find the first element on a page. We can query by element type, element class, or, in our case, the element id. The method knows to look for the id of the element, because the name follows the hash symbol. Calling the toFixed method returns a floating point number to the number of decimal places of the argument passed. Next, we need to calculate the monthly payment of the loan using the formula whose link is provided in the comments.
Now, we want to create a place to house our table headers, which will be at the top of each column. I am housing these items in an array for two reasons. One, arrays are iterable, which will allow me to loop over each element and append it to our table. Second, it allows for an easy way to add columns later which is something I will have you do later. Next, notice that we create another variable that looks that references the table with the id of output in our HTML document. In case our user wants to check multiple loan combinations, it is important to clear out the table each time the user clicks the button. Otherwise, the user will end up with multiple tables stacked on one another. On lines 22-26, we use the createElement method to dynamically create HTML elements for our table.
Now, let’s create those table headers.  On line 29, we use the array forEach method to loop over the elements of our array.  With each pass, we are creating a table header element, using the createTextNode method  and the appendChild method to add the column name to the table header, and then add the header to the table row.  After the forEach loop has executed on all items in our array, we then append the the row to the table’s head element and the head element to the table itself.
Now that we’ve created the column headers, we now have to add all the following rows that will show the entire amortization schedule. Here, we are using nested for loops. The first for loop will created the rows, and the next creates the cells. Now, we want each cell to show different information to the user. Some fields will be calculated each pass through the for loop (principal), while others will remain the same (monthlyPayment). To accomplish this task, I used a select case statement that will look at which cell we are on, conduct the necessary calculation, and append it to the row. Line 74 will execute for every cell and append that cell to the current row. Line 78 will execute for every row and append the current row to the table body. After all of the loops have executed, line 82 will append the body (which now contains all the cells and the rows) to the table. And viola, you now have an amortization table generator. Run the HTML document in Chrome, input some values and watch the table be dynamically created.  Next week, I will show how to use the Chrome dev tools to debug our code.
For now, I have a little homework assignment for you. Remember, that I said I created my columns in an array so that I could more easily add more if needed. Well, we need to add a column. It appears that our users want to see the dates that each payment will be due. Add a column that will show the first payment due today and subsequent payments due every month on the same day. To accomplish this task you will find the Date method and the setMonth method of importance. You will also need to add another case statement to account for the additional column.
Next week, we will add some more functionality to our JavaScript that will create an alert and display some totals for the user. For instance, the user may want to know what the total payback is for the loan and the total interest paid over the life of the loan. We will also cover the use of Chrome dev tools. I look forward to seeing you here again next week. Remember to share this post on your favorite social media platform by clicking one of the buttons below. Until next time, keep on programming.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s