WEBVTT 0 00:00.400 --> 00:00.930 All right. 1 00:00.930 --> 00:02.760 So how did that go? 2 00:03.030 --> 00:07.070 Well I hope this was challenging but at the same time fun. 3 00:07.140 --> 00:14.880 So the problem essentially boils down to, how do we selectively capitalize the first letter but not any 4 00:14.880 --> 00:15.890 of the other letters. 5 00:15.990 --> 00:19.450 So, as I said, let's break this problem down. 6 00:19.650 --> 00:28.710 So, step one, we need to be able to create a variable that stores the name that the user enters via a prompt. 7 00:28.710 --> 00:35.790 Now, step two, we need to be able to capitalize the first letter of their name, and then step three, 8 00:35.790 --> 00:42.050 we use the capitalized version of their name to greet them using an alert. 9 00:42.230 --> 00:42.590 OK. 10 00:42.600 --> 00:45.800 So let's try and tackle this one by one. 11 00:45.870 --> 00:52.170 Let's create a var that we can call just name, and we can use it to store the name that they give us 12 00:52.490 --> 00:54.610 via a prompt. 13 00:54.690 --> 00:56.470 So let's delete this line. 14 00:56.650 --> 01:01.140 Let's use our console to verify that we're doing it right every step of the way. 15 01:01.230 --> 01:07.990 So I'm going to put this into the console and I'm going to paste it in here and hit enter. 16 01:08.250 --> 01:12.190 So now that line of code gets run and it's asking me for my name. 17 01:12.360 --> 01:16.740 So I'm going to give it my name but all in lowercase and I'm going to hit OK. 18 01:16.890 --> 01:23.120 So now if I check inside the console what is the current value of name, 19 01:23.130 --> 01:25.890 then you can see it's lower case angela. 20 01:26.140 --> 01:29.940 OK, so the next part, which is the most challenging part, 21 01:29.970 --> 01:34.600 how can you capitalize only the first letter of their name? 22 01:34.920 --> 01:40.800 Well, if you look at this problem just by itself it seems like we can’t achieve it using only what we've 23 01:40.800 --> 01:41.430 learned. 24 01:41.730 --> 01:44.840 But we can actually break down this problem. 25 01:44.880 --> 01:54.360 What if part a of this, we actually isolate the first character, and then we turn the first character 26 01:54.780 --> 01:59.660 to uppercase, step c we isolate the rest of the name, 27 01:59.820 --> 02:06.390 and finally we concatenate the first character with the rest of the characters. 28 02:06.390 --> 02:09.530 So now this seems a little bit more feasible, 29 02:09.540 --> 02:09.940 right? 30 02:09.960 --> 02:14.940 We've initially tried to break down the problem as we saw fit but then we realized that one of these 31 02:15.120 --> 02:18.660 steps actually needed to be further broken down. 32 02:18.660 --> 02:19.850 And now we can tackle it. 33 02:19.860 --> 02:22.860 So isolate the first character. We know how to do that. 34 02:23.010 --> 02:32.730 We can say var firstChar = name.slice, and the numbers we're going to put in here are 35 02:32.730 --> 02:41.100 0 and 1 because we want to take the character beginning at the zero position up to but not including 36 02:41.400 --> 02:42.420 the first position. 37 02:42.420 --> 02:51.660 So that's going to be the first character of the string. So we can again verify this by copying it and 38 02:51.660 --> 02:55.020 pasting it into our console, hitting enter, 39 02:55.110 --> 03:01.460 and let's just check to see what firstChar is currently equal to. 40 03:01.470 --> 03:04.460 So it's equal to the lower case a. Perfect. 41 03:04.650 --> 03:10.090 So the next step, step b, is we want to turn the first character to upper case. 42 03:10.110 --> 03:12.060 So this is very easy as well. 43 03:12.270 --> 03:20.620 Let’s create a var called upperCaseFirstChar, and it's now equal to firstChar, which is the lower case a 44 03:20.670 --> 03:28.710 at the moment, .toUpperCase, and remember we need those two empty parentheses at the end. 45 03:28.770 --> 03:33.450 OK, so let's see if this worked by pasting this into our console. 46 03:33.450 --> 03:39.120 So what is the current value of upperCaseFirstChar? 47 03:39.120 --> 03:42.050 It's capitalized A. Brilliant. 48 03:42.180 --> 03:45.540 So now how do we isolate the rest of the name? 49 03:45.570 --> 03:53.030 Let's create a variable called restOfName, and we will need to use the slice function again. 50 03:53.040 --> 03:58.890 So we're going to take the name that they gave us, we're going to slice the characters so that we get 51 03:59.190 --> 04:02.100 everything other than the first character. 52 04:02.100 --> 04:03.280 Now how do we do that? 53 04:03.330 --> 04:05.160 Well, the first part is easy. 54 04:05.160 --> 04:07.920 We can start off at position 1. 55 04:07.920 --> 04:12.140 So that excludes the first character which is at 0. 56 04:12.480 --> 04:14.980 Now what about the last one? 57 04:15.030 --> 04:22.020 It's pretty easy if we know that the name is Angela because we can count and we can see this is 1 58 04:22.020 --> 04:24.810 2 3 4 5 6 characters. 59 04:24.810 --> 04:28.400 So, in order to get all the characters after the letter A, 60 04:28.680 --> 04:35.440 all we need to do is to write 6 in here. Now, because we're getting the name through a prompt, 61 04:35.490 --> 04:38.130 and we don't know what the user is going to enter, 62 04:38.370 --> 04:40.380 then if we just put in 6, 63 04:40.440 --> 04:42.290 it’s not always going to work. 64 04:42.450 --> 04:48.720 It's only going to work if the name has 6 characters. But we've learned something really useful in 65 04:48.720 --> 04:49.550 this case. 66 04:49.620 --> 04:55.890 We know that we can get the number of characters through the property that is length. So we can simply 67 04:55.890 --> 05:04.290 say name.length, and we'll be able to get the length of whatever name it is that the user enters, 68 05:04.290 --> 05:10.800 so we will always be able to get the last position to put into our slice in order to get the rest of 69 05:10.800 --> 05:11.830 the name. 70 05:11.910 --> 05:19.830 So let's paste this into here as well and let's run it and let's see what restOfName is equal to. 71 05:20.170 --> 05:21.240 And there we go. 72 05:21.240 --> 05:24.090 It's equal to ngela. 73 05:24.660 --> 05:27.050 Beautiful name, right? 74 05:27.540 --> 05:35.460 So now finally we can add our uppercase first character to the rest of the name in order to get our 75 05:35.850 --> 05:45.360 capitalized name. We can use concatenation for this. We can say upperCaseFirstChar + restOfName 76 05:45.960 --> 05:50.910 is now going to be equal to the name that is capitalized. 77 05:51.120 --> 05:54.130 Paste that in here and let's check it out. 78 05:55.260 --> 05:55.900 There we go. 79 05:55.910 --> 05:59.840 We've now got the capitalized Angela. Pretty cool, right? 80 05:59.900 --> 06:07.790 And now all we have to do is to put the capsulized version into the alert and greet the user by saying 81 06:07.910 --> 06:08.410 “Hello ,” 82 06:08.420 --> 06:10.920 + capitalisedName. 83 06:10.940 --> 06:19.460 So now let's run our code and it asks us for our name, so we'll give it angela, lowercase, hit OK, 84 06:19.700 --> 06:24.830 and it changes our name to capitalized Angela and greets us through an alert. 85 06:25.010 --> 06:29.980 So that might have seemed pretty complicated for achieving something quite simple. 86 06:30.110 --> 06:34.230 And if you look on Stack Overflow or Google, there are simpler ways of doing it. 87 06:34.310 --> 06:39.950 But this exercise is really really crucial in starting to build an essential skill that programmers 88 06:39.950 --> 06:47.120 have, which is taking a big problem, chunking it down, breaking it into smaller pieces, and whenever you get 89 06:47.120 --> 06:52.240 stuck on those smaller pieces, then trying to break that problem down even further. 90 06:52.280 --> 07:00.290 Now some of you guys might have realized that we actually need one extra thing to make our code completely 91 07:00.290 --> 07:01.160 foolproof. 92 07:01.340 --> 07:08.240 Because, what if the user, instead of just writing, you know, lower case angela, which we've addressed, what 93 07:08.240 --> 07:16.160 if they wrote lower case to begin with, but then towards the end they added in some capitalized letters? 94 07:16.610 --> 07:19.500 Our current code doesn't address this, 95 07:19.610 --> 07:22.490 and so it still looks a bit weird. 96 07:22.490 --> 07:24.080 Now this is completely optional. 97 07:24.080 --> 07:30.980 You can either pause the video now and see if you can fix this bug or you can follow along with me and 98 07:30.980 --> 07:33.100 I'll show you how to do this. 99 07:33.110 --> 07:39.020 This is one of the reasons why testing your code is really important, because there's always these edge 100 07:39.020 --> 07:44.240 cases that you might not have thought about but that might happen when you have thousands of users 101 07:44.330 --> 07:45.440 using your web site. 102 07:45.530 --> 07:52.730 So now that we've achieved turning the first letter into uppercase, fixing this one small user experience 103 07:52.760 --> 07:59.510 issue is going to be a walk in the park, because all we need to do is just to add another small step 104 07:59.510 --> 08:00.110 in here. 105 08:00.350 --> 08:07.940 We can call this one d and this one e, and we can say change the rest of the name to lowercase. So 106 08:07.940 --> 08:14.690 we can take this variable we've already got, restOfName is now equal to the previous version of 107 08:14.690 --> 08:18.050 restOfName.toLowerCase(). 108 08:18.050 --> 08:25.460 And now this changes that variable to make all of those characters lower case, and uses it in the concatenation 109 08:25.520 --> 08:27.360 of the capitalized name. 110 08:27.380 --> 08:35.600 So now if we run our code and we put in what we had before which is lower case ang, upper case ELA, 111 08:35.960 --> 08:36.260 hit 112 08:36.290 --> 08:37.460 OK. 113 08:37.850 --> 08:44.970 And, voila, we get our perfect capitalized name no matter what the user decided to enter. 114 08:45.030 --> 08:50.390 So, I hope you had fun with me in this module learning all about strings in Javascript. 115 08:50.390 --> 08:56.410 In the next module we're going to learn more about numbers, doing maths with Javascript and a lot lot 116 08:56.420 --> 08:56.890 more. 117 08:56.990 --> 08:59.060 So I'll see you on the next module.