WEBVTT 0 00:08.950 --> 00:09.680 How do we deal with that? 1 00:09.700 --> 00:15.460 Well, here we're saying if there is no success message and we use that with that exclamation mark, 2 00:15.850 --> 00:22.050 if our response object does not have this success, then we want to deal in this block of code. 3 00:22.060 --> 00:24.610 Let's deal first with the username error. 4 00:24.940 --> 00:27.490 Let's look if the response, 5 00:27.610 --> 00:31.180 remember this response is going to have the errors object. 6 00:32.130 --> 00:33.480 In this errors object, 7 00:33.480 --> 00:38.070 if we go to our file here, we are going to give a key of username. 8 00:39.150 --> 00:47.940 So on this object, if there is a username, then we know we are in an error state for a username. 9 00:47.950 --> 00:53.130 Before we do anything crazy, let's just console log "username error". 10 00:54.070 --> 00:59.830 And we can do the same thing now when it comes to, not username, but food, 11 01:00.540 --> 01:01.410 food error. 12 01:02.720 --> 01:06.320 If the response object has this errors array 13 01:06.710 --> 01:09.830 and in here we've got a key called favFood. 14 01:09.830 --> 01:14.450 If that exists, then we want to console log "food error". 15 01:14.990 --> 01:16.040 Is this making sense? 16 01:16.070 --> 01:17.240 Let's go back to our browser. 17 01:17.420 --> 01:18.590 Let's go to the console. 18 01:19.160 --> 01:21.710 Let's actually access localhost:8000. 19 01:22.130 --> 01:24.050 Let's now not include anything in here. 20 01:24.080 --> 01:25.520 Let's send the details. 21 01:26.120 --> 01:26.630 Success. 22 01:26.630 --> 01:27.830 The data has been submitted. 23 01:27.830 --> 01:28.970 Why is it doing that? 24 01:29.000 --> 01:29.990 (sound effect: well, this is awkward) 25 01:30.740 --> 01:33.170 Oh, I think I've actually spelled errors wrong. 26 01:33.170 --> 01:34.670 That's my whole issue here. 27 01:34.760 --> 01:37.850 Error should be ... let's just highlight everything here. 28 01:37.880 --> 01:39.350 Error. 29 01:39.380 --> 01:40.430 I think that's error. 30 01:40.730 --> 01:41.090 Oh. 31 01:41.120 --> 01:41.600 Okay. 32 01:41.600 --> 01:46.010 So now let's refresh, clear the browser, and send ... username error. 33 01:46.040 --> 01:47.210 Cannot read property favFood. 34 01:47.210 --> 01:47.660 Okay. 35 01:47.690 --> 01:49.310 So let's go here to our index file. 36 01:49.310 --> 01:50.450 This will be very easy to fix. 37 01:50.450 --> 01:51.230 Errors. 38 01:51.260 --> 01:52.040 Errors. 39 01:52.070 --> 01:52.700 There we go. 40 01:52.730 --> 01:55.670 Let's go back to our browser, refresh, send. 41 01:55.700 --> 01:57.680 We get a username error and a food error. 42 01:57.710 --> 02:01.340 Simple misspelling has caused so many issues. Anyway, 43 02:01.460 --> 02:01.880 okay. 44 02:01.880 --> 02:05.790 So now we know that our failure cases are working, which is really, really cool. 45 02:05.820 --> 02:08.040 But now I want to start adding error messages. 46 02:08.040 --> 02:10.080 So let's just finish this off very, very quickly. 47 02:10.080 --> 02:11.190 We are almost done. 48 02:11.850 --> 02:13.020 We don't just want to console it out to 49 02:13.500 --> 02:16.260 the console, we actually want to code and affect some CSS. 50 02:16.260 --> 02:21.750 So why don't we say in this case we know that we've got an error on the username, we access our username 51 02:21.750 --> 02:24.050 input, which is the element itself. 52 02:24.060 --> 02:29.400 We access the ClassList API, which you've seen before in this course and we want to add a class and 53 02:29.400 --> 02:31.920 let's add a class of main, or 54 02:31.920 --> 02:32.340 errorMain. 55 02:33.420 --> 02:35.100 Let's scroll up to our CSS. 56 02:35.870 --> 02:41.900 Let's define a class of errorMain and our errorMain class can just have a border 57 02:44.520 --> 02:46.220 of 1 pixel solid red. 58 02:46.230 --> 02:47.280 Very, very simple. 59 02:47.460 --> 02:48.060 Save this. 60 02:48.060 --> 02:51.790 Go to our browser, refresh everything, clear the console. 61 02:51.810 --> 02:54.700 Send the data and there we go. 62 02:54.720 --> 02:57.900 We've applied styling to that input element. 63 02:57.900 --> 02:58.320 Right. 64 02:58.320 --> 02:58.990 That red border. 65 02:59.010 --> 02:59.670 Can you see it? 66 02:59.670 --> 03:03.390 And we can do exactly the same thing with the food. 67 03:03.390 --> 03:06.030 So let's scroll down, remove the console(), 68 03:06.270 --> 03:12.540 we can grab our food input, access the classList API, add a class called errorMain. 69 03:12.900 --> 03:16.740 If we save this, go to our browser refresh, try and send everything, 70 03:16.740 --> 03:18.420 and now we get errors on both. 71 03:18.600 --> 03:19.740 How awesome. 72 03:19.890 --> 03:22.980 It's very, very quick, very intuitive, but I want to do more. 73 03:22.980 --> 03:26.700 I also want to add a error message. 74 03:26.700 --> 03:28.320 So why don't we add an error message? 75 03:28.740 --> 03:29.670 Let's go here. 76 03:29.940 --> 03:33.270 And in order to add an error message, if we look at our HTML, 77 03:34.310 --> 03:35.390 we've only got an input 78 03:35.390 --> 03:35.830 right? 79 03:35.840 --> 03:41.480 But why don't we add dynamically a span element and within that span element we can have our error message. 80 03:41.530 --> 03:46.760 Okay, so now let's create our error message. 81 03:47.450 --> 03:54.350 All I want to do is I want to define a span element and we can dynamically create it by accessing the 82 03:54.350 --> 03:58.430 createElement() method on the document itself. 83 03:58.430 --> 04:00.270 And the element we want to create is a span. 84 04:00.290 --> 04:02.960 I then want to put in our error message. 85 04:03.870 --> 04:09.390 All we have to do is access our span, affect its innerHTML property, and we can use template literals 86 04:09.390 --> 04:09.900 here. 87 04:09.930 --> 04:10.860 If you don't know what they are, 88 04:10.890 --> 04:15.930 please check out my JavaScript Course, but it's basically just a way that we can write text and variables 89 04:15.930 --> 04:17.520 very easily. 90 04:17.790 --> 04:21.420 The variables have to all be within this dollar curly braces format. 91 04:21.420 --> 04:24.570 So we want to now access our response object. 92 04:24.690 --> 04:30.930 And on here we've got our errors object, and we want to access our username because remember, if we 93 04:30.930 --> 04:39.480 go to our file, we are basically accessing this - our errors "username" key and that's going to return us our 94 04:39.480 --> 04:40.020 message. 95 04:40.020 --> 04:40.620 Do you know what? 96 04:40.620 --> 04:44.910 Because we are not even including text, we don't need template literals. 97 04:45.940 --> 04:47.050 I just realized that now. 98 04:47.050 --> 04:49.270 So we can just do this - very, very simple. 99 04:49.420 --> 04:50.440 Before I continue 100 04:50.470 --> 04:54.310 why don't we look at the browser and see this error message? 101 04:54.350 --> 04:55.240 Well, let me ask you this. 102 04:55.240 --> 04:58.000 Do you think the error message will display in its current form? 103 04:58.810 --> 05:03.700 It won't. Because we've created the span element, but we haven't put it anywhere. 104 05:03.700 --> 05:04.660 It's floating in space. 105 05:04.660 --> 05:06.640 We haven't told it where it belongs. 106 05:06.640 --> 05:10.540 So if we go to the browser and submit now, we still don't see an error message. 107 05:11.080 --> 05:14.950 In order for us to see the error message, we have to attach the span to something. 108 05:14.950 --> 05:21.850 And if we look at our HTML code, why don't we append it to this main usernameWrapper div? 109 05:23.800 --> 05:24.870 It's super, super easy. 110 05:24.870 --> 05:32.460 All we have to do is we grab our divName element and we access this property called appendChild(). 111 05:32.460 --> 05:34.200 It really, really is this easy. 112 05:34.200 --> 05:36.930 And all we want to do is we want to append our span to that div. 113 05:37.260 --> 05:43.170 So if we go to the browser now, send, sorry, let's refresh and send. 114 05:43.200 --> 05:45.000 We are now getting an error message. 115 05:45.000 --> 05:46.980 "Your funky username is required." 116 05:47.010 --> 05:50.700 Of course the styling is terrible, so why don't we add some styling? 117 05:50.730 --> 05:52.050 Why don't we add a class? 118 05:52.050 --> 05:57.810 We can access our span, access the classList API and we can add a class called error. 119 05:58.260 --> 06:02.280 Why don't we do exactly the same thing but add another class called input. 120 06:02.280 --> 06:03.750 So let's go to our browser. 121 06:03.780 --> 06:07.920 Well, before I actually submit again, let's define these classes and you'll see why I'm doing two 122 06:07.920 --> 06:09.180 classes in a second. 123 06:09.180 --> 06:11.970 So the first class I want to define here is error. 124 06:12.060 --> 06:14.730 We can display inline. 125 06:16.440 --> 06:18.570 And we can give it a color of red. 126 06:18.930 --> 06:19.500 How's that? 127 06:19.530 --> 06:19.860 Let's go 128 06:19.860 --> 06:20.310 here. 129 06:20.310 --> 06:20.970 Refresh. 130 06:20.970 --> 06:21.660 Send. 131 06:21.930 --> 06:22.380 There we go. 132 06:22.410 --> 06:24.480 "Your funky username is required." 133 06:24.870 --> 06:26.910 Let's do exactly the same thing now 134 06:28.110 --> 06:29.280 for our food. 135 06:29.850 --> 06:31.770 Let's define a span element, 136 06:33.710 --> 06:34.820 createElement(), 137 06:34.850 --> 06:36.680 the element we want to create is a span. 138 06:36.920 --> 06:38.990 You're just going through the same process. 139 06:39.050 --> 06:42.530 The span.innerHTML can be our response object. On here, 140 06:42.530 --> 06:45.980 we've got our errors object with the favFood key. 141 06:46.370 --> 06:47.480 Very, very simple. 142 06:47.510 --> 06:50.780 Then we want to access the classList API, 143 06:50.810 --> 06:53.930 we want to add an error class to this. 144 06:55.000 --> 06:57.580 And an input class to this. 145 06:57.580 --> 07:00.100 And of course we don't want to access our divName. 146 07:00.100 --> 07:05.650 We want to access our divFood wrapper now, and we want to append this span element to it. 147 07:07.470 --> 07:11.430 So now if we go to the browser, we send, we're getting two error messages 148 07:11.430 --> 07:13.970 now! How awesome is this, my dear students? 149 07:13.980 --> 07:18.600 But you'll notice a problem now because the problem is if the user clicks again, we just duplicating 150 07:18.600 --> 07:21.420 our messages and it's going to start getting very, very messy. 151 07:21.420 --> 07:23.400 Well, actually, let me show you the problem in another way. 152 07:23.400 --> 07:27.810 Let's say the user first fills in his username but forgets the food. 153 07:27.810 --> 07:28.500 Clicks send. 154 07:28.530 --> 07:29.490 We've got an error. 155 07:30.280 --> 07:37.690 If the user now deletes username, includes food and clicks send, we are still getting that invalid state on 156 07:37.690 --> 07:40.060 the food input and it shouldn't be like that. 157 07:40.060 --> 07:45.280 So in a way we need to tell the browser to refresh everything every time the user clicks on send. 158 07:45.780 --> 07:47.620 As it turns out, it's very, very easy. 159 07:47.620 --> 07:52.420 And this is why I put ... if you scroll up in our HTML ... this is why I put the class of "input" on all of these 160 07:52.420 --> 07:59.530 inputs, and it's the reason we added a class of input to these spans, because this is the issue I'm 161 07:59.530 --> 08:00.610 going to be dealing with right now. 162 08:00.610 --> 08:00.860 Right. 163 08:00.880 --> 08:08.590 So before we start dealing with the success cases and the failure cases, let's reformat the form every 164 08:08.590 --> 08:09.610 time it's submitted, right? 165 08:09.610 --> 08:11.200 We want to almost start from scratch again. 166 08:11.200 --> 08:17.170 So in order to do that, let's grab all of our inputs and we can do that by document 167 08:17.170 --> 08:21.250 getElementsByClassName(), and the class name we've given them all is input, right? 168 08:21.250 --> 08:27.280 And this returns a collection so we can use the for...of loop, which is very, very intuitive. 169 08:27.310 --> 08:33.740 We just grabbing every item in that collection and then through each iteration we get access to each 170 08:33.740 --> 08:36.200 item and we put that item in a variable called item. 171 08:36.230 --> 08:37.040 Let me show you what I mean. 172 08:37.040 --> 08:39.560 So we're going to grab each item in the collection. 173 08:39.590 --> 08:44.840 We're going to access the classList API, but this time I want to remove all errors, right? 174 08:44.840 --> 08:45.710 All error messages. 175 08:45.710 --> 08:55.250 So I'm going to remove the errorMain class and we're going to remove the error class. 176 08:56.120 --> 08:58.490 We save this, we go to the browser, 177 08:58.910 --> 09:00.380 let's refresh. 178 09:00.380 --> 09:02.570 In order to test this, let's send this. 179 09:02.600 --> 09:04.580 We get our first error message, which is fine. 180 09:04.580 --> 09:05.750 Let's send it again. 181 09:06.200 --> 09:10.850 Now we've got another problem because that span is still showing, right, "Your funky username is required." 182 09:10.850 --> 09:15.080 We've removed the styling, the red is gone, but the actual span is still there. 183 09:15.080 --> 09:22.670 So what we need to do is actually, in our CSS file here, we need to grab our span and set its display 184 09:22.670 --> 09:23.840 property to none. 185 09:24.300 --> 09:25.370 Let's save this. 186 09:25.670 --> 09:27.110 Now we can refresh again. 187 09:27.110 --> 09:28.010 Let's send. 188 09:28.100 --> 09:29.420 Let's click send again. 189 09:29.930 --> 09:30.830 And there we go. 190 09:30.830 --> 09:33.800 We still an error state, but we're not duplicating the spans. 191 09:34.040 --> 09:40.600 Let's now fill in the first item, send, and it's entirely fixed. 192 09:40.610 --> 09:41.750 We've removed the red border. 193 09:41.750 --> 09:44.300 We've removed the error message entirely. 194 09:45.160 --> 09:47.500 And now the user can send, and we've got a success. 195 09:48.640 --> 09:52.540 But, you know what we haven't done? We haven't styled the success message in any way. 196 09:52.570 --> 09:54.970 Can you figure out how to style that? 197 09:55.450 --> 09:56.500 Well, it's very simple. 198 09:56.530 --> 09:58.420 All we have to do is create a class. 199 09:58.420 --> 09:59.740 Let's just call it success. 200 10:00.770 --> 10:03.750 Uh, we've done text-align, width, margin here. 201 10:03.760 --> 10:05.050 Why don't we just copy/paste? 202 10:06.090 --> 10:06.360 Right. 203 10:06.360 --> 10:07.830 We can give it a color of green. 204 10:09.630 --> 10:10.320 It should be width. 205 10:12.870 --> 10:17.880 And all we have to do ... it should work, is in the success case 206 10:18.030 --> 10:23.400 we want to access our form, access our classList API, and we want to add a class of, you guessed 207 10:23.400 --> 10:24.750 it, success. 208 10:25.600 --> 10:27.490 Let's save this, go to the browser, 209 10:27.820 --> 10:28.630 go back. 210 10:29.470 --> 10:31.630 Refresh, click send. 211 10:31.630 --> 10:32.570 And there we go. 212 10:32.590 --> 10:33.160 "Success. 213 10:33.160 --> 10:38.500 The data has been submitted to the server." And what's really cool, we can even scroll up here. 214 10:38.560 --> 10:44.080 You know, you can play around with it, give it a nice background color of light green. 215 10:46.600 --> 10:49.180 Padding 20 pixels. 216 10:49.210 --> 10:50.440 Let's submit random text. 217 10:50.440 --> 10:50.800 Send. 218 10:50.800 --> 10:51.490 And there we go. 219 10:51.490 --> 10:54.460 It's even a much more bolder success message. 220 10:54.490 --> 10:55.660 Don't even have to make it that wide. 221 10:55.660 --> 10:56.110 Why don't we do it 222 10:56.110 --> 10:56.950 50%. 223 10:57.820 --> 11:00.190 Let's go to the browser, send. 224 11:01.810 --> 11:02.980 How awesome is this 225 11:02.980 --> 11:07.600 my dear students. I know, I know this has been a very long lecture, but I want you to at least get 226 11:07.600 --> 11:13.000 a feel for how server side code works, how you can start creating error messages, checking data on 227 11:13.000 --> 11:13.960 the server side, 228 11:13.960 --> 11:17.200 sending back a response, and the browser takes that response, 229 11:17.290 --> 11:22.000 manipulating JavaScript, displaying things to the screen - it really has been an interesting example. 230 11:22.000 --> 11:24.100 I know I've had a lot of fun putting it together. 231 11:24.220 --> 11:26.740 I love coding but don't get lost in all the detail. 232 11:26.830 --> 11:28.420 Let's just walk through it very, very quickly. 233 11:28.420 --> 11:30.760 We've got our CSS at the top, not much there. 234 11:31.210 --> 11:33.880 Then we've got a very simple HTML form. 235 11:34.450 --> 11:35.950 Again, nothing complicated. 236 11:35.950 --> 11:37.510 We just wrap each widget in a div. 237 11:37.510 --> 11:40.150 We gave a few class names and IDs. 238 11:40.180 --> 11:46.660 We then have our script and we use the script tag because we're using AJAX and to use AJAX we need to 239 11:46.660 --> 11:47.380 use JavaScript. 240 11:47.800 --> 11:53.110 We used AJAX in the form of this XHR object. And then we completed our 3 steps. 241 11:53.110 --> 11:54.340 We opened up the request. 242 11:54.370 --> 12:00.100 We then defined what happened on a successful request, aka we are listening for the ready state of 4 243 12:00.100 --> 12:01.690 and the status of 200. 244 12:01.810 --> 12:07.240 When that happens, we check whether we are in a success state or failure state, and then we obviously 245 12:07.240 --> 12:08.800 do different things depending on that. 246 12:09.010 --> 12:14.830 And finally, step 3 of the AJAX is to send our request to a server when the user submits the form. 247 12:14.910 --> 12:15.780 Very simple. I hope 248 12:15.790 --> 12:17.260 it's intuitive. 249 12:17.440 --> 12:20.680 Don't worry too much about the syntax and the code and how to write it. 250 12:20.710 --> 12:24.010 That comes with a lot of practice with, you know, working with server side code. 251 12:24.010 --> 12:27.370 And I don't want to get complicated with server side code in this course. 252 12:27.370 --> 12:30.550 I keep saying that. But this should give you enough to get started. 253 12:30.950 --> 12:35.140 I hope you're having a lot of fun, and I'll see you in the next lecture because I still want to talk about server 254 12:35.140 --> 12:36.790 side code in a bit more detail. 255 12:36.970 --> 12:37.600 Adios. 👋