1 00:00:00,810 --> 00:00:03,980 All right guys so our loan calculator is now working. 2 00:00:03,980 --> 00:00:05,780 We get our results we get an hour. 3 00:00:05,790 --> 00:00:10,740 If things aren't entered correctly now we're going to end we're going to implement the loading image 4 00:00:10,800 --> 00:00:13,860 and just improve the user experience a little bit. 5 00:00:13,890 --> 00:00:20,670 So I'm going to uncomment the loader here and save and you see that now it's going to show both the 6 00:00:20,670 --> 00:00:22,060 results and the loader. 7 00:00:22,200 --> 00:00:27,700 Now I'm going to actually use CSSA to initially hide both of these so I'm going to go up to the head. 8 00:00:27,750 --> 00:00:33,750 You could put this in a separate CSSA file if you want but it's such a little a little amount of CSSA 9 00:00:33,750 --> 00:00:35,540 I don't think that's necessary. 10 00:00:36,030 --> 00:00:47,100 But basically we're just going to take the idea of loading and we want to set display to none. 11 00:00:47,240 --> 00:00:47,740 OK. 12 00:00:47,760 --> 00:00:52,320 And then actually we just put a comma here because we want both displayed and none so we can also say 13 00:00:52,320 --> 00:00:54,110 results displayed none. 14 00:00:54,120 --> 00:00:58,650 So if I save that's going to get rid of both and this is what we want the user to see when they first 15 00:00:58,650 --> 00:01:00,500 come to the to the app. 16 00:01:00,780 --> 00:01:01,050 All right. 17 00:01:01,050 --> 00:01:03,460 So let's go into app Jay ass. 18 00:01:03,590 --> 00:01:07,200 Now the way that we were doing this is going to change a little bit. 19 00:01:07,290 --> 00:01:13,350 What happens now is when the submitted audit calls calculate results right away. 20 00:01:13,350 --> 00:01:19,650 So I'm going to actually change this and just make this call a function like this. 21 00:01:20,160 --> 00:01:25,950 OK because we want we basically want to delay calculate results. 22 00:01:25,950 --> 00:01:26,290 All right. 23 00:01:26,310 --> 00:01:33,120 And since you are not this is no longer an event handler we can take this out and then we want to get 24 00:01:33,120 --> 00:01:36,010 rid of the prevent default. 25 00:01:36,260 --> 00:01:37,560 Where is it right here. 26 00:01:37,580 --> 00:01:38,650 Get rid of that. 27 00:01:38,910 --> 00:01:39,360 Okay. 28 00:01:39,380 --> 00:01:45,880 And then we want to prevent defaults to be down here. 29 00:01:46,670 --> 00:01:50,110 Okay and we want to make sure we pass an e right here. 30 00:01:50,140 --> 00:01:58,600 So what I want to do is I want to show the loader as soon as this is clicked. 31 00:01:58,770 --> 00:02:06,810 Okay so right here we're going to say let's say show loader actually we want to make sure the results 32 00:02:06,810 --> 00:02:07,640 are hidden too. 33 00:02:07,650 --> 00:02:13,980 So I want to say hied results even though they're already hidden by default what's going to happen is 34 00:02:14,040 --> 00:02:20,070 if they calculate and show the results and then they hit calculate again the results are still going 35 00:02:20,070 --> 00:02:21,140 to show. 36 00:02:21,480 --> 00:02:24,570 So we want we want them to always be hidden right away. 37 00:02:24,570 --> 00:02:30,690 So let's say documents Daut get element by D. 38 00:02:31,220 --> 00:02:34,780 And we want to get the results Heidi. 39 00:02:35,030 --> 00:02:40,440 And we want to just say style Daut display equals 40 00:02:42,960 --> 00:02:43,910 none. 41 00:02:44,430 --> 00:02:45,020 Okay. 42 00:02:45,240 --> 00:02:49,460 And then for the loader I'm just going to copy this pace. 43 00:02:49,560 --> 00:02:57,490 So for the loader we want to change this as loading or load or it's loading. 44 00:02:57,490 --> 00:03:00,040 All right so the idea of loading. 45 00:03:00,600 --> 00:03:04,850 We want to set to block. 46 00:03:05,550 --> 00:03:10,670 So let's save this and click calculate and it shows a little spinner. 47 00:03:10,680 --> 00:03:19,630 All right now I want this to show for two seconds before it calculates so what we're going to do is 48 00:03:19,630 --> 00:03:24,600 again we're going to set time out which is a great function method. 49 00:03:24,660 --> 00:03:32,220 It's part of the window object and we want to call calculate results after two seconds. 50 00:03:32,320 --> 00:03:33,360 OK. 51 00:03:34,090 --> 00:03:38,470 So what we'll do is save let's put something in here. 52 00:03:40,890 --> 00:03:43,930 Calculate it's going to load 2 seconds later. 53 00:03:45,900 --> 00:03:47,130 Nothing happens. 54 00:03:47,520 --> 00:03:55,290 And the reason for that is because results the I.D. is still set to None. 55 00:03:55,440 --> 00:04:00,160 OK it's still set to display none so we actually have to change that. 56 00:04:00,160 --> 00:04:00,960 Let's copy this. 57 00:04:00,960 --> 00:04:06,630 We're going to go down into calculate results and we're going to go after the calculation. 58 00:04:06,640 --> 00:04:12,510 So let's see if is finite we want to go inside here. 59 00:04:13,960 --> 00:04:20,340 In and go right here and we want the results to show. 60 00:04:20,380 --> 00:04:22,010 So will set this to blog 61 00:04:25,290 --> 00:04:30,660 say show results and we also want to hide the spinner about loader 62 00:04:35,420 --> 00:04:35,780 right. 63 00:04:35,840 --> 00:04:40,690 So we're going to set the loading ID to none. 64 00:04:40,690 --> 00:04:40,980 All right. 65 00:04:40,990 --> 00:04:42,550 So let's try it again. 66 00:04:47,050 --> 00:04:49,340 Calculate OK two seconds. 67 00:04:49,340 --> 00:04:50,170 There it is. 68 00:04:50,290 --> 00:04:50,910 All right. 69 00:04:51,710 --> 00:04:53,500 Likely calculator again. 70 00:04:53,910 --> 00:04:54,690 Two seconds. 71 00:04:54,720 --> 00:04:56,940 And it shows. 72 00:04:56,970 --> 00:05:01,530 Now if we don't have anything in here let's say calculate 73 00:05:04,080 --> 00:05:08,290 and shows that. 74 00:05:08,380 --> 00:05:13,800 All right so what we want to do is just hide this in the show error. 75 00:05:13,800 --> 00:05:21,400 So let's take this high loader line and let's put this. 76 00:05:21,830 --> 00:05:26,780 I actually want to make sure both of these are hidden so I'm going to copy both of these lines and in 77 00:05:26,780 --> 00:05:35,900 show error right at the top paste these in K so hide lower that's fine. 78 00:05:35,890 --> 00:05:42,360 What we also want to hide the results if there are any so set this to none. 79 00:05:42,360 --> 00:05:42,720 All right. 80 00:05:42,720 --> 00:05:48,660 So now if I could calculate it's going to calculate figure out if something's wrong and say please check 81 00:05:48,660 --> 00:05:50,090 your numbers. 82 00:05:50,100 --> 00:05:51,840 All right. 83 00:05:51,840 --> 00:05:54,280 So that's it guys I hope you like this project. 84 00:05:54,280 --> 00:06:00,270 No it was it was a small project but I think that it has a lot to it in terms of dealing with the Dom 85 00:06:00,630 --> 00:06:07,980 and gives you a good foundation to create your own types of calculators or converters things like that 86 00:06:08,640 --> 00:06:14,940 you should be able to build or Celsius to Fahrenheit converter or something like that. 87 00:06:15,450 --> 00:06:15,750 All right. 88 00:06:15,750 --> 00:06:18,400 So thanks for watching and I will see you in the next video.