1
00:00:00,510 --> 00:00:01,580
Hello and welcome.

2
00:00:01,590 --> 00:00:08,790
In this video we are going to create the logic that or make the loan calculator work.

3
00:00:09,420 --> 00:00:16,370
So let's create a new file that we will use to write our javascript code.

4
00:00:16,410 --> 00:00:18,160
So this is our page CML.

5
00:00:18,150 --> 00:00:24,990
I'm just going to click on the file option here and click on new file and I'm going to save this file

6
00:00:25,250 --> 00:00:30,090
to save as inside the directory called Zone calculator.

7
00:00:30,530 --> 00:00:40,530
And when you save these as loan calculator dot G S and make sure the dropdown.

8
00:00:40,650 --> 00:00:49,670
I'm going to select javascript safe so any code that idea now will be a javascript code.

9
00:00:49,970 --> 00:00:57,030
O K through the function I'm going to create I'm going to call it compute loan because I've already

10
00:00:57,120 --> 00:01:00,990
made references to it here inside my hasty AML code.

11
00:01:01,650 --> 00:01:11,790
So are typing the word function to create a function you do function space followed by the name of the

12
00:01:11,790 --> 00:01:19,220
function and the function is going to be called compute loan.

13
00:01:19,250 --> 00:01:25,980
Notice I've used camel case which means the first letter is lowercase and the first letter of the next

14
00:01:25,980 --> 00:01:28,260
word is uppercase.

15
00:01:28,290 --> 00:01:32,510
And next I need to place parentheses.

16
00:01:32,880 --> 00:01:40,920
And then curly braces are now separate the curly braces in between the curly braces is where I will

17
00:01:41,280 --> 00:01:49,500
add the logic for the loan first and I want to do I'm going to add some variables.

18
00:01:49,500 --> 00:01:53,770
So let me run through the variables with you on Line 3.

19
00:01:53,850 --> 00:01:57,450
I've created a variable called amount.

20
00:01:57,450 --> 00:02:01,170
This would be this will represent the amount of loan that you want to borrow.

21
00:02:01,800 --> 00:02:10,710
And I'll set it to equal to document to get element by a deep and a path theme the I.D. of amount.

22
00:02:10,710 --> 00:02:15,700
If you're wondering where you got this idea for values from is from the hasty melon side of things.

23
00:02:15,700 --> 00:02:18,720
So here we've got an idea called amount.

24
00:02:18,930 --> 00:02:21,730
So that's what I'm referring to here.

25
00:02:21,810 --> 00:02:29,040
And then the dot value basically refers to the value that you would input as the amount.

26
00:02:29,040 --> 00:02:30,280
Line 4.

27
00:02:30,360 --> 00:02:37,110
I've got a variable caught interest on the score rate and I'll set that to equal to the document or

28
00:02:37,110 --> 00:02:38,970
get element by a D.

29
00:02:39,630 --> 00:02:42,630
And the idea is interest on the score rate.

30
00:02:42,690 --> 00:02:49,770
So whatever value we have as the interest rate is going to grab that 2 again if I go into my hate mail

31
00:02:49,780 --> 00:02:51,470
can see we've got an idea.

32
00:02:51,480 --> 00:02:54,350
Caught interest on the score rate.

33
00:02:54,450 --> 00:02:56,620
That's what he's referring to.

34
00:02:56,970 --> 00:02:57,730
Line 5.

35
00:02:57,750 --> 00:03:00,380
I've got a variable called months.

36
00:03:00,390 --> 00:03:05,310
Again this is equal to the document don't get element by a T.

37
00:03:05,850 --> 00:03:08,180
And the idea is months.

38
00:03:08,220 --> 00:03:16,520
Can we add any value that it's entered for that value for that month or be attached to the variable.

39
00:03:16,590 --> 00:03:21,150
So if we come here a game we've got an I.D. code months.

40
00:03:21,150 --> 00:03:26,880
That's what he's referring to here we've got a variable called interest.

41
00:03:26,880 --> 00:03:30,270
So this is going to represent the actual interest.

42
00:03:30,270 --> 00:03:39,030
So the interest on the loan is going to be the amount which it is a man variable times the interest

43
00:03:39,120 --> 00:03:41,870
on the score rate times 0 1.

44
00:03:41,910 --> 00:03:49,740
Any time you have values surrounded by parentheses the old values are computed first.

45
00:03:49,740 --> 00:03:58,750
So it will do the interest rate times 0.01 first before the division and the multiplication.

46
00:03:58,770 --> 00:03:59,460
Okay.

47
00:03:59,640 --> 00:04:10,480
So the point one basically gives it a two decimal places so to have two decimals after the figure lines

48
00:04:10,540 --> 00:04:14,130
seven here I've got a variable called payment.

49
00:04:14,130 --> 00:04:17,280
And this variable is gonna be caused to the amount.

50
00:04:17,280 --> 00:04:22,490
This will represent the monthly payment that the loan borrower have to pay.

51
00:04:22,830 --> 00:04:28,920
So it's going to be equal to the amount divided by the month's plus the interest.

52
00:04:28,920 --> 00:04:31,530
And then here we attach attaching to fixed method.

53
00:04:31,530 --> 00:04:40,050
Basically this enables you to have two decimal places or two numbers after the decimal place.

54
00:04:40,050 --> 00:04:48,990
That's what that is for next we're going to add a line of code that will be ripped rip responsible for

55
00:04:48,990 --> 00:04:54,810
putting commas on numbers for three digits.

56
00:04:54,810 --> 00:05:01,670
So it will look trigger value and then place a comma after every three digit so I'm gonna try and explain

57
00:05:01,700 --> 00:05:04,890
this line aid as much as I can here.

58
00:05:05,060 --> 00:05:11,620
The payment basically here is going to equals to the payment to string.

59
00:05:11,610 --> 00:05:17,080
Basically converting the value to string and then we replace it.

60
00:05:17,090 --> 00:05:23,720
This is where it's going to convert it into a money format then convert the format format into money

61
00:05:24,230 --> 00:05:30,240
and you're doing that using this replace method and inside the replace method here we've got these values.

62
00:05:30,320 --> 00:05:35,660
I'll try and explain these as much as I can this slash B here.

63
00:05:35,660 --> 00:05:43,020
Basically is used to look within a word boundary.

64
00:05:43,020 --> 00:05:48,950
And what that means is that it can't be part of another type of work.

65
00:05:49,020 --> 00:05:50,810
It has come of a pattern.

66
00:05:50,810 --> 00:05:52,200
It has to look for.

67
00:05:52,370 --> 00:06:03,530
And then this here this question mark basically the question mark on the equals two tells it to find

68
00:06:04,460 --> 00:06:07,430
what our group is looking for.

69
00:06:07,430 --> 00:06:16,010
For example a to look for is using these these last three here to look for three digits so it to look

70
00:06:16,010 --> 00:06:27,530
for any three digits in a row and then place a comma that the plus this plus basically marks the three

71
00:06:27,530 --> 00:06:38,300
digits wrapped in parentheses to make sure that is treated as a block of three so basically helps to

72
00:06:38,810 --> 00:06:40,580
repeat the pattern.

73
00:06:40,580 --> 00:06:45,020
So he knows where to place the comma after every three digits.

74
00:06:45,020 --> 00:06:49,880
I've added another block another line of code line line here.

75
00:06:49,890 --> 00:06:55,340
Line name basically is going to be responsible for displaying the output.

76
00:06:55,340 --> 00:07:01,940
So he's going to say document we're using the document to get element by a method and we are grabbing

77
00:07:01,970 --> 00:07:04,380
the I.D. which is this.

78
00:07:04,380 --> 00:07:06,290
Here this idea here.

79
00:07:06,530 --> 00:07:07,640
This page to tag.

80
00:07:07,940 --> 00:07:09,050
So he's going to grab that.

81
00:07:09,050 --> 00:07:16,280
This is where it will inject the result of the computed loan repayment.

82
00:07:16,820 --> 00:07:24,860
So it will grab that and it will replace that div the contents of it with this dot in a hasty AML.

83
00:07:24,950 --> 00:07:28,790
And the value of this in our hate mail is this here.

84
00:07:28,790 --> 00:07:33,750
So it will now output inside the DB here.

85
00:07:33,770 --> 00:07:37,920
It will output the word monthly payment.

86
00:07:38,000 --> 00:07:44,810
It would then give the value of the monthly payment which is going to be in dollars plus the payment.

87
00:07:44,810 --> 00:07:45,140
Okay.

88
00:07:45,170 --> 00:07:46,200
So that's what it's going to do.

89
00:07:46,200 --> 00:07:55,430
So I'm just going to save that to the file and save all and I'll go into my directory which is this

90
00:07:55,840 --> 00:08:03,170
and just double click on the loan calculator dot hash tag AML to run the application.

91
00:08:03,170 --> 00:08:05,380
So let's quickly test it.

92
00:08:05,390 --> 00:08:07,430
Let's say I want to borrow ten thousand.

93
00:08:07,430 --> 00:08:13,700
You can either input the value or you can use this little hand goes here to move it forward.

94
00:08:13,700 --> 00:08:22,850
So I'm going to put in 10000 and let's say the interest rate on that is 10 percent let's say I want

95
00:08:22,850 --> 00:08:25,600
to borrow that over twelve months.

96
00:08:25,850 --> 00:08:32,030
This is what I'm going to repay every month nine wants six point six seven.

97
00:08:32,360 --> 00:08:34,450
So these values are changeable.

98
00:08:34,460 --> 00:08:39,560
So feel free to play around with the values to test the app.

99
00:08:39,570 --> 00:08:40,980
So that's basically it.

100
00:08:40,980 --> 00:08:46,520
And we've got the main functionality of the app working in the next lecture.

101
00:08:46,520 --> 00:08:51,500
I'm just going to add some CSF to make it look a bit nicer.

102
00:08:52,070 --> 00:08:53,540
So that's it for this lecture.

103
00:08:53,570 --> 00:08:55,070
Thank you for watching.

104
00:08:55,070 --> 00:08:55,850
Bye for now.