Welcome back! How did you do with the homework from last week? I hope you were able to implement that date functionality for the table. This week we will cover how to set up an alert, which we will later stylize with Bootstrap. So, we won’t be adding too much code to our JavaScript file this week. However, I do want to cover some of the developer tools that you can use to set breakpoints and step through your code to assist you when it comes time to debug an error. So, let’s start.

In your Amortization.html file we want to put in a place holder for our alert that we want to create when our JavaScript runs. To do this, we will add a div tag at the bottom of our document directly under the output table tag. Set the id attribute of this tag to totals. Now, we can start adding some code to our JavaScript file.

Can you pick out the differences between the code below and the code from last week? Notice, that beginning at line 12, we are adding two new variables to keep track of the total payback and total amount of interest paid for the life of the loan. Next, at line 20, we are referencing the div tag from our html document. On line 26, we are doing the same thing that we did with the table. We are clearing it out in case the user is recalculating the table and totals. Within the case 3 and case 4 statements located between lines 67 and 74, we add a couple statements that will increment our total variables. Every time a payment is made, we will add that amount to the totalPayments variable. Similarly, every time a payment is made, the interest of that payment is added to the totalInterest variable. Lastly, on line 95, we add a statement uses the string concatenation operator to tell the user both of the calculated totals.

Now, let’s learn a little about debugging. Go ahead and open your Amortization.html file using Google Chrome. Click on the three dots in the upper right-hand corner of the browser. Then navigate to More tools -> Developer tools. Now, while in the Sources menu, in the left-hand pane click on your app.js file. Notice, that you can see every line of your JavaScript file that you have been working on. To the left of your code, you will see line number (just like in VS Code).  Click on line number 61, where we are incrementing the totalPayments variable. This will set what is known as a breakpoint on your code. So, when your code executes, it will pause when it reaches this line of code. The power with breakpoints comes from our ability to interrogate our code while it is paused. Below the open JavaScript file you should see a pane the says Scope and Watch. Click Watch. Click on + and type in totalPayments.

Now, on the webpage enter in 200,000 for the Loan Amount, 5 for the Interest Rate, and 30 for the Loan Term. Now click the calculate button. Notice that the code began to execute and created the headers for our table. Look at the totalPayments variable inside your Watch window. Notice that it is set to 0. Now hover over the monthlyPayment variable on the line that is paused. Notice, that when you hover over the variable a pop-up shows that the value is set to “1073.64”. To the left of your Watch window, you will see a play/pause button. Next to that button is a downward  arrow. If you hover over this arrow it says “Step into next function call”. Click on the arrow. Look at your variable in the Watch window. Notice that it has incremented, and now says 1073.64. Now, click the play button to resume code execution. Notice that the debugger has paused again at the same breakpoint. This is because we are executing within a for loop. Thus, every pass through the loop it will pause on line 61. Step into the function again. Notice how the variable totalPayments has incremented again and is now set to 2147.28. Click on line 61 again, which will take the breakpoint off of this line. Click the play button to resume execution. Now, the rest of the code executes and creates your table. Pretty cool stuff, right?

Chrome Dev Tools has so much more to offer than what I have shown here. Mess around with the tool and see what you can learn. I suggest using it to look at the DOM and your HTML as well. Feel free to post any questions you have in the comments section below. Next week, we will finish our generator by applying some styling to the page to make it look nice. Remember to like this post and share on your favorite social media platform. Thanks for stopping by and I will see you again next week.

One comment

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