1 00:00:00,510 --> 00:00:03,360 Hello and welcome to this video. 2 00:00:03,420 --> 00:00:09,560 In this video we are going to create a directory for our project. 3 00:00:09,630 --> 00:00:15,750 We will also create the hash tag email structure for the project. 4 00:00:15,750 --> 00:00:24,420 I'm going to create the directory on my desktop by just right clicking ongoing New Folder and I'll just 5 00:00:24,420 --> 00:00:26,150 keep the folder in there. 6 00:00:26,160 --> 00:00:32,870 I'm just going to call it loan calculator so you can also create directory the same way. 7 00:00:32,940 --> 00:00:35,890 If you are using a Mac. 8 00:00:36,360 --> 00:00:42,620 So that's my directory that I have coded loan calculator. 9 00:00:42,660 --> 00:00:49,920 Next thing I want to do is create the hash tag email structure for the project. 10 00:00:49,920 --> 00:00:57,540 I am going to be using sublime text editor to create the structure. 11 00:00:57,570 --> 00:01:00,900 So this is the sublime text editor. 12 00:01:01,650 --> 00:01:06,450 I am going to add the hash to my code. 13 00:01:06,450 --> 00:01:14,640 I have already pre staged it so I'll just add the code on and I'll explain the code line by line. 14 00:01:14,640 --> 00:01:20,020 So the first thing I'm going to do is name my file here. 15 00:01:20,100 --> 00:01:20,960 I'm going to court. 16 00:01:20,970 --> 00:01:23,010 This is gonna be my hash TMM files. 17 00:01:23,010 --> 00:01:33,110 I'm calling the loan calculator CML and I'm saving it inside my directory which I've called a loan calculator. 18 00:01:33,180 --> 00:01:34,930 Quick Save. 19 00:01:35,040 --> 00:01:40,730 You can see here a displays the name of the document and here on the bottom right. 20 00:01:40,740 --> 00:01:48,660 Also you can see says Hastie CML or any code I add in here will be Hastie AML code. 21 00:01:48,660 --> 00:01:54,410 I have added some basic structure to our CML document. 22 00:01:54,480 --> 00:01:56,490 I'm just going to run through them with you. 23 00:01:56,520 --> 00:02:04,350 Line 1 here is the doc type which basically is a declaration to the web browser just to let them know 24 00:02:04,540 --> 00:02:09,500 that the type of document it should display is hate him and document. 25 00:02:09,510 --> 00:02:15,690 And here this is where the hard to email documents text from dog type tells a browser. 26 00:02:15,690 --> 00:02:18,710 This is his CMO five document. 27 00:02:18,810 --> 00:02:24,700 So from line three to line 23 is what constitutes. 28 00:02:24,750 --> 00:02:27,520 They had told each mail document. 29 00:02:27,600 --> 00:02:33,810 So we've got the head section inside the head section we've got a meta concept. 30 00:02:33,810 --> 00:02:43,830 This attribute basically refers to the unicode the type of characters it will accept UTF Dash 8 is the 31 00:02:43,830 --> 00:02:48,480 standard character format used in the world. 32 00:02:48,480 --> 00:02:53,930 And here on line 7 I've got a link to the style shift. 33 00:02:53,940 --> 00:03:01,410 I'm going to be using an external style sheet which I will create later and I'm going to call it loan 34 00:03:01,440 --> 00:03:04,910 calculator dot CSA. 35 00:03:05,070 --> 00:03:09,000 I've just added a title called Long calculator. 36 00:03:09,030 --> 00:03:17,120 So the title is what will be displayed in the browser window when the application runs. 37 00:03:17,190 --> 00:03:23,940 Moving on to the body section here which this is the opening body tag and that's it close and tag the 38 00:03:23,970 --> 00:03:31,970 body tag basically is where the content for the actual application is rendered. 39 00:03:31,980 --> 00:03:40,190 So any content you see within the body tag is what is going to be visible to the user. 40 00:03:40,200 --> 00:03:49,470 So here I've got an idea I'm going to wrap the content inside a div and I've given the div an I.D. attribute 41 00:03:49,500 --> 00:03:51,120 of lone cow. 42 00:03:51,240 --> 00:03:54,210 And here I've got an hate one tag. 43 00:03:54,210 --> 00:03:58,910 This is a head in tag that will display the title of the application. 44 00:03:58,920 --> 00:04:04,290 It will just say a loan calculator in here in between. 45 00:04:04,290 --> 00:04:12,780 After the font I'm going to add some paragraph the paragraph will serve as input fields for the various 46 00:04:12,780 --> 00:04:15,900 parts of the loan calculator. 47 00:04:15,900 --> 00:04:17,580 And here I'll got a script. 48 00:04:17,580 --> 00:04:19,590 This will be my javascript. 49 00:04:19,680 --> 00:04:26,610 This is where I will add the logic or the function that would do the actual computing or calculation 50 00:04:27,210 --> 00:04:28,230 of the low. 51 00:04:28,710 --> 00:04:34,890 And this is the name I'm going to call it when I create the FA fa. 52 00:04:34,890 --> 00:04:43,920 I have added some paragraph here are the three paragraphs here that will be used as input fields for 53 00:04:43,920 --> 00:04:51,180 us to input the values that we will use to calculate the load. 54 00:04:51,720 --> 00:04:59,580 So here called this will going to be the loan amount and it's going to be in dollars and they have given 55 00:04:59,580 --> 00:05:10,450 the put an idea of amount the type is going to be in number and the minimum is one maximum five million. 56 00:05:10,480 --> 00:05:19,600 And here are called the on change event the on change event basically occurs when the value of an element 57 00:05:19,630 --> 00:05:20,820 has been changed. 58 00:05:21,310 --> 00:05:28,440 So each time the values has been input it changes this on change event here. 59 00:05:28,450 --> 00:05:36,730 We'll call this function which is a compute on function and it will real calculate and compute the new 60 00:05:36,730 --> 00:05:40,830 value based on the input that has been entered. 61 00:05:40,900 --> 00:05:47,580 So we'll be creating a function called compute loan later inside our JavaScript file. 62 00:05:47,650 --> 00:05:53,560 Here we've got all not a field here called interest rate and it's going to be in percent. 63 00:05:53,950 --> 00:06:01,120 So this is where we'll input the interest rate and the type of giving it's an idea value of interest 64 00:06:01,120 --> 00:06:02,450 on the score rate. 65 00:06:02,500 --> 00:06:07,390 The type is going to be in no minimum value is zero maximum. 66 00:06:07,390 --> 00:06:10,180 It's gonna be a hundred in terms of interest rate. 67 00:06:10,240 --> 00:06:18,280 I'm gonna start off with an initial value of 10 percent as the interest rate and then sort of cohere 68 00:06:18,370 --> 00:06:31,630 called step the step attribute basically easy used to specify the legal number of intervals for an input 69 00:06:31,780 --> 00:06:32,160 element. 70 00:06:32,170 --> 00:06:40,190 So this tape is basically specifying the legal number of intervals for the input element and normally 71 00:06:40,240 --> 00:06:47,440 you can use this with the maximum and minimum attributes you can see here called minimum entry beauty 72 00:06:47,550 --> 00:06:51,360 and maximum entry bit also again. 73 00:06:51,430 --> 00:06:59,020 We are attaching the on change event so any time these value changes it will call this function here 74 00:06:59,050 --> 00:07:05,470 called compute loan and here for the other paragraph we've got the months to pay. 75 00:07:05,470 --> 00:07:13,090 So this will be the value to be entered for the amount of month it will take to repay the loan. 76 00:07:13,630 --> 00:07:22,780 So I've given this input an IED or month that type is going to be a no minimum values 1 maximum value 77 00:07:22,870 --> 00:07:30,230 is 300 months 300 months basically is equivalent to 25 years. 78 00:07:30,250 --> 00:07:37,390 So if you can change his value if you want to do that the value initial value of given me time to be 79 00:07:37,390 --> 00:07:49,870 1 again I am using this step attribute and the value of that step is 1 again just to re reiterate that 80 00:07:49,870 --> 00:07:58,860 the step attribute is is used to specify the legal number of intervals for an input element. 81 00:07:58,860 --> 00:07:59,570 All right. 82 00:07:59,620 --> 00:08:07,000 Again here we're calling The on change event so if any time the value changes it will trigger this function 83 00:08:07,000 --> 00:08:17,540 here called compute loan and it will re compute the values entered here we've got a hedge to element. 84 00:08:17,770 --> 00:08:25,450 This is what will display the actual amount to be paid monthly. 85 00:08:25,570 --> 00:08:31,690 So the amount you pay monthly will be displayed inside this H2 tag. 86 00:08:31,960 --> 00:08:41,740 So all the values in green here are no known as attributes the values in green are attributes attributes 87 00:08:41,770 --> 00:08:50,230 basically provides additional information about hasty AML element. 88 00:08:50,450 --> 00:08:57,890 Anyway you've got value here added value attribute basically specifies the value of an input element 89 00:08:57,910 --> 00:08:59,680 whatever value you enter. 90 00:08:59,860 --> 00:09:03,640 This is what is going to capture the value. 91 00:09:03,730 --> 00:09:05,680 So I'm just going to save this. 92 00:09:05,680 --> 00:09:13,120 We've basically finished the structure we can run this inside our hasty AML to see what it looks like. 93 00:09:13,690 --> 00:09:21,490 So I'm just going to open up the directory and double click on this loan calculator to attach to AML 94 00:09:22,050 --> 00:09:25,160 and you can see here this is the basic structure. 95 00:09:25,450 --> 00:09:29,560 So this is exactly how I want the structure to look. 96 00:09:29,560 --> 00:09:37,870 So in the next lecture we'll start doing the javascript part of it will create the logic that will make 97 00:09:37,930 --> 00:09:39,320 all these work. 98 00:09:39,730 --> 00:09:41,530 So that's it for this lecture. 99 00:09:41,530 --> 00:09:42,700 Thanks for watching. 100 00:09:42,700 --> 00:09:43,300 Bye for now.