1 00:00:01,370 --> 00:00:08,000 So it's time to turn our attention to JavaScript and JavaScript, the people that write JavaScript primarily 2 00:00:08,000 --> 00:00:14,480 as their main language, love to point out that JavaScript is the most popular programming language 3 00:00:14,480 --> 00:00:15,080 in the world. 4 00:00:15,380 --> 00:00:21,080 And technically they're right, but they're not right because people use it to build the most professional 5 00:00:21,080 --> 00:00:26,470 applications or it's used in the vast majority of large scale projects. 6 00:00:27,500 --> 00:00:32,390 It's the most commonly used because people copy and paste JavaScript off the Internet without even knowing 7 00:00:32,390 --> 00:00:37,760 what it does, or they use something like Jake Query and don't really understand the underlying structures 8 00:00:37,760 --> 00:00:39,470 and principles behind JavaScript. 9 00:00:40,100 --> 00:00:41,960 And instead, again, they just copy and paste. 10 00:00:42,080 --> 00:00:47,450 And there's nothing wrong with copying and pasting good code and using it or using external packages 11 00:00:47,450 --> 00:00:49,730 that are well written, well maintained and well supported. 12 00:00:50,510 --> 00:00:54,170 But we're going to use JavaScript in a slightly different fashion. 13 00:00:54,200 --> 00:00:58,190 We're going to learn the basics of the language so we can do some useful things. 14 00:00:58,850 --> 00:01:03,320 So the very first thing I'm going to do, I have this is where I was working the last time I was working 15 00:01:03,320 --> 00:01:03,950 on this project. 16 00:01:04,430 --> 00:01:05,360 I'm going to close that. 17 00:01:05,840 --> 00:01:11,540 And if I have the text editor still open, which I probably do, I'm going to close all the files in 18 00:01:11,540 --> 00:01:12,530 that and quit out of it. 19 00:01:12,920 --> 00:01:15,830 And I'm going to take this working HTML folder. 20 00:01:16,100 --> 00:01:17,020 I'm going to rename it. 21 00:01:17,030 --> 00:01:22,310 This is this is the folder that holds all the files we've been working on for our building of the HTML 22 00:01:22,310 --> 00:01:22,760 files. 23 00:01:23,000 --> 00:01:23,990 I want to rename that. 24 00:01:23,990 --> 00:01:35,480 I'm going to rename it to the HTML source and then I'm going to move that into my actual git repository 25 00:01:35,510 --> 00:01:40,040 just so I have a copy of it and I can work and work from it right within my I.D., which happens to 26 00:01:40,040 --> 00:01:41,210 be goaland in my world. 27 00:01:42,140 --> 00:01:49,670 So I need to find those and let's go here and go up one level, find my visual studio project through 28 00:01:49,670 --> 00:01:55,520 there and working on bookings and I'm going to drag that folder right into the root level of my project. 29 00:01:56,480 --> 00:02:02,150 And then I'm going to go over to my I.D., which is right here, and it should show up on this side 30 00:02:02,150 --> 00:02:06,020 as something that needs to be added to my git repository. 31 00:02:06,050 --> 00:02:12,680 So I will find it, which is right here, and I will add the whole folder and I could have right. 32 00:02:12,680 --> 00:02:18,440 Clicked and chosen get add, but I just know the keyboard shortcut and then I will commit and push commit 33 00:02:20,000 --> 00:02:22,580 adding html source files. 34 00:02:24,350 --> 00:02:25,280 Give it a push. 35 00:02:33,540 --> 00:02:38,520 And if it goes so, now that that is committed, I'll wait for the push to finish there, it's pushed. 36 00:02:39,390 --> 00:02:42,090 So now I'm going to start working with JavaScript. 37 00:02:42,130 --> 00:02:44,030 I'm going to do so by opening up. 38 00:02:44,100 --> 00:02:47,430 Well, I'll just create a new page in my e-mail and we'll use an existing one. 39 00:02:47,440 --> 00:02:49,080 I don't have to rebuild one from scratch then. 40 00:02:49,740 --> 00:02:51,270 So I'll go to that book file. 41 00:02:52,230 --> 00:02:52,950 Not that one. 42 00:02:53,160 --> 00:02:55,460 That one should have been deleted, was deleted. 43 00:02:58,650 --> 00:02:59,910 It's now called reservation. 44 00:03:00,240 --> 00:03:05,130 I go to the reservation file and what I'm going to do is just hide a few things so I can see what's 45 00:03:05,130 --> 00:03:05,550 going on. 46 00:03:05,640 --> 00:03:13,740 Hide the head and I'm going to come down here to the container and clean it up a little bit and format 47 00:03:13,740 --> 00:03:15,030 the whole thing good. 48 00:03:15,280 --> 00:03:20,470 OK, and clearly spaces out and hide this div. 49 00:03:20,490 --> 00:03:25,020 All I'm doing is collapsing into my ID so it collapses it and then I can bring it back by clicking here 50 00:03:25,020 --> 00:03:31,500 or clicking here, but it just gets it out of my way and I'll hide my list of files on the right to 51 00:03:31,500 --> 00:03:32,790 give me more screen real estate. 52 00:03:33,360 --> 00:03:33,720 All right. 53 00:03:33,750 --> 00:03:38,130 We're going to write some JavaScript actually technically speaking, we've already written some JavaScript. 54 00:03:38,130 --> 00:03:38,580 I see. 55 00:03:38,580 --> 00:03:40,860 I have some left in here that doesn't need to be there. 56 00:03:41,190 --> 00:03:41,970 Let me give it to that. 57 00:03:42,530 --> 00:03:43,770 I'm getting ahead of myself. 58 00:03:44,700 --> 00:03:45,030 All right. 59 00:03:45,030 --> 00:03:46,920 So this is where you should be right now. 60 00:03:46,920 --> 00:03:50,040 You should have a file that's more or less the same as what I have. 61 00:03:50,490 --> 00:03:55,560 And what I'm going to do is write some JavaScript and I'll start with really basic stuff. 62 00:03:55,890 --> 00:04:03,120 First thing to bear in mind is that JavaScript files usually go at the bottom of your page just before 63 00:04:03,120 --> 00:04:04,380 the closing body tag. 64 00:04:04,680 --> 00:04:08,100 You'll see a lot of tutorials online that tell you to put them at the top of the page. 65 00:04:08,490 --> 00:04:11,010 There are certain circumstances where that's a good idea. 66 00:04:11,010 --> 00:04:16,050 But in the vast majority of cases, in order to improve your page loading time, you put them at the 67 00:04:16,050 --> 00:04:16,380 bottom. 68 00:04:17,340 --> 00:04:23,580 And every JavaScript that exists in a Web page has an embedded part of the Web page, has to have script 69 00:04:23,580 --> 00:04:24,300 tags around it. 70 00:04:24,870 --> 00:04:26,820 And you notice we already have script tags here. 71 00:04:26,820 --> 00:04:32,250 And technically speaking, if I was to go and open this file, which I can do right now, if I copy 72 00:04:32,260 --> 00:04:40,290 this URL and I go to my Web browser and I just paste that part in there, it actually shows me the JavaScript 73 00:04:40,290 --> 00:04:43,350 file and it's compressed to make it faster, to download faster. 74 00:04:43,350 --> 00:04:50,100 But this is just JavaScript and this the contents of that file actually exist within a script tag on 75 00:04:50,100 --> 00:04:50,610 my page. 76 00:04:50,610 --> 00:04:51,720 And we're doing the same thing here. 77 00:04:51,720 --> 00:04:57,600 But instead of having the file stored on a remote server somewhere, we're making it a part of this 78 00:04:57,600 --> 00:04:58,020 file. 79 00:04:58,500 --> 00:05:04,290 And all I'm going to do is write a basic JavaScript directive and it's not going to do anything on the 80 00:05:04,290 --> 00:05:04,800 page. 81 00:05:04,800 --> 00:05:06,840 But I'll show you that it does, in fact, run. 82 00:05:07,170 --> 00:05:09,360 I will write console log. 83 00:05:09,780 --> 00:05:17,750 I am printing from JavaScript and it ends with a semicolon. 84 00:05:17,790 --> 00:05:22,590 So I'm writing console log and then in parentheses with quotation marks around it. 85 00:05:22,710 --> 00:05:26,660 Some text printing apparently can't type that. 86 00:05:28,530 --> 00:05:34,560 Now when I save this file and go to my web browser and open it and now it's in my visual studio code 87 00:05:34,560 --> 00:05:35,120 project. 88 00:05:35,140 --> 00:05:36,360 So where is that? 89 00:05:36,990 --> 00:05:41,430 TC's Visual Studio code right there. 90 00:05:42,330 --> 00:05:47,100 And Bookings and HTML source and I'm working on reservation. 91 00:05:47,970 --> 00:05:49,110 Nothing appeared to happen. 92 00:05:49,650 --> 00:05:55,110 But if I go over here and click on the open menu and it's a little bit different in Chrome, but I think 93 00:05:55,110 --> 00:06:01,410 it's in the same spot and try to find the console, which is probably under the web developer and look 94 00:06:01,410 --> 00:06:03,620 for console is probably at there. 95 00:06:04,080 --> 00:06:04,530 Yes. 96 00:06:04,770 --> 00:06:05,880 Notice that it printed. 97 00:06:05,880 --> 00:06:11,880 I am printing from JavaScript to the console, so I just wrote a little bit of JavaScript that wrote 98 00:06:11,880 --> 00:06:12,570 to the console. 99 00:06:13,050 --> 00:06:16,890 I can go back here and say, I don't want to do that or I don't want to just do that. 100 00:06:17,010 --> 00:06:18,210 I want to display an alert. 101 00:06:18,840 --> 00:06:20,360 One of those little pop ups alert. 102 00:06:22,540 --> 00:06:22,770 Hi. 103 00:06:23,010 --> 00:06:23,460 Hello. 104 00:06:25,080 --> 00:06:26,700 All that's going to do is pop it alert. 105 00:06:26,710 --> 00:06:31,680 So let's go back here, reload the page and it says hello, ugly alert, but it is an alert. 106 00:06:32,100 --> 00:06:34,110 So that's how JavaScript basically works. 107 00:06:34,110 --> 00:06:36,150 You have to put it within the script text. 108 00:06:36,420 --> 00:06:38,700 Now, none of this is useful at all. 109 00:06:39,000 --> 00:06:40,350 Nothing about this is useful. 110 00:06:40,800 --> 00:06:43,350 So let's try doing something a little more useful. 111 00:06:43,350 --> 00:06:46,290 Let's go back to our page and think about what we want to do. 112 00:06:46,290 --> 00:06:48,870 Well, to start with, let's put a few things on this page. 113 00:06:48,870 --> 00:06:51,750 I'll put it outside of the form and it's important that you do that. 114 00:06:51,750 --> 00:06:53,370 Don't overlap tags. 115 00:06:54,360 --> 00:06:59,550 I'm going to create a new I shall make it right outside of the row. 116 00:06:59,550 --> 00:07:02,700 So here's the row and the closing tag for that row is down here. 117 00:07:03,300 --> 00:07:12,210 I'll create a zero div class equals row div class equals call. 118 00:07:14,280 --> 00:07:17,700 I'm using my Emet now because I'm back in my ID, so I have it installed here. 119 00:07:18,810 --> 00:07:22,910 Div Classic was relative classic call and now I will pray. 120 00:07:23,040 --> 00:07:26,280 Oh let me put a what shall I put in here. 121 00:07:26,490 --> 00:07:27,690 A paragraph of text. 122 00:07:27,900 --> 00:07:31,770 So P and I'm going to give this one an ID, I'd. 123 00:07:31,890 --> 00:07:38,130 Equals my paragraph and I'll put some text in here. 124 00:07:38,280 --> 00:07:40,230 This is some text. 125 00:07:41,510 --> 00:07:45,540 All right, save the page, go back, reload it, make sure it appears there it does. 126 00:07:45,810 --> 00:07:49,010 Get rid of that alert because it's going to bother me every time I reload the page. 127 00:07:49,290 --> 00:07:50,430 So let's get rid of that. 128 00:07:51,960 --> 00:07:54,110 Save it, go back, reload the page. 129 00:07:54,120 --> 00:07:54,600 There it is. 130 00:07:54,600 --> 00:07:57,240 And it's still printing to the console because I didn't remove that. 131 00:07:57,240 --> 00:08:02,400 And there's my paragraph of text and that paragraph of text happens to have an ID. 132 00:08:02,970 --> 00:08:09,660 And one of the things you do an awful lot in JavaScript is say, I want to effect something on the page. 133 00:08:09,960 --> 00:08:17,310 I want to make a change to the the element with a particular ID or a particular class or whatever it 134 00:08:17,310 --> 00:08:17,640 may be. 135 00:08:17,640 --> 00:08:20,670 I need to have some means of selecting that text. 136 00:08:21,180 --> 00:08:23,520 So I'm going to look at this again. 137 00:08:23,520 --> 00:08:29,400 I have a paragraph with an idea of my paragraph, which I want to copy, and I want to select that paragraph 138 00:08:29,400 --> 00:08:30,870 of text using JavaScript. 139 00:08:31,200 --> 00:08:37,440 And you do that using a really unusual but not that difficult to learn syntax in my document. 140 00:08:37,690 --> 00:08:38,580 That's the key word. 141 00:08:39,480 --> 00:08:46,190 I want to get an element by I'd get element by ID, OK? 142 00:08:46,560 --> 00:08:49,860 And inside of that I have to have a string and it has to be the name of the element. 143 00:08:50,040 --> 00:08:52,800 And my element is going to be my paragraph. 144 00:08:53,370 --> 00:08:56,220 I've now selected that document or that that element, OK. 145 00:08:56,400 --> 00:08:57,900 Now it looks like I have an error here. 146 00:08:57,900 --> 00:09:00,900 Was saying unresolved function get element by ID. 147 00:09:01,230 --> 00:09:05,250 I didn't capitalize the B get element by ID. 148 00:09:05,280 --> 00:09:07,980 That's better now I selected that element. 149 00:09:07,990 --> 00:09:10,570 OK, and what am I going to do with that. 150 00:09:10,590 --> 00:09:16,830 Well I am going to store that selection into a particular variable and I'm going to name the variable 151 00:09:16,830 --> 00:09:17,520 with the keyword. 152 00:09:17,520 --> 00:09:23,030 Let let my L equal document get element by ID. 153 00:09:23,100 --> 00:09:26,190 Now I can say that and I can run it and I think have happened. 154 00:09:26,520 --> 00:09:28,100 I still just print to the console. 155 00:09:28,110 --> 00:09:33,840 OK, but if I want to make a change to that element now, I can do it because I started it in the variable. 156 00:09:33,840 --> 00:09:40,320 I can actually say my l dot and look at all the things that I can do here at event listener access, 157 00:09:40,320 --> 00:09:44,330 killable, whatever it may be, I'm going to actually add a class to it. 158 00:09:44,340 --> 00:09:51,600 OK, I haven't done that yet because I want to come up here to the very top and create in my head another 159 00:09:51,600 --> 00:09:54,660 style and I'm going, I left this P one blank. 160 00:09:54,660 --> 00:09:57,030 I'm going to delete it already because I never did it do anything with it. 161 00:09:57,360 --> 00:10:00,090 But let me actually add a new style here, OK? 162 00:10:00,330 --> 00:10:05,070 And I'm going to call it red text like that. 163 00:10:05,370 --> 00:10:07,440 And then I define it and I'm just going to say color. 164 00:10:07,800 --> 00:10:08,130 Right. 165 00:10:08,940 --> 00:10:14,640 OK, so I've got this this document here right now, this is black text. 166 00:10:14,970 --> 00:10:21,750 And what I want to have happen is as soon as this document loads, I want to change the color of the 167 00:10:21,750 --> 00:10:26,430 text that's stored in the element named my L so a paragraph. 168 00:10:26,430 --> 00:10:28,890 So it's a PAETEC and I'm going to assign a class to it. 169 00:10:30,030 --> 00:10:37,350 So I address it or I do that by typing my variable name, my L and because my URL is a reference to 170 00:10:37,350 --> 00:10:44,460 a particular ID in the DOM, the document object model, I actually have some methods available to me 171 00:10:44,460 --> 00:10:52,860 and the one I want is class list and class list actually just just gets the classes, the CSS classes 172 00:10:52,860 --> 00:10:54,840 that are assigned to that P tag. 173 00:10:54,840 --> 00:10:55,830 And right now there are none. 174 00:10:56,970 --> 00:10:57,990 And that I want to add one. 175 00:10:57,990 --> 00:11:04,320 So I'll choose add and my token, my string will be the name of my class which I believe was read text 176 00:11:04,740 --> 00:11:13,050 with a lowercase and I say that now if I go back to my web browser and reload the page right now, it's, 177 00:11:13,050 --> 00:11:15,120 it's, it's actually just black text. 178 00:11:15,120 --> 00:11:20,940 But as soon as I reload it, that should fire and it does so it is signed a class to that. 179 00:11:21,210 --> 00:11:26,970 Now if I view source on this page and look for my paragraph, there it is. 180 00:11:27,300 --> 00:11:29,430 It doesn't have the class assigned to it at all. 181 00:11:29,700 --> 00:11:33,810 But if I inspect this element and if you never use this, this is a really useful tool. 182 00:11:34,200 --> 00:11:34,500 Right. 183 00:11:34,500 --> 00:11:40,950 Clicked on the error on your page where you want to inspect and say inspect element and it will open 184 00:11:40,950 --> 00:11:41,340 this up. 185 00:11:41,370 --> 00:11:48,090 It will show that it is ID my paragraph and here it has class read text that was actually assigned by 186 00:11:48,090 --> 00:11:49,080 our JavaScript. 187 00:11:49,710 --> 00:11:51,090 Now that's not terribly useful. 188 00:11:51,360 --> 00:11:56,730 You'll be more useful if I clicked a button or took some action and then the color changed. 189 00:11:56,730 --> 00:11:57,840 Well, we can do that too. 190 00:11:58,380 --> 00:11:59,250 Let's go here. 191 00:11:59,250 --> 00:12:00,900 Let's just comment this out, OK? 192 00:12:01,440 --> 00:12:04,560 This whole section right now and I'll just come in this one 193 00:12:09,480 --> 00:12:14,070 and I will now I want to add a button, so I'll put it right up here below this. 194 00:12:15,570 --> 00:12:29,730 Um, I'll put p put it in a paragraph and I'll put a oh button class equals button button outline I 195 00:12:30,090 --> 00:12:30,510 spelled out. 196 00:12:30,510 --> 00:12:30,810 Right. 197 00:12:31,230 --> 00:12:31,450 So. 198 00:12:31,620 --> 00:12:40,200 And dairy, which I believe is one of the ones built into a bootstrap and click me, I think to give 199 00:12:40,200 --> 00:12:44,420 it an ID idea equals color button. 200 00:12:46,070 --> 00:12:51,750 OK, so I got that saved or I've got that entered and I have no JavaScript firing. 201 00:12:51,750 --> 00:12:55,170 When I go back and reload the page, I should just get a button underneath it and clicking. 202 00:12:55,170 --> 00:12:56,190 It does nothing at all. 203 00:12:56,220 --> 00:13:02,430 OK, so now we need to add a listener, a JavaScript listener that says, listen, as soon as you've 204 00:13:02,430 --> 00:13:07,830 loaded this document, I want you to look for a particular element and I want you to listen for certain 205 00:13:07,830 --> 00:13:08,340 actions. 206 00:13:08,340 --> 00:13:15,540 And we do that in much the same way that we did before we go document get element by ID. 207 00:13:15,570 --> 00:13:22,410 And this time the IDs that I want to affect is my click me button, which has the ID of color button. 208 00:13:23,070 --> 00:13:28,010 And we want to add an event listener and the event listener is a type click. 209 00:13:29,010 --> 00:13:30,290 And what do I want you to do. 210 00:13:30,910 --> 00:13:31,590 Function. 211 00:13:32,250 --> 00:13:37,530 And this is a function that's built right into it's just an anonymous function whenever anybody clicks 212 00:13:37,530 --> 00:13:38,120 that button. 213 00:13:38,160 --> 00:13:39,480 Here's what I want you to do. 214 00:13:39,840 --> 00:13:42,390 I want to say, well, this stuff right here. 215 00:13:42,390 --> 00:13:51,990 So I'll copy this, paste it in here uncommented and save this text or save my document. 216 00:13:51,990 --> 00:13:56,250 And I want to go back to my Web page and reload it and we'll go to the console again just so we can 217 00:13:56,250 --> 00:14:00,010 make sure there's no errors thrown up when I click this. 218 00:14:00,060 --> 00:14:01,920 This now has a listener associated with it. 219 00:14:01,920 --> 00:14:05,970 And what it should do when I click it is look for this element and add a cost to it. 220 00:14:06,420 --> 00:14:07,580 And it does. 221 00:14:07,770 --> 00:14:08,270 Perfect. 222 00:14:08,520 --> 00:14:09,750 Can I make that a toggle? 223 00:14:10,110 --> 00:14:11,560 Well, quite possibly. 224 00:14:11,880 --> 00:14:13,380 Let's see if we could figure out how to do it. 225 00:14:14,280 --> 00:14:20,850 So this time, rather than just changing the text or adding the class every time that button is clicked, 226 00:14:21,180 --> 00:14:26,540 what I want to do is test and see if it has that particular a particular class associated with it. 227 00:14:26,550 --> 00:14:26,960 All right. 228 00:14:27,510 --> 00:14:29,020 So how do we do that? 229 00:14:29,040 --> 00:14:30,420 Well, let's try it out like this. 230 00:14:30,420 --> 00:14:34,890 What an if statement in JavaScript is pretty straightforward. 231 00:14:34,890 --> 00:14:39,170 If document if my URL. 232 00:14:40,350 --> 00:14:42,630 My old class list. 233 00:14:44,290 --> 00:14:44,660 Dot. 234 00:14:45,730 --> 00:14:56,200 And we can say, does it contain if it contains the string read text, then we want to undertake a particular 235 00:14:56,200 --> 00:15:03,170 action otherwise, else we want to take a different action. 236 00:15:03,190 --> 00:15:05,950 So we need to close our curly brackets here. 237 00:15:05,980 --> 00:15:12,280 So the syntax for an IF statement in JavaScript is very much like the syntax for an if statement engo. 238 00:15:12,280 --> 00:15:18,030 The difference is Go doesn't have these parentheses around it and JavaScript insists that you have them. 239 00:15:18,040 --> 00:15:20,060 In fact, if I leave them out, it'll just throw an error. 240 00:15:20,060 --> 00:15:20,770 It won't even run. 241 00:15:22,240 --> 00:15:29,530 So here if we were saying go to this element, which is my paragraph, see it, if it's a list of classes, 242 00:15:29,530 --> 00:15:34,570 contains red text, if it does, then I want to remove it so I can do it now. 243 00:15:34,660 --> 00:15:41,620 My classless dot remove and the token I want to remove is red text. 244 00:15:43,960 --> 00:15:44,950 Otherwise edit. 245 00:15:45,100 --> 00:15:52,720 So when I save it now and go back here and reload the page, this should become a toggle and it is that 246 00:15:52,720 --> 00:15:53,500 works perfectly. 247 00:15:54,100 --> 00:15:56,590 So JavaScript is not that difficult to learn. 248 00:15:56,710 --> 00:16:02,290 It's really easy to write bad JavaScript and we're going to try to avoid doing that at all costs. 249 00:16:02,770 --> 00:16:06,220 So what can we do that's more useful than just changing the colors of things? 250 00:16:06,230 --> 00:16:13,270 Well, let's go back just for fun to get bootstrap dotcom and let's go to the documentation and let's 251 00:16:13,270 --> 00:16:21,280 look for forms which are under components, I think forms, and let's look at form validation. 252 00:16:21,280 --> 00:16:22,120 And it's right here. 253 00:16:23,530 --> 00:16:26,320 Validation so. 254 00:16:28,510 --> 00:16:32,740 The way that this works is pretty straightforward if you come down here, I mean, it'll show you right 255 00:16:32,740 --> 00:16:37,750 here I try to submit this form and it says, oh, look, this is all nicely red. 256 00:16:37,750 --> 00:16:39,370 It's got an error message here. 257 00:16:39,670 --> 00:16:42,640 As I type something in, it turns back to green. 258 00:16:42,670 --> 00:16:50,020 This is far more attractive and I argue far more useful than the kind of built-In browser validation 259 00:16:50,020 --> 00:16:51,220 that we have now. 260 00:16:51,220 --> 00:16:56,490 The way that this works is you have to add no validate to our form, which is easy enough to do. 261 00:16:56,500 --> 00:16:57,250 We can add that. 262 00:16:57,520 --> 00:17:03,320 And we also need to put these things, the error messages or the success messages, straightforward. 263 00:17:03,340 --> 00:17:04,630 So these are success messages. 264 00:17:04,630 --> 00:17:07,770 They have the class valid feedback, which is part of the bootstrap framework. 265 00:17:08,230 --> 00:17:11,750 This is invalid feedback, which is part of the bootstrap framework. 266 00:17:12,940 --> 00:17:14,490 This is the part that we have to add. 267 00:17:14,680 --> 00:17:18,130 So example, starter JavaScript for disabling form submissions. 268 00:17:18,130 --> 00:17:24,070 If there are invalid fields, when we can use this as a starting point, I can actually copy this entire 269 00:17:24,070 --> 00:17:32,740 anonymous function and I can go back to my HTML in my editor and I can actually put it right here. 270 00:17:34,600 --> 00:17:36,450 So I don't need this anymore so I can delete that. 271 00:17:38,980 --> 00:17:39,960 And what is it saying here? 272 00:17:39,970 --> 00:17:41,320 Let's go through it and make sure it's all right. 273 00:17:41,890 --> 00:17:43,600 Window add event listener. 274 00:17:43,630 --> 00:17:47,410 Well Window just says that's what the document lives in, so that's a very top level. 275 00:17:47,410 --> 00:17:54,100 It's the just before the document window added, even at an event, listener onload when the web page 276 00:17:54,100 --> 00:17:56,590 loads execute this function. 277 00:17:56,590 --> 00:17:58,060 And again, it's an anonymous function. 278 00:17:58,420 --> 00:18:01,120 So the first thing it says is fetch all the forms. 279 00:18:01,120 --> 00:18:05,070 We want to apply custom bootstrap validation to no problem. 280 00:18:05,080 --> 00:18:07,350 So we'll have to add the class needs validation. 281 00:18:07,360 --> 00:18:16,690 Let's go do that right now so that no validate here, no validated class equals needs validation. 282 00:18:19,470 --> 00:18:26,920 OK, and scroll back down and read some more comments so we get our form so that stores that form that 283 00:18:26,920 --> 00:18:33,430 has the class need validation in this variable, which I'm going to call let because I don't like the 284 00:18:33,430 --> 00:18:41,670 VA keyword, I'm going to use it, let instead of years old and then loop over them and prevent submission. 285 00:18:41,690 --> 00:18:47,470 So if there's one form on the page that has the class needs validation, it will load just one form 286 00:18:47,470 --> 00:18:48,610 into the variable forms. 287 00:18:48,610 --> 00:18:54,820 If there are three, it will load all three into the variable forms, then it actually will loop through 288 00:18:54,820 --> 00:18:59,230 this, this and and it's actually creating an unnecessary variable there. 289 00:18:59,230 --> 00:19:00,190 So we don't really need that. 290 00:19:00,190 --> 00:19:00,810 So I don't know. 291 00:19:00,850 --> 00:19:01,840 These guys are kind of sloppy. 292 00:19:03,730 --> 00:19:11,890 We're just going to look through our forms and perform a actions upon each individual form. 293 00:19:11,890 --> 00:19:19,120 So what we're doing here is add event listeners submit on that form when the submit is called execute 294 00:19:19,120 --> 00:19:19,540 this. 295 00:19:19,960 --> 00:19:28,840 If the form check validity is equal to false, then stop and add the form add was validated. 296 00:19:29,440 --> 00:19:34,110 So we're just looping through this and we're checking to see if something is valid or not. 297 00:19:34,120 --> 00:19:35,800 Now where does this come from. 298 00:19:35,920 --> 00:19:39,360 Returns whether reform will validate when it is submitted without having to submit it. 299 00:19:39,550 --> 00:19:40,520 OK, so that's built in. 300 00:19:40,540 --> 00:19:41,080 No problem. 301 00:19:42,130 --> 00:19:47,020 And then we add our class list was validated to this and bootstrap is smart enough. 302 00:19:47,020 --> 00:19:51,400 When we're adding that class, we can determine whether or not we should add the one that turns it red 303 00:19:51,400 --> 00:19:52,810 or the one that turns it green. 304 00:19:52,810 --> 00:19:54,190 So it's kind of like magic. 305 00:19:54,190 --> 00:19:59,200 And we're kind of doing exactly the sort of thing I talked about earlier, which is to say copying and 306 00:19:59,200 --> 00:20:00,880 pasting someone else's JavaScript. 307 00:20:01,030 --> 00:20:02,110 But we're just getting started. 308 00:20:02,110 --> 00:20:03,970 So let's see if this does anything. 309 00:20:03,970 --> 00:20:04,930 I'm going to save this. 310 00:20:05,710 --> 00:20:08,410 I'm going to go back to my page. 311 00:20:08,560 --> 00:20:11,710 I'm going to make sure the JavaScript console is open and clear it. 312 00:20:11,920 --> 00:20:14,200 So if there's any errors, they should show up here. 313 00:20:14,200 --> 00:20:15,160 So let's reload the page. 314 00:20:16,030 --> 00:20:16,670 This RAM. 315 00:20:16,730 --> 00:20:18,100 No, no errors so far. 316 00:20:18,220 --> 00:20:19,630 Let's try searching availability. 317 00:20:20,320 --> 00:20:21,220 Oh, look at this. 318 00:20:21,370 --> 00:20:26,380 It gave me an error, but it actually made everything wide enough that it pushed it onto two lines. 319 00:20:26,380 --> 00:20:27,460 Well, that's not good. 320 00:20:27,790 --> 00:20:29,780 Maybe we can make our column a little bit wider. 321 00:20:29,780 --> 00:20:32,760 Or maybe it's just because this JavaScript console's. 322 00:20:32,770 --> 00:20:34,600 Yeah, that's just because my JavaScript console is open. 323 00:20:34,600 --> 00:20:35,650 So I don't care about that right now. 324 00:20:36,040 --> 00:20:36,490 Perfect. 325 00:20:36,820 --> 00:20:37,810 Now let's choose a date. 326 00:20:38,260 --> 00:20:43,720 Let's choose the good and let's choose the twenty third good that works beautifully. 327 00:20:43,720 --> 00:20:46,180 Now I should be able to submit the form and I can. 328 00:20:46,810 --> 00:20:52,180 So that little tiny bit of javascript made this ever so much better. 329 00:20:52,900 --> 00:21:00,760 Now in the next lecture, I want to get rid of this kind of built in calendar picture that's browser's 330 00:21:00,760 --> 00:21:01,450 specific. 331 00:21:01,450 --> 00:21:04,270 So it's different from in Chrome than it is in Firefox and so on. 332 00:21:04,450 --> 00:21:09,790 I want to put a different date picture in here and we'll use a third party package for that and then 333 00:21:09,790 --> 00:21:12,640 we'll get on to moving some more writing some more custom JavaScript.