0
1
00:00:00,400 --> 00:00:00,930
All right.
1

2
00:00:00,930 --> 00:00:02,760
So how did that go?
2

3
00:00:03,030 --> 00:00:07,070
Well I hope this was challenging but at the same time fun.
3

4
00:00:07,140 --> 00:00:14,880
So the problem essentially boils down to, how do we selectively capitalize the first letter but not any
4

5
00:00:14,880 --> 00:00:15,890
of the other letters.
5

6
00:00:15,990 --> 00:00:19,450
So, as I said, let's break this problem down.
6

7
00:00:19,650 --> 00: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

8
00:00:28,710 --> 00:00:35,790
Now, step two, we need to be able to capitalize the first letter of their name, and then step three,
8

9
00:00:35,790 --> 00:00:42,050
we use the capitalized version of their name to greet them using an alert.
9

10
00:00:42,230 --> 00:00:42,590
OK.
10

11
00:00:42,600 --> 00:00:45,800
So let's try and tackle this one by one.
11

12
00:00:45,870 --> 00: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

13
00:00:52,490 --> 00:00:54,610
via a prompt.
13

14
00:00:54,690 --> 00:00:56,470
So let's delete this line.
14

15
00:00:56,650 --> 00:01:01,140
Let's use our console to verify that we're doing it right every step of the way.
15

16
00:01:01,230 --> 00: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

17
00:01:08,250 --> 00:01:12,190
So now that line of code gets run and it's asking me for my name.
17

18
00:01:12,360 --> 00:01:16,740
So I'm going to give it my name but all in lowercase and I'm going to hit OK.
18

19
00:01:16,890 --> 00:01:23,120
So now if I check inside the console what is the current value of name,
19

20
00:01:23,130 --> 00:01:25,890
then you can see it's lower case angela.
20

21
00:01:26,140 --> 00:01:29,940
OK, so the next part, which is the most challenging part, 
21

22
00:01:29,970 --> 00:01:34,600
how can you capitalize only the first letter of their name?
22

23
00:01:34,920 --> 00: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

24
00:01:40,800 --> 00:01:41,430
learned.
24

25
00:01:41,730 --> 00:01:44,840
But we can actually break down this problem.
25

26
00:01:44,880 --> 00:01:54,360
What if part a of this, we actually isolate the first character, and then we turn the first character
26

27
00:01:54,780 --> 00:01:59,660
to uppercase, step c we isolate the rest of the name,
27

28
00:01:59,820 --> 00:02:06,390
and finally we concatenate the first character with the rest of the characters.
28

29
00:02:06,390 --> 00:02:09,530
So now this seems a little bit more feasible,
29

30
00:02:09,540 --> 00:02:09,940
right?
30

31
00:02:09,960 --> 00: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

32
00:02:15,120 --> 00:02:18,660
steps actually needed to be further broken down.
32

33
00:02:18,660 --> 00:02:19,850
And now we can tackle it.
33

34
00:02:19,860 --> 00:02:22,860
So isolate the first character. We know how to do that.
34

35
00:02:23,010 --> 00:02:32,730
We can say var firstChar = name.slice, and the numbers we're going to put in here are
35

36
00:02:32,730 --> 00:02:41,100
0 and 1 because we want to take the character beginning at the zero position up to but not including
36

37
00:02:41,400 --> 00:02:42,420
the first position.
37

38
00:02:42,420 --> 00: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

39
00:02:51,660 --> 00:02:55,020
pasting it into our console, hitting enter,
39

40
00:02:55,110 --> 00:03:01,460
and let's just check to see what firstChar is currently equal to.
40

41
00:03:01,470 --> 00:03:04,460
So it's equal to the lower case a. Perfect.
41

42
00:03:04,650 --> 00:03:10,090
So the next step, step b, is we want to turn the first character to upper case.
42

43
00:03:10,110 --> 00:03:12,060
So this is very easy as well.
43

44
00:03:12,270 --> 00:03:20,620
Let’s create a var called upperCaseFirstChar, and it's now equal to firstChar, which is the lower case a
44

45
00:03:20,670 --> 00:03:28,710
at the moment, .toUpperCase, and remember we need those two empty parentheses at the end.
45

46
00:03:28,770 --> 00:03:33,450
OK, so let's see if this worked by pasting this into our console.
46

47
00:03:33,450 --> 00:03:39,120
So what is the current value of upperCaseFirstChar?
47

48
00:03:39,120 --> 00:03:42,050
It's capitalized A. Brilliant.
48

49
00:03:42,180 --> 00:03:45,540
So now how do we isolate the rest of the name?
49

50
00:03:45,570 --> 00:03:53,030
Let's create a variable called restOfName, and we will need to use the slice function again.
50

51
00:03:53,040 --> 00: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

52
00:03:59,190 --> 00:04:02,100
everything other than the first character.
52

53
00:04:02,100 --> 00:04:03,280
Now how do we do that?
53

54
00:04:03,330 --> 00:04:05,160
Well, the first part is easy.
54

55
00:04:05,160 --> 00:04:07,920
We can start off at position 1.
55

56
00:04:07,920 --> 00:04:12,140
So that excludes the first character which is at 0.
56

57
00:04:12,480 --> 00:04:14,980
Now what about the last one?
57

58
00:04:15,030 --> 00: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

59
00:04:22,020 --> 00:04:24,810
2 3 4 5 6 characters.
59

60
00:04:24,810 --> 00:04:28,400
So, in order to get all the characters after the letter A,
60

61
00:04:28,680 --> 00: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

62
00:04:35,490 --> 00:04:38,130
and we don't know what the user is going to enter,
62

63
00:04:38,370 --> 00:04:40,380
then if we just put in 6,
63

64
00:04:40,440 --> 00:04:42,290
it’s not always going to work.
64

65
00:04:42,450 --> 00:04:48,720
It's only going to work if the name has 6 characters. But we've learned something really useful in
65

66
00:04:48,720 --> 00:04:49,550
this case.
66

67
00:04:49,620 --> 00:04:55,890
We know that we can get the number of characters through the property that is length. So we can simply
67

68
00:04:55,890 --> 00: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

69
00:05:04,290 --> 00: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

70
00:05:10,800 --> 00:05:11,830
the name.
70

71
00:05:11,910 --> 00: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

72
00:05:20,170 --> 00:05:21,240
And there we go.
72

73
00:05:21,240 --> 00:05:24,090
It's equal to ngela.
73

74
00:05:24,660 --> 00:05:27,050
Beautiful name, right?
74

75
00:05:27,540 --> 00: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

76
00:05:35,850 --> 00:05:45,360
capitalized name. We can use concatenation for this. We can say upperCaseFirstChar + restOfName 
76

77
00:05:45,960 --> 00:05:50,910
is now going to be equal to the name that is capitalized.
77

78
00:05:51,120 --> 00:05:54,130
Paste that in here and let's check it out.
78

79
00:05:55,260 --> 00:05:55,900
There we go.
79

80
00:05:55,910 --> 00:05:59,840
We've now got the capitalized Angela. Pretty cool, right?
80

81
00:05:59,900 --> 00: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

82
00:06:07,910 --> 00:06:08,410
“Hello ,”
82

83
00:06:08,420 --> 00:06:10,920
+ capitalisedName.
83

84
00:06:10,940 --> 00: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

85
00:06:19,700 --> 00:06:24,830
and it changes our name to capitalized Angela and greets us through an alert.
85

86
00:06:25,010 --> 00:06:29,980
So that might have seemed pretty complicated for achieving something quite simple.
86

87
00:06:30,110 --> 00:06:34,230
And if you look on Stack Overflow or Google, there are simpler ways of doing it.
87

88
00:06:34,310 --> 00:06:39,950
But this exercise is really really crucial in starting to build an essential skill that programmers
88

89
00:06:39,950 --> 00:06:47,120
have, which is taking a big problem, chunking it down, breaking it into smaller pieces, and whenever you get
89

90
00:06:47,120 --> 00:06:52,240
stuck on those smaller pieces, then trying to break that problem down even further.
90

91
00:06:52,280 --> 00:07:00,290
Now some of you guys might have realized that we actually need one extra thing to make our code completely
91

92
00:07:00,290 --> 00:07:01,160
foolproof.
92

93
00:07:01,340 --> 00:07:08,240
Because, what if the user, instead of just writing, you know, lower case angela, which we've addressed, what
93

94
00:07:08,240 --> 00:07:16,160
if they wrote lower case to begin with, but then towards the end they added in some capitalized letters?
94

95
00:07:16,610 --> 00:07:19,500
Our current code doesn't address this,
95

96
00:07:19,610 --> 00:07:22,490
and so it still looks a bit weird.
96

97
00:07:22,490 --> 00:07:24,080
Now this is completely optional.
97

98
00:07:24,080 --> 00: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

99
00:07:30,980 --> 00:07:33,100
I'll show you how to do this.
99

100
00:07:33,110 --> 00:07:39,020
This is one of the reasons why testing your code is really important, because there's always these edge
100

101
00:07:39,020 --> 00:07:44,240
cases that you might not have thought about but that might happen when you have thousands of users
101

102
00:07:44,330 --> 00:07:45,440
using your web site.
102

103
00:07:45,530 --> 00:07:52,730
So now that we've achieved turning the first letter into uppercase, fixing this one small user experience
103

104
00:07:52,760 --> 00: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

105
00:07:59,510 --> 00:08:00,110
in here.
105

106
00:08:00,350 --> 00: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

107
00:08:07,940 --> 00:08:14,690
we can take this variable we've already got, restOfName is now equal to the previous version of 
107

108
00:08:14,690 --> 00:08:18,050
restOfName.toLowerCase().
108

109
00:08:18,050 --> 00:08:25,460
And now this changes that variable to make all of those characters lower case, and uses it in the concatenation
109

110
00:08:25,520 --> 00:08:27,360
of the capitalized name.
110

111
00:08:27,380 --> 00: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

112
00:08:35,960 --> 00:08:36,260
hit
112

113
00:08:36,290 --> 00:08:37,460
OK.
113

114
00:08:37,850 --> 00:08:44,970
And, voila, we get our perfect capitalized name no matter what the user decided to enter.
114

115
00:08:45,030 --> 00:08:50,390
So, I hope you had fun with me in this module learning all about strings in Javascript.
115

116
00:08:50,390 --> 00:08:56,410
In the next module we're going to learn more about numbers, doing maths with Javascript and a lot lot
116

117
00:08:56,420 --> 00:08:56,890
more.
117

118
00:08:56,990 --> 00:08:59,060
So I'll see you on the next module.