1
00:00:00,720 --> 00:00:01,250
All right guys.

2
00:00:01,260 --> 00:00:06,030
Now that we have our bootstrap UI complete now we're going to start to add our Javascript.

3
00:00:06,040 --> 00:00:09,210
So first thing we want to do is listen on this submit button.

4
00:00:09,390 --> 00:00:15,590
So we're going to go ahead sort of comments in here we'll just say listen for submit.

5
00:00:15,900 --> 00:00:19,310
So we're going to say document Daut I'm going to use get element by D.

6
00:00:19,330 --> 00:00:27,080
But you could just as well use queery selector and that form has an ID of little loan for.

7
00:00:27,090 --> 00:00:33,080
All right we want to add an event listener We want to listen for us submit.

8
00:00:33,090 --> 00:00:40,220
And then once that is submitted we want to call a function called calculate results.

9
00:00:40,710 --> 00:00:41,240
OK.

10
00:00:41,310 --> 00:00:43,170
So now we want to create that function

11
00:00:52,030 --> 00:00:58,300
and we want to pass in our event parameter here and since it's a form submit we want to prevent the

12
00:00:58,300 --> 00:00:59,900
default behavior.

13
00:01:00,100 --> 00:01:03,450
So we'll say prevent default.

14
00:01:03,470 --> 00:01:04,200
All right.

15
00:01:04,330 --> 00:01:13,870
And then just to test it out to console Daut log I am just going to say calculating.

16
00:01:13,900 --> 00:01:19,500
All right so now if I go over here and hit F 12 over my console and hit the button we get calculating.

17
00:01:19,910 --> 00:01:25,030
OK so now we want to do is we want to grab all the stuff from the UI that we need so we're just going

18
00:01:25,030 --> 00:01:27,950
to say UI variables.

19
00:01:28,330 --> 00:01:33,800
So we're going to need all of these form fields so they all have IDs.

20
00:01:34,030 --> 00:01:39,120
So we're going to use get element by D.

21
00:01:39,400 --> 00:01:42,210
So let's grab a mount.

22
00:01:43,270 --> 00:01:44,970
Whoops forgot to name the variable.

23
00:01:44,990 --> 00:01:47,260
So costs amount equals.

24
00:01:47,320 --> 00:01:50,500
Now it's up to you how you want to name your variables.

25
00:01:50,530 --> 00:01:58,070
A lot of times people will do something to signify that this is part of the UI.

26
00:01:58,070 --> 00:02:02,830
So what I what I do sometimes is just put UI in front of them like this.

27
00:02:02,830 --> 00:02:09,460
Now I'm trying to stay away from personal and personal preference and conventions that I use because

28
00:02:09,760 --> 00:02:15,610
it's personal to me and I don't know if you guys want to use it so I try and keep things very generic

29
00:02:15,850 --> 00:02:19,750
in terms of convention and patterns and stuff like that.

30
00:02:20,020 --> 00:02:26,100
Some people will use a dollar sign usually that's that's when you use query just to show that it's a

31
00:02:26,300 --> 00:02:31,760
query variable but you can also use it like this just because it's part of the DOM.

32
00:02:31,780 --> 00:02:38,940
Some people use l like E L for element or put it at the back like Al or something like that.

33
00:02:39,130 --> 00:02:42,060
All right but we're just going to use just generic names.

34
00:02:42,460 --> 00:02:43,870
So we have the amount.

35
00:02:43,870 --> 00:02:48,400
We're also going to want the interest.

36
00:02:50,010 --> 00:02:54,670
So there's an idea of interest.

37
00:02:55,080 --> 00:02:59,510
We also want the years.

38
00:03:01,860 --> 00:03:02,180
All right.

39
00:03:02,180 --> 00:03:05,070
So these three these three fields right here.

40
00:03:05,250 --> 00:03:05,490
All right.

41
00:03:05,490 --> 00:03:17,960
We also want these fields so we have one called monthly payment monthly dash payment.

42
00:03:18,240 --> 00:03:22,170
So we'll call this variable monthly payment

43
00:03:25,370 --> 00:03:27,530
we have total payment

44
00:03:37,710 --> 00:03:41,090
and we have total interest.

45
00:03:47,410 --> 00:03:52,810
So now that we have all of our UI variables we want to actually do the calculations.

46
00:03:52,810 --> 00:03:53,130
All right.

47
00:03:53,140 --> 00:03:57,420
So this is what I had to actually look up some of these calculations.

48
00:03:57,550 --> 00:04:02,860
Some of them I really don't understand but I'm just basically putting the formulas that I looked up

49
00:04:03,160 --> 00:04:04,750
into code.

50
00:04:04,750 --> 00:04:05,110
All right.

51
00:04:05,110 --> 00:04:07,720
So first thing we'll do here is create a principal

52
00:04:10,450 --> 00:04:13,240
now principal is actually the the amount.

53
00:04:13,240 --> 00:04:17,230
This right here except this is just pointing to the input.

54
00:04:17,410 --> 00:04:20,960
We need the values so we're going to say conc principal.

55
00:04:20,980 --> 00:04:24,650
Now not only do we want it as the value but we want it as a float.

56
00:04:24,730 --> 00:04:28,330
OK as a decimal So we're going to run it through parse float.

57
00:04:28,340 --> 00:04:29,750
Remember that.

58
00:04:30,090 --> 00:04:32,470
That'll turn it into a decimal.

59
00:04:32,500 --> 00:04:38,240
So we want to pass an amount Daut value.

60
00:04:38,440 --> 00:04:43,350
OK we're taking a mount which is this input field and we're getting the value.

61
00:04:43,450 --> 00:04:47,360
We're turning it into a decimal form.

62
00:04:47,530 --> 00:04:54,570
We also want to create a variable here called calque calculated interest.

63
00:04:56,030 --> 00:04:56,590
OK.

64
00:04:56,590 --> 00:05:01,800
So this is going to be the interest value as a float.

65
00:05:01,870 --> 00:05:02,960
So Parslow

66
00:05:05,330 --> 00:05:13,510
interest value so whatever's put in that form and then we want to divide by 100 and divide by 12.

67
00:05:13,840 --> 00:05:14,150
All right.

68
00:05:14,160 --> 00:05:16,960
That'll give us our calculated interest.

69
00:05:16,960 --> 00:05:19,480
Now we also want the calculated payments

70
00:05:23,010 --> 00:05:30,830
right so calculated payments is going to be the year's wrapped in parce float.

71
00:05:32,140 --> 00:05:38,380
So years dot value and then we just want to time it by 12.

72
00:05:38,380 --> 00:05:38,680
All right.

73
00:05:38,680 --> 00:05:43,840
So this gives us the principle the calculated interest and the calculated payments.

74
00:05:43,840 --> 00:05:50,130
Now we want to compute the monthly payments.

75
00:05:51,100 --> 00:05:51,520
All right.

76
00:05:51,520 --> 00:05:55,170
So for that I'm going to create a variable called X.

77
00:05:55,330 --> 00:06:04,840
We're going to set this to Maff Daut POW which gives us a power and then we're going to say one plus

78
00:06:05,860 --> 00:06:08,310
calculated interest.

79
00:06:08,860 --> 00:06:13,650
And then the second parameter here will be calculated payments.

80
00:06:13,660 --> 00:06:13,980
All right.

81
00:06:13,980 --> 00:06:24,820
So this formula here we want to take and then we want to create another variable called monthly and

82
00:06:24,820 --> 00:06:26,340
we want to set this to.

83
00:06:26,410 --> 00:06:35,530
We're going to put some parentheses here for order of operations and then say principal times whatever

84
00:06:35,530 --> 00:06:40,630
that x value is Times calculated interest.

85
00:06:40,630 --> 00:06:41,080
All right.

86
00:06:41,110 --> 00:06:46,570
And then we want to go outside of the parentheses and we want to divide set another set of parentheses

87
00:06:46,600 --> 00:06:50,610
and say X minus 1 just like that.

88
00:06:50,620 --> 00:06:54,730
All right so that is going to give us our monthly payment.

89
00:06:54,730 --> 00:07:01,540
Now once it does this calculation we want to check to see if this monthly value is actually a finite

90
00:07:01,570 --> 00:07:02,260
number.

91
00:07:02,440 --> 00:07:06,810
OK and there's a method in javascript we can use called is finite right.

92
00:07:06,820 --> 00:07:09,700
So that's what we're going to use to do our validation.

93
00:07:09,700 --> 00:07:12,010
So we're going to put in if else here.

94
00:07:14,150 --> 00:07:21,750
So we're going to say if is finite and we're going to wrap Montfleury.

95
00:07:22,090 --> 00:07:22,470
OK.

96
00:07:22,490 --> 00:07:28,960
So if it's finite then what we want to do is just display our results in these fields.

97
00:07:28,970 --> 00:07:31,940
So remember this one here monthly payment has an ID.

98
00:07:31,940 --> 00:07:38,570
Up here we said it's a monthly payment so we'll say monthly payment value that's how we insert something

99
00:07:38,660 --> 00:07:42,290
in that field and we're going to set it to monthly.

100
00:07:42,290 --> 00:07:42,580
All right.

101
00:07:42,590 --> 00:07:49,280
Now we want this to have decimal points and remember numbers have a method called to fixed where you

102
00:07:49,280 --> 00:07:51,650
can set the number of decimals that you want.

103
00:07:51,650 --> 00:07:52,920
And we want to.

104
00:07:53,380 --> 00:07:54,350
OK.

105
00:07:54,500 --> 00:07:57,060
Next thing we're going to want is the total payment value.

106
00:07:57,060 --> 00:08:06,020
So this this right here so we're going to say total payment daat value and we want to set that to a

107
00:08:06,020 --> 00:08:07,160
set of parentheses.

108
00:08:07,160 --> 00:08:09,290
And then in here we're going to say monthly.

109
00:08:09,560 --> 00:08:13,250
So we want to take monthly times the calculated payments.

110
00:08:13,760 --> 00:08:14,200
OK.

111
00:08:14,250 --> 00:08:16,120
Monthly Times calculated payments.

112
00:08:16,130 --> 00:08:18,580
And then we also want our two decimal places.

113
00:08:18,590 --> 00:08:24,490
We're going to say to fix it and then pass in passing that too.

114
00:08:24,590 --> 00:08:27,170
So that will give us our total payment.

115
00:08:27,170 --> 00:08:32,240
All right the last thing we want is the total interest.

116
00:08:32,440 --> 00:08:39,990
So let's say total interest value equals and then in here we're going to set some parentheses.

117
00:08:40,090 --> 00:08:45,700
We're going to set another set of parentheses for the order of operations and we want to do monthly

118
00:08:47,300 --> 00:09:00,550
ups so want monthly times the calculated payments right and then we want it minus the principal.

119
00:09:00,550 --> 00:09:00,900
All right.

120
00:09:00,910 --> 00:09:10,170
So say minus principal Okay and then we just want that to fix it because we want our two decimal places.

121
00:09:11,050 --> 00:09:11,440
OK.

122
00:09:11,440 --> 00:09:19,590
So that should do it now in the else if this isn't finite That means that something went wrong something

123
00:09:19,600 --> 00:09:23,370
you know they didn't enter enough info or something like that.

124
00:09:23,590 --> 00:09:24,980
We're going to want to show that era.

125
00:09:25,000 --> 00:09:33,580
But for now we're just going to console log and I will say I don't know I'll just say Please check your

126
00:09:33,580 --> 00:09:34,690
numbers.

127
00:09:34,690 --> 00:09:37,960
Obviously we want this to show in the UI not the log.

128
00:09:37,960 --> 00:09:40,170
But just for now just to test things out.

129
00:09:40,330 --> 00:09:44,390
We're going to do it this way so let's go ahead and save and let's try it out.

130
00:09:44,380 --> 00:09:48,360
So let's say a loan amount for let's say five thousand.

131
00:09:48,970 --> 00:09:56,650
Interest will say 5 percent years to repay one year calculate and there we go.

132
00:09:56,680 --> 00:09:59,140
So that seems to be right.

133
00:09:59,200 --> 00:10:06,250
So our monthly payment would be for 28 0 for total payment would be this and then total interest of

134
00:10:06,250 --> 00:10:13,240
course if it's an initial loan of five thousand and then we're paying back 1 5 1 3 6 4 5.

135
00:10:13,240 --> 00:10:16,390
Obviously the interest is 1 3 6 4 5.

136
00:10:16,390 --> 00:10:19,690
All right so our calculations seem to be working correctly.

137
00:10:20,050 --> 00:10:26,950
Now we want to do is display an error if things don't work correctly so if we were to just say calculate

138
00:10:27,020 --> 00:10:28,090
you'll see down here we get.

139
00:10:28,090 --> 00:10:30,780
Please check your numbers because this is running.

140
00:10:30,790 --> 00:10:33,660
But we want to display a nice error.

141
00:10:33,790 --> 00:10:41,170
Now there is a few ways you could do this you could just put the div inside here and hide it initially

142
00:10:41,200 --> 00:10:42,550
and then just show it.

143
00:10:42,610 --> 00:10:43,610
But we're going to do.

144
00:10:43,600 --> 00:10:51,640
We're going to use the Create element method from the document object and we're going to just basically

145
00:10:51,640 --> 00:10:58,000
build the alert from javascript rather than just showing it which I think is a better way to do things

146
00:10:58,030 --> 00:11:00,220
and it's all stuff that we've already learned.

147
00:11:00,220 --> 00:11:04,370
All right so what we'll do here is call a function called show error.

148
00:11:04,690 --> 00:11:07,870
We're going to build a custom function and that'll take in a message.

149
00:11:08,080 --> 00:11:19,060
So our message will be check would say please check your numbers and then down here will create that

150
00:11:19,060 --> 00:11:20,160
function.

151
00:11:20,530 --> 00:11:21,840
All right so our down here

152
00:11:29,490 --> 00:11:29,780
right.

153
00:11:29,780 --> 00:11:37,080
So show error that's going to take in a parameter of an error and then first thing we'll do is create

154
00:11:38,670 --> 00:11:39,290
a div.

155
00:11:39,300 --> 00:11:52,200
So we'll say Konst Let's call this error or div and we'll set this to document Daut create element and

156
00:11:52,200 --> 00:12:00,570
the element we want to create is a div now in Bootstrap when you want to show an alert you want to give

157
00:12:00,570 --> 00:12:05,540
it a class of alert as well as alert dashed danger which will make it red.

158
00:12:05,730 --> 00:12:10,900
So I would say add class so will say error.

159
00:12:11,290 --> 00:12:16,370
Divide Daut class name.

160
00:12:17,070 --> 00:12:23,460
And we're going to set that to alert and alert dash danger.

161
00:12:23,470 --> 00:12:26,110
All right so next thing we want to do is add the text.

162
00:12:26,160 --> 00:12:34,390
So we're going to say create text node and append to Divx.

163
00:12:34,530 --> 00:12:37,140
So we're going to say error Divx

164
00:12:40,310 --> 00:12:46,290
error or div Daut and then we want to append child.

165
00:12:46,290 --> 00:12:53,040
We want to insert something into it and we want to create a text node so we say document Daut create

166
00:12:53,170 --> 00:12:58,200
a text node and then the text is going to be whatever the text is passed in here.

167
00:12:58,200 --> 00:12:59,360
So error.

168
00:12:59,750 --> 00:13:00,810
All right.

169
00:13:01,200 --> 00:13:09,150
Now we want to insert this into our into the dorm so I'm going to grab two elements right here and say

170
00:13:09,180 --> 00:13:10,840
Get elements.

171
00:13:10,920 --> 00:13:18,210
So we want the card as the parent div and then we're going to want to put it before this heading right

172
00:13:18,210 --> 00:13:20,190
here so we want that heading as well.

173
00:13:20,190 --> 00:13:35,080
So let's say Konst card and say document Daut queries selector has a class of card and then we also

174
00:13:35,080 --> 00:13:39,410
want the heading call this heading we'll set it to document dot

175
00:13:42,470 --> 00:13:47,590
queries Lechter and that has a class of heading.

176
00:13:48,410 --> 00:14:03,500
OK so now what we want to do down here is we want to insert error above heading so we do that by taking

177
00:14:03,500 --> 00:14:08,650
the parent which is the card and then we want to call insert before.

178
00:14:08,690 --> 00:14:10,880
OK I don't think we went over this method.

179
00:14:11,140 --> 00:14:19,580
Well it does just that if you call it on on a parent and then you pass in the element you want to put

180
00:14:19,580 --> 00:14:25,730
in which is the error div and then you also want to put in whatever you want to insert before in this

181
00:14:25,730 --> 00:14:27,010
case the heading.

182
00:14:27,140 --> 00:14:27,750
OK.

183
00:14:29,890 --> 00:14:30,940
Now this should work.

184
00:14:30,940 --> 00:14:32,730
So let's let's actually try it out.

185
00:14:32,800 --> 00:14:37,330
So if we go ahead and click calculate with no fields please check your numbers.

186
00:14:37,330 --> 00:14:42,860
Now I don't think it's a good user experience to leave this here like this.

187
00:14:42,880 --> 00:14:45,410
So that they go back and they enter the numbers.

188
00:14:45,490 --> 00:14:48,930
I want this to go away after a certain amount of time.

189
00:14:48,970 --> 00:14:55,750
So in Javascript in the window object we have a method called Set time out where we can have something

190
00:14:55,750 --> 00:14:58,630
happen after a certain amount of seconds.

191
00:14:58,630 --> 00:15:07,600
So what we're going to do here is we'll say clear error after Let's do three seconds.

192
00:15:07,840 --> 00:15:12,340
So to do this we just call set time out.

193
00:15:13,220 --> 00:15:15,490
And I said time out it takes in.

194
00:15:15,640 --> 00:15:21,520
It's going to take in two parameters one is going to be a function we could write out function like

195
00:15:21,550 --> 00:15:25,050
this or we could call a named function which is what I'm going to do.

196
00:15:25,050 --> 00:15:29,980
I'm going to create one called clear error and we want that to happen three seconds.

197
00:15:29,980 --> 00:15:34,070
Now I'm putting 3000 here because it's actually milliseconds.

198
00:15:34,150 --> 00:15:37,530
So 3000 milliseconds is three seconds.

199
00:15:37,540 --> 00:15:37,910
All right.

200
00:15:37,930 --> 00:15:41,200
And then we're just going to create that clear error.

201
00:15:45,150 --> 00:15:51,500
Which is going to be very very simple just one line we're just going to say document Daut queries selector.

202
00:15:51,990 --> 00:16:00,730
And we want to grab the element with the class of alert and we want to remove it.

203
00:16:01,230 --> 00:16:09,760
So let's go ahead and save and let's say calculate three seconds goes by and it disappears.

204
00:16:10,090 --> 00:16:10,330
All right.

205
00:16:10,330 --> 00:16:15,810
So our calculations are working let's just test it one more time say 10000.

206
00:16:16,240 --> 00:16:21,220
Let's say we'll do 10 percent with one year to repay.

207
00:16:21,220 --> 00:16:21,480
All right.

208
00:16:21,490 --> 00:16:27,850
So monthly payment would be 879 total payment would be this interest good.

209
00:16:28,090 --> 00:16:29,640
So our calculation works.

210
00:16:29,650 --> 00:16:34,940
The error message works in the next video we're going to work on the user experience.

211
00:16:34,960 --> 00:16:41,950
So we want this to be hidden initially and then we want that spinner graphic to show for a couple of

212
00:16:41,950 --> 00:16:44,460
seconds and then we want this to show.

213
00:16:44,650 --> 00:16:47,230
All right so that's what we'll do in the next video.