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, 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.