1 00:00:00,720 --> 00:00:05,700 Hey guys now that you understand the core fundamentals of javascript in the dorm you should be able 2 00:00:05,700 --> 00:00:10,290 to start writing small applications so we're going to take many of the things that we've learned so 3 00:00:10,290 --> 00:00:13,420 far and we're going to create a couple of small projects with them. 4 00:00:13,560 --> 00:00:15,930 So this project is going to be a loan calculator. 5 00:00:15,930 --> 00:00:20,580 This is something that an actual accountant could use to quickly show their clients how long it would 6 00:00:20,580 --> 00:00:26,970 take to pay a loan back how much interest would be how much the total amount would be and so on. 7 00:00:26,970 --> 00:00:31,290 All right so there is some math involved and I'll be the first one to tell you that I'm horrible at 8 00:00:31,290 --> 00:00:32,020 math. 9 00:00:32,070 --> 00:00:35,870 I had to look up the calculations and the formula to get these results. 10 00:00:36,000 --> 00:00:41,670 But that's the thing you can look up any formula or calculation you want and then implemented into your 11 00:00:41,670 --> 00:00:42,540 application. 12 00:00:42,540 --> 00:00:48,900 So for instance if you want to build a temperature Fahrenheit to Celsius converter or a currency converter 13 00:00:49,140 --> 00:00:53,750 you should be able to do that just by Googling the correct algorithm or calculation. 14 00:00:53,850 --> 00:00:57,560 So you don't actually have to be really good at math to build these things. 15 00:00:57,570 --> 00:00:57,910 All right. 16 00:00:57,930 --> 00:01:00,850 You just need to know where to put the formula in your code. 17 00:01:00,990 --> 00:01:05,310 And then from what Field's input fields to get the correct numbers from. 18 00:01:05,310 --> 00:01:07,720 All right so let's go ahead and try this out. 19 00:01:07,740 --> 00:01:13,160 So it takes in three things the loan amount the annual interest in the years to repay. 20 00:01:13,170 --> 00:01:19,120 All right so let's say we want a $10000 loan and we want a 2 percent interest. 21 00:01:19,140 --> 00:01:21,450 And we want two years to pay it back. 22 00:01:21,450 --> 00:01:23,160 So we'll calculate. 23 00:01:23,160 --> 00:01:26,340 I think we have this little spinner and then we get the results. 24 00:01:26,340 --> 00:01:26,660 All right. 25 00:01:26,670 --> 00:01:30,660 So you can see that the total payment would be this right here. 26 00:01:30,660 --> 00:01:34,470 We'd have a monthly payment of this and total interest would be this. 27 00:01:34,560 --> 00:01:34,910 All right. 28 00:01:34,920 --> 00:01:39,210 And now that the spinner graphic I showed you I'm first going to show you how to build this without 29 00:01:39,210 --> 00:01:39,760 that. 30 00:01:39,930 --> 00:01:42,720 And then I'm going to show you how to include that. 31 00:01:42,840 --> 00:01:50,040 It doesn't actually take that long to calculate but it gives the user that that that feeling that something's 32 00:01:50,040 --> 00:01:54,560 going on and it's just good for the UI experience you don't actually need it. 33 00:01:54,570 --> 00:02:00,000 We could get it two seconds faster and not show that graphic but I think that it gives the user that 34 00:02:00,090 --> 00:02:02,880 that feeling that it's actually calculating. 35 00:02:02,880 --> 00:02:03,180 All right. 36 00:02:03,180 --> 00:02:05,310 So it's all about user experience. 37 00:02:05,310 --> 00:02:12,110 Now if what you put in here doesn't make sense if we just leave everything blank it'll calculate it'll 38 00:02:12,120 --> 00:02:16,210 give us an error and then we're going to set the error to disappear after three seconds. 39 00:02:16,220 --> 00:02:21,150 OK we're going to use a method a window method called set timeout to do that which we haven't talked 40 00:02:21,150 --> 00:02:26,400 about yet but I think it's easy enough to teach you that method in this project. 41 00:02:26,400 --> 00:02:28,710 All right so let's go ahead and get started. 42 00:02:28,710 --> 00:02:33,060 All right guys so the first thing we're going to do is create our UI or user interface. 43 00:02:33,060 --> 00:02:37,920 Now you don't have to go through this if you don't want to if you don't feel like watching me do a page. 44 00:02:37,920 --> 00:02:42,660 Tim and you don't want to type it and you just want to get the project files you can just take the files 45 00:02:42,660 --> 00:02:44,750 from this lecture and move on. 46 00:02:44,760 --> 00:02:50,300 But for those of you that actually want to start you know start from scratch and build out the UI we're 47 00:02:50,300 --> 00:02:53,430 going to be using bootstrap OK bootstrap version 4. 48 00:02:53,940 --> 00:02:55,890 And it's going to be pretty simple as you saw. 49 00:02:55,890 --> 00:03:00,990 We're just going to have a single form in the middle of the page and we're going to use bootstrap cards 50 00:03:00,990 --> 00:03:03,210 to give it that border and stuff. 51 00:03:03,210 --> 00:03:07,260 All right so we're going to use the CD ends if we go to get started here. 52 00:03:07,380 --> 00:03:10,920 They'll give us the CD and but we're actually going to use the starter template. 53 00:03:10,920 --> 00:03:13,690 So let's create a new folder anywhere you want. 54 00:03:13,690 --> 00:03:18,610 I'm going to create on my desk top and I'm going to call this loan calculator. 55 00:03:19,830 --> 00:03:31,140 And then we're going to open this with Visual Studio code we'll just snap that over there. 56 00:03:31,210 --> 00:03:31,580 All right. 57 00:03:31,660 --> 00:03:33,600 And you can make this a little smaller. 58 00:03:33,760 --> 00:03:40,480 And now we're going to have to create just a couple of files so index each team out and we want our 59 00:03:40,480 --> 00:03:45,580 javascript file which is a hotdog Jap's or you can call it whatever you want and then we're just going 60 00:03:45,580 --> 00:03:51,430 to need the loading image which I'm going to create a folder right here called I'm g and I'm going to 61 00:03:51,430 --> 00:03:54,580 bring that image and you'll have it in your resource files. 62 00:03:54,580 --> 00:03:57,320 So that's that right. 63 00:03:57,810 --> 00:03:58,700 Yes it is. 64 00:03:58,720 --> 00:04:03,400 So the downloads it's called loading dock. 65 00:04:03,580 --> 00:04:05,630 Gift for Jeff Harvey I want to say it. 66 00:04:05,740 --> 00:04:12,940 And I'm just going to copy this and I'm going to bring it into that image or that empty folder. 67 00:04:12,940 --> 00:04:18,760 All right so now we have all of our files so let's go our index each time owlets grab this starter template 68 00:04:18,760 --> 00:04:26,680 right here and this just includes a CDN for bootstrap it also includes the javascript file for bootstrap 69 00:04:26,680 --> 00:04:29,940 and then it's two dependencies which are J query and Popper. 70 00:04:30,010 --> 00:04:30,590 Yes. 71 00:04:30,600 --> 00:04:30,910 OK. 72 00:04:30,910 --> 00:04:35,230 So you need that if you're going to use any bootstrap javascript which we're not. 73 00:04:35,290 --> 00:04:37,690 We probably don't need this but it's good to have. 74 00:04:37,690 --> 00:04:44,870 Just in case you want to expand later on or include something from from Bootstrap javascript. 75 00:04:44,890 --> 00:04:45,160 All right. 76 00:04:45,160 --> 00:04:47,870 So let's go ahead and go into the body here. 77 00:04:47,870 --> 00:04:49,320 Get rid of that H-1. 78 00:04:49,600 --> 00:04:53,040 It's going to close that make this a little bigger and we're going to start. 79 00:04:53,050 --> 00:04:55,140 All right so the body itself. 80 00:04:55,180 --> 00:05:02,350 I want to have a dark background so I'm actually going to give it a bootstrap class of B.G. dashed dark. 81 00:05:02,350 --> 00:05:02,680 All right. 82 00:05:02,680 --> 00:05:07,540 So I'm going to save this and then I'm going to open this with a live server by right clicking and going 83 00:05:07,540 --> 00:05:09,720 to open with live server. 84 00:05:09,760 --> 00:05:14,290 All right and if you don't have live server installed you can go to extensions and vs code and just 85 00:05:14,290 --> 00:05:17,420 search for a live server and install it. 86 00:05:17,610 --> 00:05:17,860 All right. 87 00:05:17,860 --> 00:05:20,270 Or you can just open your Each team file. 88 00:05:20,770 --> 00:05:29,110 So inside the body here we're going to have a container so container and bootstrap just moves everything 89 00:05:29,110 --> 00:05:31,850 to the middle add some margin auto. 90 00:05:32,290 --> 00:05:37,150 So it has margin on the sides and then inside the container we're going to use that grid system. 91 00:05:37,150 --> 00:05:39,950 So we're going to do a row. 92 00:05:39,950 --> 00:05:45,700 And if you're interested in Bootstrap for I do have a bootstrap four course on you to me. 93 00:05:45,700 --> 00:05:50,530 I'm sure that many of you have already taken it and you should know all about this but I'm not going 94 00:05:50,530 --> 00:05:53,720 to explain every single little thing about bootstrap. 95 00:05:54,130 --> 00:05:57,890 So inside the row here we want a six column div. 96 00:05:58,030 --> 00:06:05,830 So I'm going to say call dash and the dash 6 and then we're also going to add a class of X dash auto 97 00:06:06,130 --> 00:06:11,620 which is going to push it into the middle it's going to give it margin auto on both sides on the right 98 00:06:11,620 --> 00:06:12,510 and left. 99 00:06:12,510 --> 00:06:16,270 All right so inside here we're going to create a card class. 100 00:06:16,540 --> 00:06:19,950 It's also going to have a class of card body. 101 00:06:21,030 --> 00:06:26,920 I also want everything to be centered so I'm going to give it a class of text center and then I'm also 102 00:06:26,920 --> 00:06:32,490 going to give a class of empty dash 5 which gives it some margin on the top. 103 00:06:32,500 --> 00:06:32,800 All right. 104 00:06:32,800 --> 00:06:34,090 So let's go ahead and save that. 105 00:06:34,090 --> 00:06:36,370 And we should have our card right in the middle. 106 00:06:36,370 --> 00:06:43,130 And even if the browsers bigger it should stay in the middle because we have that Amex auto class. 107 00:06:43,150 --> 00:06:43,450 All right. 108 00:06:43,450 --> 00:06:46,490 So from here what we want to do is add our heading. 109 00:06:46,720 --> 00:06:53,860 So it's going to be an H1 and I'm going to give it a class of Hedding which will use to grab onto it 110 00:06:53,860 --> 00:06:54,850 later on. 111 00:06:54,850 --> 00:07:00,460 We're also going to give a class of display dash 5 which is a bootstrap class gives makes it a certain 112 00:07:00,460 --> 00:07:06,760 size and then some padding on the bottom so p b dash 3. 113 00:07:06,790 --> 00:07:07,110 All right. 114 00:07:07,120 --> 00:07:15,020 And then in this age one we're just going to say loan calculator and save and there we go. 115 00:07:15,040 --> 00:07:17,780 All right so now we want to create our form. 116 00:07:18,430 --> 00:07:25,490 So we're going to have a form and it's going to have an I.D. of loan dash form. 117 00:07:25,530 --> 00:07:32,840 Look it doesn't need an action and then inside the form we're going to have a couple of form groups 118 00:07:33,800 --> 00:07:34,730 in Bootstrap. 119 00:07:34,730 --> 00:07:39,960 You want your inputs and labels wrapped in a form form group div.. 120 00:07:39,980 --> 00:07:46,790 Now I'm going to use an input group because I want to have that that money sign to the left of the actual 121 00:07:46,790 --> 00:07:47,420 input. 122 00:07:47,420 --> 00:07:55,670 So what we'll do is have a class of input dash group and inside here we're going to have a span with 123 00:07:55,670 --> 00:07:59,320 the class of input group add on. 124 00:08:00,440 --> 00:08:04,880 So this is where that the money sign is going to go so I'm going to put that dollar sign right in the 125 00:08:04,880 --> 00:08:05,690 middle there. 126 00:08:05,990 --> 00:08:11,270 And then after the span we'll have our actual input which will have a type of text. 127 00:08:11,480 --> 00:08:21,350 And let's give it a class of form control which styles the bootstrap input gives it some padding makes 128 00:08:21,350 --> 00:08:23,380 it a block level element. 129 00:08:23,390 --> 00:08:28,340 We're going to give you an idea of the amount so that we can grab on to it in our javascript and then 130 00:08:28,340 --> 00:08:35,430 we're going to give it a placeholder of loan amount. 131 00:08:35,450 --> 00:08:41,250 So we'll save that in there we go we have our first input actually we're going to do is we're going 132 00:08:41,250 --> 00:08:46,570 to make these number inputs not taxed that way we can only put numbers in. 133 00:08:46,830 --> 00:08:50,080 So let's copy the form group. 134 00:08:50,190 --> 00:08:55,760 So this whole div right here and I'll paste another one in and this one is going to be the interest. 135 00:08:55,770 --> 00:09:04,140 So we're going to change the money sign to 8 percent sign and then we'll change the ID to interest and 136 00:09:04,140 --> 00:09:06,660 then we'll change the placeholder to interest 137 00:09:12,520 --> 00:09:18,080 right next thing we want is the repayment year is going to go ahead and save this. 138 00:09:18,080 --> 00:09:19,370 So we want repayment years. 139 00:09:19,370 --> 00:09:21,540 Now that's not going to be an input group. 140 00:09:21,710 --> 00:09:25,340 So let's just go right under this form group and create another one 141 00:09:28,090 --> 00:09:31,280 class we don't need the input group we don't need the span. 142 00:09:31,280 --> 00:09:33,180 All we need is the actual input. 143 00:09:33,180 --> 00:09:43,180 So copy that one and I'll change this to change this two years idea of years and then in the placeholder 144 00:09:43,190 --> 00:09:51,530 we'll just say oh let's say years to repay makes sounds a little better. 145 00:09:53,720 --> 00:09:54,480 OK. 146 00:09:54,880 --> 00:09:56,020 So save that. 147 00:09:56,020 --> 00:09:57,810 Now we have our three fields. 148 00:09:58,000 --> 00:10:02,050 Now we want to do is put our submit button so we're going to put another form group 149 00:10:05,510 --> 00:10:06,910 and we're going to have an input. 150 00:10:06,910 --> 00:10:12,320 This is going to have a type of submit and you could see how easy how much easier it makes this. 151 00:10:12,320 --> 00:10:15,850 I hope you guys have it installed so value. 152 00:10:15,860 --> 00:10:24,860 We're going to say calculate and then let's give this a class and bootstrap classes so then we're going 153 00:10:24,860 --> 00:10:28,090 to do beat and dash dark to make it a dark color. 154 00:10:28,250 --> 00:10:33,630 And then Beatty and dash block to make it a block level button that goes all the way across. 155 00:10:33,650 --> 00:10:35,630 So will save and there we go. 156 00:10:37,350 --> 00:10:37,560 All right. 157 00:10:37,560 --> 00:10:40,470 So the next thing we want to do is go underneath the form. 158 00:10:40,470 --> 00:10:43,900 Now our loader will go here but we're not going to do that just yet. 159 00:10:43,900 --> 00:10:47,480 So I'll say loader here. 160 00:10:47,480 --> 00:10:47,870 All right. 161 00:10:47,880 --> 00:10:50,690 And then we want our results. 162 00:10:51,420 --> 00:10:51,750 OK. 163 00:10:51,750 --> 00:10:58,800 So this will be the results which when we complete our application we're going to want it to. 164 00:10:58,810 --> 00:10:59,190 We're going to. 165 00:10:59,190 --> 00:11:01,760 We're not going to want in the show until we calculate. 166 00:11:01,770 --> 00:11:05,880 But for now they're going to show all the time until we get this working. 167 00:11:05,890 --> 00:11:06,240 All right. 168 00:11:06,240 --> 00:11:09,330 Now you can choose to show your results however you want. 169 00:11:09,330 --> 00:11:14,430 I'm going to choose to show them in input fields that are disabled that we can't actually add it. 170 00:11:14,430 --> 00:11:14,750 All right. 171 00:11:14,750 --> 00:11:16,230 So let's see. 172 00:11:16,230 --> 00:11:23,310 I'm going to copy all of these divs and then grab actually describe the first one here. 173 00:11:23,840 --> 00:11:26,390 So this form group. 174 00:11:26,390 --> 00:11:27,580 Now we don't need the wrap. 175 00:11:27,590 --> 00:11:32,930 We don't need a form tag because we're not actually submitting a form we just need the inputs to display 176 00:11:32,930 --> 00:11:34,130 the data. 177 00:11:34,160 --> 00:11:40,940 All right so we're going to change this money sign to say monthly payment. 178 00:11:41,520 --> 00:11:42,010 Okay. 179 00:11:42,020 --> 00:11:53,560 And then for the input we're going to change the ID two monthly Dasch payment and we're going to change 180 00:11:55,000 --> 00:11:58,820 the title we can keep it at number and then placeholder. 181 00:11:58,840 --> 00:12:00,790 We're not going to need a placeholder. 182 00:12:01,210 --> 00:12:05,640 Well we're going to need is a disabled attribute. 183 00:12:05,650 --> 00:12:05,890 Right. 184 00:12:05,890 --> 00:12:10,870 So we want to see disabled so if we save that now you can see it's a it's an input form but we can't 185 00:12:11,350 --> 00:12:13,890 do anything with it it's just for output. 186 00:12:14,210 --> 00:12:14,610 OK. 187 00:12:14,620 --> 00:12:23,820 I also want to put in H five at the top here and we'll say results and then let's also wrap this whole 188 00:12:23,820 --> 00:12:29,630 thing in a div with the ID of results. 189 00:12:29,640 --> 00:12:36,780 All right so we want to wrap this around see it will go right under the form group give which is right 190 00:12:36,780 --> 00:12:37,510 here. 191 00:12:41,000 --> 00:12:41,370 All right. 192 00:12:41,410 --> 00:12:43,420 So save that. 193 00:12:43,420 --> 00:12:45,760 Now I want to push this down a little bit. 194 00:12:47,420 --> 00:12:53,720 So this results I'm going to get this div right here I'm going to give it a class to give it a class 195 00:12:53,720 --> 00:12:55,460 of Petey's Pete padding. 196 00:12:55,460 --> 00:12:59,390 Top class will do P-T for and that will push it down. 197 00:12:59,930 --> 00:13:03,530 OK so after monthly payment we're going to want the total payment. 198 00:13:03,530 --> 00:13:10,830 So I'm going to copy this form group right here which ends here so I'll grab that 199 00:13:14,040 --> 00:13:22,200 face that end and this will be the total payment so will change the ID the total payment. 200 00:13:23,780 --> 00:13:25,090 And that should be good. 201 00:13:25,090 --> 00:13:33,670 Next we want wanted total interest so under the form group faced and again this will be total interest. 202 00:13:34,740 --> 00:13:36,910 You know we just want to change the ID 203 00:13:41,830 --> 00:13:42,640 OK. 204 00:13:43,100 --> 00:13:44,410 And then that should do it. 205 00:13:44,420 --> 00:13:46,300 Let's save and there we go. 206 00:13:48,310 --> 00:13:54,960 I guess what we could do is put the H team out for the loader and then just comment it out. 207 00:13:54,970 --> 00:14:00,500 So for this it's going to be really easy we just want a div with the class. 208 00:14:00,770 --> 00:14:07,930 Actually it's given an idea of loading and then side here we want our image and it's going to have a 209 00:14:07,930 --> 00:14:14,130 source of the in the I am the folder and then loading Daut Jeff or gif. 210 00:14:14,770 --> 00:14:16,890 OK so if we save that it's going to show. 211 00:14:16,900 --> 00:14:21,580 But we don't want that to be displayed or we don't even want this to be working yet. 212 00:14:21,580 --> 00:14:23,600 So let's comment this so 213 00:14:27,590 --> 00:14:29,020 and save. 214 00:14:29,090 --> 00:14:30,380 So now we can't see that. 215 00:14:30,380 --> 00:14:35,000 Now the last thing we want to do is make sure we include our app J s script which we haven't done so 216 00:14:35,000 --> 00:14:37,400 we're going to put this at the bottom here. 217 00:14:37,520 --> 00:14:44,730 Say script and we want this to have a source of app dot J.S.. 218 00:14:44,750 --> 00:14:47,730 All right and just to test it out we'll go over here to app. 219 00:14:47,810 --> 00:14:52,590 Yes and we'll just say alert one and save and you can see that that loads. 220 00:14:52,590 --> 00:14:53,380 Good. 221 00:14:53,390 --> 00:14:53,650 All right. 222 00:14:53,660 --> 00:14:54,800 So let's save this. 223 00:14:54,800 --> 00:14:58,820 And then in the next video we're going to start to add our functionality. 224 00:14:58,820 --> 00:15:04,850 We want to add an event listener onto this button and calculate our stuff here. 225 00:15:04,850 --> 00:15:06,780 All right so I will see you in the next video.