Green Grove Mortgage: Mortgage Calculator

Start small whether in learning or building. The pieces (knowledge / functions) will start stacking. This is a culmination of knowledge gained from all previous challenges.

CHECK OUT THE APP >> HERE <<!

 

CODE EXPLANATION

Green Grove Mortgage was created with the following functions:

runMortgageCalculator is the entry point of this application. An EventListener is used to watch for the submit event and call this function. The submit event happens when the "Calculate" button is clicked. The button is of type="submit" so that all the values from the form can be grabbed as an object instead of individually grabbing the value of each element in the form.

getMortgageVariables grabs the values entered by the user as an object with Object.fromEntries. Since everything that comes to JavaScript from the HTML is a string, the properties in the object need to be changed to integers or floats using parseInt or parseFloat accordingly. If the inputs are not valid a sweet alert is used to notify the user.

calculateMortgage has mortgageVariables as a parameter which is an object with properties that have values that were entered by the user. The values are then used to calculate all the properties in the monthlyMortgageCalculation and summary objects. In order to calculate the mortgage properties for each month of term, the amortizationArray variable is created to hold an array of monthlyMortgageCalculation objects. The mortgageVariables, summary, and amortizationArray are then assigned to properties in the mortgageCalcObject so all the information related to the calculation can stay together and be easily accessed.

displayMortgageSummary takes the properties of the summary object and displays them in the "Your Monthly Payments" section of the app. Before the properties get displayed, they are formated to US dollars using Intl.NumberFormat.

displayAmortTable takes the amortizationArray which holds the monthly mortgage calculations and displays them on the page as a table. Before the properties are displayed on the page, they are formated to US dollars using Intl.NumberFormat. A template tag in the HTML is used for a row of the table to easily recreate a row based on the properties of each monthlyMortgageCalculation object in the amortizationArray.

getCalculation accesses the localStorage and gets previous mortgage calculations if there are any.

displayHistory A template tag in the HTML is used for the history card to easily recreate a card which shows the monthly payment of previous mortgage calculations along with the values entered by the user. Before the properties are displayed on the card, they are formated to US dollars using Intl.NumberFormat. Each card is assigned custom attributes that work with Bootstrap's collapse feature so that the card can be closed accordingly when the "X" button is clicked.

saveCalculation converts the object mortgageCalcsArray parameter intoJSON and assigns it to a variable in the localStorage.

deleteCalculation has a button element as a parameter. This is the close button on the history card that the user clicked to close. It then uses getCalculation to grab the current information in the localStorage and copies all the saved mortgageCalcObject objects to a new array except for the one tied to the history card that was closed. The new array is then saved to the localStorage.

WHAT I LEARNED

• Use Object.fromEntries to easily grab values from a form as an object
• Use localStorage.clear to clear the local storage or just assign the variables saved to empty values

IMPROVEMENTS

• When user clicks on history card, it populates the page fields based on the values from that card
• Button to see all past history cards
• Labeling so user knows what the icons are