1 00:00:00,840 --> 00:00:03,220 So it's time again for another exercise. 2 00:00:03,570 --> 00:00:08,250 So this project here is going to cover everything that we talked about in the last few videos. 3 00:00:08,280 --> 00:00:14,820 So that includes things like the form to egg different types of inputs including dropdown menus radio 4 00:00:14,820 --> 00:00:15,750 buttons. 5 00:00:15,750 --> 00:00:18,280 It also includes validations and labels. 6 00:00:18,660 --> 00:00:23,850 So pretty much everything we've talked about and what you're going to do is combine them to make a registration 7 00:00:23,850 --> 00:00:26,480 form for some fake Web site. 8 00:00:26,940 --> 00:00:33,330 So it's going to look like this a form where a user can go sign up with a Name First Name Last Name 9 00:00:33,840 --> 00:00:35,310 pick gender. 10 00:00:35,370 --> 00:00:37,170 E-mail password. 11 00:00:37,290 --> 00:00:44,210 A birthday with three dropped menus and a checkbox to agree to the terms and conditions. 12 00:00:44,430 --> 00:00:46,750 So again a few hints here. 13 00:00:47,060 --> 00:00:48,860 These should be text inputs. 14 00:00:49,560 --> 00:00:50,950 This should be a password and. 15 00:00:51,000 --> 00:00:52,490 This should be an e-mail input. 16 00:00:52,500 --> 00:00:53,850 These are radio buttons. 17 00:00:54,000 --> 00:00:56,790 These are three select tags. 18 00:00:56,880 --> 00:01:02,930 This is a checkbox input and this is submit input. 19 00:01:03,360 --> 00:01:06,020 So there are validations that are required. 20 00:01:06,540 --> 00:01:10,140 So first name last name and email cannot be blank. 21 00:01:10,140 --> 00:01:11,120 They are required 22 00:01:13,950 --> 00:01:16,660 e-mail must be a valid email address. 23 00:01:17,190 --> 00:01:21,600 So that has to follow the correct e-mail format. 24 00:01:21,600 --> 00:01:26,720 And there is a bonus here and this is one that I encourage everyone to try and find. 25 00:01:26,760 --> 00:01:32,730 So the point of this this is one of our first instances of me asking you to do something that I haven't 26 00:01:32,730 --> 00:01:34,340 directly shown you how to do. 27 00:01:34,560 --> 00:01:39,690 And as I've said before this is really what it's like to be a developer you're tasked with something 28 00:01:39,780 --> 00:01:41,350 you have some idea you want to try. 29 00:01:41,430 --> 00:01:42,730 You have no idea how to do it. 30 00:01:42,900 --> 00:01:45,440 So you go online and he did some researching. 31 00:01:45,750 --> 00:01:49,380 So the exercise here is to add a nother validation. 32 00:01:49,410 --> 00:01:55,320 A new type that we haven't talked about yet which is to validate the length of something and the way 33 00:01:55,320 --> 00:01:56,010 it should work. 34 00:01:56,190 --> 00:02:00,720 The password that the user types in must be between five and 10 characters. 35 00:02:00,780 --> 00:02:03,300 Otherwise we get this error here. 36 00:02:03,990 --> 00:02:06,380 So it's another one of these validations. 37 00:02:06,390 --> 00:02:07,990 It's just one that we haven't seen yet. 38 00:02:08,070 --> 00:02:12,500 So I recommend just pulling up Google and searching away. 39 00:02:12,570 --> 00:02:13,300 One quick note. 40 00:02:13,320 --> 00:02:14,800 This needs to be an HMO. 41 00:02:14,820 --> 00:02:20,370 So if you know javascript no javascript allowed that's considered cheating for this exercise and then 42 00:02:20,370 --> 00:02:25,010 one last thing the three just on menus those need to be select tags. 43 00:02:25,020 --> 00:02:30,240 One note though you do not need to have all the years all the months all the days in a month that's 44 00:02:30,240 --> 00:02:31,140 just busywork. 45 00:02:31,170 --> 00:02:35,390 I would just get two or three items in there just so you can see have the three selects. 46 00:02:35,420 --> 00:02:38,290 There's the slight drop down menus there. 47 00:02:38,400 --> 00:02:40,530 You don't need to worry about filling them though. 48 00:02:41,280 --> 00:02:41,560 OK. 49 00:02:41,580 --> 00:02:46,140 So go ahead and get started if you want to stick around for another moment. 50 00:02:46,140 --> 00:02:48,790 I'm just going to give a demo of the actual site now. 51 00:02:49,110 --> 00:02:54,020 So again I leave everything blank I need to fill this out. 52 00:02:54,530 --> 00:03:00,390 I need to fill in last name radio button here. 53 00:03:01,780 --> 00:03:02,520 E-mail. 54 00:03:02,520 --> 00:03:04,950 Leave it blank tells me to fill it in. 55 00:03:05,190 --> 00:03:07,290 If I don't put a proper e-mail It gets mad at me 56 00:03:11,310 --> 00:03:14,760 and then password has to be filled out. 57 00:03:14,990 --> 00:03:18,880 One character is not enough for characters not enough. 58 00:03:18,900 --> 00:03:24,520 Now if I go to five or six or whatever this is I now have enough characters. 59 00:03:25,060 --> 00:03:27,520 A dropdown menu. 60 00:03:27,600 --> 00:03:28,320 Birthday. 61 00:03:28,500 --> 00:03:30,450 I can agree or not agree. 62 00:03:30,510 --> 00:03:31,890 And now the form of it. 63 00:03:32,280 --> 00:03:33,730 OK so that's it there. 64 00:03:33,810 --> 00:03:35,400 Go ahead and attempt this on your own. 65 00:03:35,640 --> 00:03:39,390 And then as always I'll break it down step by step in the next video.