WEBVTT 0 00:00.110 --> 00:00.990 Here we go. 1 00:01.010 --> 00:02.750 This is another cool example. 2 00:02.750 --> 00:03.990 I'm super excited. 3 00:04.010 --> 00:04.970 Hope you are too. 4 00:05.000 --> 00:06.560 And we're going to smash it together. 5 00:06.590 --> 00:07.730 Seriously, we are. 6 00:07.910 --> 00:11.250 And it's really cool because we're using a progress element on a form. 7 00:11.270 --> 00:13.640 Let's say we've got a form with multiple questions. 8 00:13.640 --> 00:16.040 Let's even say you're designing a questionnaire. 9 00:16.520 --> 00:24.080 You might want to give the user a visual representation as to how far along they are in the entire process. 10 00:24.110 --> 00:28.360 And you might want to give the user some encouraging messages along the way. 11 00:28.370 --> 00:30.030 So that's what this example is all about. 12 00:30.050 --> 00:35.660 We've got a form and I've only got five questions. And I've just done inputs where it's type attribute 13 00:35.660 --> 00:36.770 has been set to text. 14 00:36.770 --> 00:37.790 Very, very simple. 15 00:37.790 --> 00:38.480 I know, I know. 16 00:38.480 --> 00:39.650 It's a very simple form. 17 00:39.650 --> 00:42.050 Even the styling, you know, I haven't gone crazy. 18 00:42.050 --> 00:47.480 But you'll notice that when we land on the default page here, we've got a message, "The form, its 19 00:47.480 --> 00:49.190 calling you". And we've got a progress bar. 20 00:49.190 --> 00:50.810 But the progress bar right now is empty. 21 00:50.810 --> 00:55.670 But as soon as we start off with one question and the user starts typing, wow, how cool is that? 22 00:55.670 --> 01:03.090 Firstly, the message has dynamically updated. The progress bar has dynamically updated, and the user 23 01:03.090 --> 01:09.810 has a visual green background displayed to him or her showing that this is now a valid input. 24 01:09.870 --> 01:10.590 How awesome. 25 01:10.590 --> 01:12.540 And let's do the second one. 26 01:12.540 --> 01:13.590 Same thing. 27 01:13.590 --> 01:17.400 Progress bar is updated and we have a new message. 28 01:17.580 --> 01:18.510 "Eggcellent. 29 01:18.510 --> 01:19.800 Keep on cracking." 30 01:20.400 --> 01:23.760 Of course, when we go on to the third question, we get another message. 31 01:23.760 --> 01:24.960 "Champion. Don't stop." 32 01:24.960 --> 01:26.730 The progress bar keeps going up. 33 01:26.790 --> 01:28.110 We get new messages. 34 01:28.110 --> 01:34.530 And when we hit question number five, we've got one final message, and that is go on, push submit. 35 01:34.740 --> 01:38.190 You're giving the user encouragement to submit the form. 36 01:38.970 --> 01:41.910 Very, very cool example, very practical example. 37 01:42.360 --> 01:44.070 But can you think about how to do it? 38 01:44.100 --> 01:50.370 Yes, we have to use JavaScript and whenever you think about JavaScript and dynamically updating things, 39 01:50.370 --> 01:52.650 you've got to think, okay, what event are we listening for? 40 01:52.680 --> 01:54.750 You can probably listen for quite a few events here. 41 01:54.750 --> 01:59.220 I chose in the solution video, which you'll see, to listen for the keyup event. 42 01:59.310 --> 02:06.060 So every time, you know, basically a character is entered into that text field, I want to loop through 43 02:06.060 --> 02:11.700 all of our inputs, figure out how many are valid, and then depending on how many are valid, we then 44 02:11.700 --> 02:13.470 update that progress bar. 45 02:13.470 --> 02:20.040 So, for example, if nothing is entered into question two, the progress bar needs to decrease because 46 02:20.040 --> 02:25.530 we've looped through this collection of inputs, and we've only determined that now 4 are valid out 47 02:25.530 --> 02:26.310 of 5. 48 02:26.310 --> 02:29.190 So I know it's a bit tricky because we're going to have to loop through something. 49 02:29.190 --> 02:33.510 We're going to have to get a collection of all these inputs and then we have to keep track, aka we 50 02:33.510 --> 02:38.070 have to create a variable keeping track of how many inputs are valid. 51 02:38.250 --> 02:42.120 I know it might be a bit advanced, I know that, but stick with me. 52 02:42.120 --> 02:43.170 I believe you can do it. 53 02:43.200 --> 02:47.610 We've done a lot in this course already and yeah, give it a crack. 54 02:47.610 --> 02:48.240 Give it a go. 55 02:48.240 --> 02:50.730 Even if you can only do the HTML, that's fine. 56 02:50.850 --> 02:56.820 There are 3 elements to this solution, by the way. It's (1) building the HTML, it's then (2) styling the HTML with 57 02:56.850 --> 02:59.940 CSS, and finally (3) it's adding JavaScript. 58 03:00.120 --> 03:02.280 So I want to split the solution into 2 videos. 59 03:02.280 --> 03:04.380 One, dealing with HTML and CSS. 60 03:04.380 --> 03:07.470 And the final part of the solution will be dealing with the JavaScript. 61 03:08.310 --> 03:11.610 Hope you're having a lot of fun, and I'll see you in the solution videos.