Hey yall!

Me again!

So you know how I have a problem with just taking 5 minutes on projects for this bootcamp?

 Yeah this week I did the same thing except I learned my lesson...sorta...

I figured I would separate the explanation for my bootcamp homework into a different video and then give a longer form video where I, nervously, explain my code to you all!

This week I decided to make a mortgage calculator using typescript!

Oh also, I used ChartJS to map out the data from that calculator on a easy to use graph! AAAAAND I used prismjs to show you guys my code RIGHT in the webpage!

Super cool project, and honestly the first video I made where I was nervous for some reason about explaining it?

So what did I do in this project? 

Well it's pretty simple actually, I grabbed ahold of the form element in the DOM, canceled it's default behavior, and then ran some calculations off of the data that the user sent my way! 

Then I used that data to essentially calculate all the monthly payments for the term of the loan, condensed that into a more useful size of data set, and passed it to a function that mapped it to a chartJS chart! 

Here's the code that does that! 

So that all looks pretty long and complicated but realistically it was written in such a way that it would be a little more readable to me, and I used BIG letters just to make sure that I could keep track of everything directly in the code. 

I actually just googled "how do I know my monthly mortgage payment" and that gave me the formula I needed, so that was simple enough. 

Other than that it's basic JS stuff to create an array that's the length of the loan term in months, and map to that array the year, month, interest paid, monthly principal, and remaining principal per week. 

I also adjusted the total interest paid and the remaining principal on each iteration of that loop. 

Finally I condensed the size of the array, which was honking big for a 30 year loan, into something a little more useful via the use of a utility function. That function took in the array I want to condense, and a number (n), and it returns an array where each element is the nth element of the original array! 

Here's the code for that: 

I actually wrote a test for this function because I'm still learning, "what is a good test" and I used jest to accomplish that! 

Here's the test code for that: 

Basically just confirms it's functionality and confirms that it returns the first element if n is === 1 orrrr returns an empty array if it's 0 

Other than that, I sent that array of data to chart JS to create the chart by mapping over the principal, interest, and remaining balance! 

You can see how that works visually in the video, buuuut what the code does is it takes in the HTML canvas element that ChartJS is going to use for the graph, checks to see if one exists on that, destroys it if it does, and then updates the graph with the correct Chart class as before! 

Here's the code that handles that! 

The options you have will be different for your project but that's where you will update any config for the chart itself, including adding a 3rd axis like I did! 

Anyways, I've babbled on long enough,

Let me know what you think! 

Anyways here's the code: https://github.com/barnettet31/promineo-week-9

AAAAAND here's the live site: https://barnettet31.github.io/promineo-week-9/