Original subtitles

1 1

Welcome back to the last coding challenge 2

2

of this section. 3

3

And this one is gonna be quite a bit different 4

4

from the previous ones. 5

5

So in this one, I want you to write a program 6

6

that receives a list of variable names, 7

7

written in the underscore case, 8

8

and your program should then convert them 9

9

to camel case like this. 10

10

Now, the input will come from a text area 11

11

that was inserted into the DOM, 12

12

using this code below here. 13

13

So, this code here created the text area, 14

14

and this one the button using the createElement function, 15

15

which you will learn about later. 16

16

That's where the variable name list will come from, 17

17

and the conversion will happen 18

18

when this button here is clicked. 19

19

And here is the test data. 20

20

This is what you will take 21

21

and paste here into this text area, 22

22

and as you click the button, 23

23

you should produce this output here. 24

24

So five separate console dot log outputs. 25

25

Essentially, five different results. 26

26

Here are a couple of hints for you to solve this problem. 27

27

First off, you need to remember which character 28

28

actually defines a new line in the text area. 29

29

I hope you can remember that. 30

30

Then, the second one, 31

31

the solution only needs to work for a variable 32

32

made out of two words. 33

33

For example, in this format, a underscore b. 34

34

So that's exactly what we have here, right? 35

35

Then number three, start to solve this challenge 36

36

without worrying at all about this here. 37

37

Because this actually is a little bit difficult. 38

38

And so start by only creating this variable name 39

39

in the camel case notation. 40

40

And finally, I also want to let you know that this challenge 41

41

is quite difficult on purpose. 42

42

So once again, I really want you to challenge yourself, 43

43

but in case you're stuck, 44

44

of course, you should not get frustrated. 45

45

Instead, you can just start watching the solution, 46

46

and then if that helps you, you just pause and continue. 47

47

Then once you made it work with this test data, 48

48

you can of course, also use your own. 49

49

So pause the video now and take all the time that you need, 50

50

and I see you back here as soon as you're ready. 51

51

And let's start by attaching an event handler to the button. 52

52

So to this button here. 53

53

All we have to do is querySelector, 54

54

actually, document dot querySelector, 55

55

and then we just select the button element. 56

56

And then add event listener for a click, 57

57

and then a certain function. 58

58

And the first thing that we need to do 59

59

is to get the value out of the text area. 60

60

And for that, I already put you this snippet of code here. 61

61

So let's grab that and just to start, 62

62

let's log it to the console. 63

63

Paste that here and indeed, 64

64

it is basically one big string containing all of this. 65

65

All right, so how do we now separate this basically, 66

66

into five different strings to start with? 67

67

Well, we remember which character defines a new line, right? 68

68

Because that's gonna be a great starting point 69

69

to split up this string into multiple pieces. 70

70

And so that's gonna be, let's say rows, 71

71

and so that will be text dot split, 72

72

and that newline character is backslash, n. 73

73

So let's see. 74

74

Let's log rows now. 75

75

And so now we should get an array with five elements. 76

76

And of course, we need to first paste it back here, 77

77

click this button, and so indeed, 78

78

we now have this result here as expected. 79

79

And now let's just simply loop over this array, 80

80

and in each iteration, we'll log this variable name here, 81

81

converted to camel case. 82

82

So simple enough. 83

83

For const row in rows. 84

84

So first off, the first thing that we gonna need to do 85

85

is to, now I clicked here, now it's gone. 86

86

But anyway, let's take a look at this case here. 87

87

And indeed, let me copy it down here, 88

88

so we can always take a look at it while we are developing. 89

89

Okay, so we need to, 90

90

let me also also write result underscoreCase. 91

91

So it should become this. 92

92

To do this, we need to first split 93

93

this variable name here also in its two parts, 94

94

which are separated by the underscore right now. 95

95

Each word here is now called row, right? 96

96

And so we split that by this underscore. 97

97

But actually, that is not enough because as you know, 98

98

camel case should be all lowercase, 99

99

except for this second word here, 100

100

which should start with an uppercase. 101

101

However, here actually, we have some uppercase right here, 102

102

and here even worse is entire word. 103

103

Also, we have some weird spacing going on. 104

104

So here we have this space, here have even two spaces, 105

105

and so we need to get rid of both of these. 106

106

And so just like before, 107

107

we can use toLowercase 108

108

and then we can also use the trim method on that. 109

109

And then we can even chain a third method, 110

110

which is then that result of splitting it into words. 111

111

So we end up with an array with two words, 112

112

and so let's destructure that into two variables, 113

113

the first and second, okay? 114

114

And then we are already well on our way 115

115

to building the output here. 116

116

Let's call it output and it's gonna be this string 117

117

with simply the first word, 118

118

because that's already good enough. 119

119

And now we just need the second word capitalized. 120

120

And we already did that a couple of times 121

121

and so let me show the second version that I showed you 122

122

which is simply well, 123

123

second dot replace. 124

124

And what we want to replace is second zero, 125

125

so the first character with second zero to uppercase. 126

126

And then logging it to the console, 127

127

and I think that's already it. 128

128

So I wrote this here quite fast, 129

129

because I already explained everything before. 130

130

But of course, you can keep pausing the video 131

131

to take a look at what I'm doing even more closer. 132

132

And maybe also really analyze what I'm doing. 133

133

Now we get, "Cannot read property replace of undefined." 134

134

So what it means is that, second, is undefined. 135

135

And so therefore, we are getting a weird result 136

136

from this here basically. 137

137

So let's use some console dot logs here. 138

138

So let's log the row first and second, 139

139

just to make sure or just to see what's happening. 140

140

And we can get rid of this console dot log, 141

141

so it doesn't get in our way. 142

142

Then paste that here, run it and we get, 143

143

zero, zero undefined. 144

144

Well, that's weird. 145

145

Everything looks correct. 146

146

Oh here, this should actually be of, not in. 147

147

And actually there is an older loop called the for in loop, 148

148

which I didn't show you because it doesn't matter anymore. 149

149

But that's why we didn't get an error 150

150

as I wrote the in here. 151

151

So let's see if now it works. 152

152

And now at least this result here makes sense. 153

153

This is indeed the row, this is the first 154

154

and this is the second, 155

155

but now we get some other error here, so the toUpperCase. 156

156

And yeah, that's here because I didn't actually call it. 157

157

I just wrote the name of the method without calling it. 158

158

That was another bug. 159

159

But this is one more time good to show you 160

160

that bugs are actually a common thing 161

161

in software development. 162

162

Anyway, we see that actually, our variable names 163

163

are already correct. 164

164

All of them are converted to camel case. 165

165

So let's get rid of that console dot log here, 166

166

and now let's tackle this last part here, 167

167

with these emojis here. 168

168

But you could of course, use any other sign. 169

169

So two things to notice here. 170

170

The first word has one check mark, 171

171

the second one has two check marks, 172

172

then three, four, five. 173

173

So that's the first thing. 174

174

And the second thing is that they all start 175

175

at the same position. 176

176

So this means that all of these strings here basically 177

177

should have the same length. 178

178

And how do we do that? 179

179

How do we give all of them the same length? 180

180

Well, we can use padding, right? 181

181

In this case, we use pad end, 182

182

and set them all to a fixed length. 183

183

Let's do that here first. 184

184

So, padEnd, with a length of 20, 185

185

and the string to pad should be simply an empty string. 186

186

So let's see. 187

187

And it will look the same, but as we select, 188

188

we see that actually, now the selection continues. 189

189

Which means that there is indeed some empty spaces there. 190

190

And in fact, when we want just empty spaces, 191

191

we can actually omit this second argument, 192

192

and just call with 20, 193

193

and then the result is gonna to be the same. 194

194

So then after that, let's just add the check mark. 195

195

And so here, we now need to return 196

196

or to log a template string, which will contain all of that. 197

197

So here's the emoji, and yeah, okay, is the way to go here. 198

198

And so this should be almost now the correct solution. 199

199

Let's see, okay. 200

200

So all the emojis now start at the same place, 201

201

but now, all we have to do is to add to here, 202

202

three, four, and five. 203

203

And for that, 204

204

we are going to use the current index in each iteration. 205

205

Now remember how we can get access 206

206

to the current index in the for of loop. 207

207

So we're looping over an array here, 208

208

and so to get the current index, 209

209

we need to actually use the entries 210

210

of the array, remember that? 211

211

So we say, entries, and then here, 212

212

the row is now actually an array with first the index, 213

213

and then second, the actual element. 214

214

And so let's destructure that here, right away, 215

215

where I is the index, 216

216

and row is then the actual element itself. 217

217

And then here, we can use that index 218

218

to basically repeat this string. 219

219

So you see, this is a lot of work 220

220

and it's quite a challenge again. 221

221

So I didn't expect you to really make this on your own, 222

222

at least not in a very fast way. 223

223

Maybe you took some time, and then you made it, 224

224

and so then that's really great. 225

225

But anyway, it's very good to challenge yourself 226

226

and bring yourself to the limit too. 227

227

Anyway, here, we now took this string, 228

228

and then on that string we called repeat, 229

229

just like we did before with the airplanes. 230

230

And then we want in the first iteration one, 231

231

and so that's gonna be your zero plus one, 232

232

because we always need to add one because it starts at zero. 233

233

So give it a save, paste all variable here. 234

234

And yes, that is the solution, that's amazing. 235

235

Let's add another one here. 236

236

Showing us S-C-H, and let's see. 237

237

And indeed, it now is also in camel case, 238

238

and with six okay emojis here. 239

239

So this one here is from the previous time, 240

240

so each time we click the button, 241

241

of course, this will get logged here. 242

242

Okay, so that's it here. 243

243

Make sure that you really understand 244

244

how strings work in JavaScript. 245

245

You can review this lecture and the last three lectures, 246

246

and if you want even more string exercises, 247

247

you can let me know in the Q and A section, 248

248

and I can then give them to you. 249

249

Anyway, that's it for now I see you in the next one.