Original subtitles

1 1

Welcome to the first coding challenge of this section. 2

2

And this one is gonna be an exciting one. 3

3

Because in this one, 4

4

we are building a simple Pol application. 5

5

So a pol has a question, 6

6

an array of options from which people can choose, 7

7

and an array with the number of replies for each option. 8

8

And this data is stored in this object here 9

9

that it already created for you. 10

10

Now you can copy this object from here, 11

11

or you can get it from the final code 12

12

that's available for the section in the GitHub repository. 13

13

Now, okay, so you see, we have to question, 14

14

the array of options, and also a new array of answers. 15

15

So this code here, 16

16

we will learn how it works in the next lecture. 17

17

But this will create this array of four zeros. 18

18

And that's because there are four options here, 19

19

for this question. 20

20

And now, here are your tasks. 21

21

So first up in that poll object, 22

22

create a new method called register new answer. 23

23

And this method does two things. 24

24

So displays a prompt window 25

25

for the user to input the number of the selected option. 26

26

And here, I want the text to look exactly like this. 27

27

Then, 28

28

based on the inputted number, 29

29

so the user should input either zero, one, two or three. 30

30

So based on that, update the answers array. 31

31

So if the user, 32

32

gives three here, 33

33

as the option, 34

34

then increase the value at position three of the array. 35

35

And of course, increase that by one. 36

36

To do this, make sure that the input is actually a number. 37

37

And if that number makes sense, 38

38

then I want you to call this method, 39

39

whenever the user clicks on this button. 40

40

And so this is where the second button here, 41

41

comes into play. 42

42

Then number three, create a method called display results. 43

43

And this one, should, as the name says, 44

44

display the results of the poll. 45

45

Now this method takes an argument called type. 46

46

And that type should be a string, as I say, here, 47

47

and the value of that string should either be string, 48

48

or array. 49

49

So these are two different ways of displaying the results, 50

50

basically. 51

51

Now, if the type is set to the string of array, 52

52

then simply display the results array as it is, 53

53

using a normal console dot log. 54

54

And this should actually be the default option. 55

55

All right. Now, if the type is set to string, 56

56

then display a string like this one here. 57

57

Okay. And then once you have this method built, 58

58

run it each time after the register a new answer. 59

59

So essentially, 60

60

whenever someone clicks on this button here, 61

61

it will call this; 62

62

there's register a new answer method. 63

63

And then this method itself will call display results. 64

64

Okay. And to do this, 65

65

use as many of the tools that you learned in this section, 66

66

and probably also the last sections, 67

67

and really all the course itself. 68

68

Now, there are a lot of moving parts in this challenge. 69

69

And it might not be as straightforward as it seems here. 70

70

So if you need to cut some corners, 71

71

and make some things a little bit easier, 72

72

then that's absolutely no problem. 73

73

At least just write some code on your own. 74

74

That's really my main goal with this challenge. 75

75

Then if you manage to do these challenges, 76

76

or to do the challenge as instructed here, 77

77

then I also have a bonus for you. 78

78

And so that is to use these display results method, 79

79

that you built before to display these two arrays, 80

80

that we have here in the test data. 81

81

Okay. So usually, 82

82

you simply use this method to display 83

83

the answers array that's inside of the object. 84

84

But here, I want you to really display simply this array, 85

85

and this array. 86

86

And of course, 87

87

do not put this array here inside of this poll object. 88

88

Okay, you should use them individually. 89

89

Now, for doing this, 90

90

you have to really think about 91

91

what the disk keyword should look like in this situation. 92

92

And then you need to, 93

93

and then you basically need to set this keyword accordingly. 94

94

Now, okay, so that's a nice challenge here, 95

95

and one thing that is certain is that, 96

96

your code will look different than mine. 97

97

I'm just a normal developer like anyone else, 98

98

and everybody writes their own code. 99

99

And so my code is different from everyone else's code, 100

100

probably. 101

101

And so yeah, that's completely normal, 102

102

if you are starting to develop your own style. 103

103

So take maybe an hour even to do all of this, 104

104

and then come back to this video to check out my solution. 105

105

So let's get to work here. I hope it went well for you, 106

106

when you try it out on your own. 107

107

And you can always share your experience in the q&a area. 108

108

Anyway, let's now get the answer here. 109

109

And so for that we use prompt. 110

110

So const, 111

111

answer, 112

112

prompt. 113

113

And so, let's see what it has to look like. 114

114

So it's just a question, 115

115

then it's a new line, 116

116

then it's these options, 117

117

another new line, and then right up to number. 118

118

So this part is always the same. 119

119

So I'm just copying it from here. 120

120

So, we want to grab the question first. 121

121

And so that is, 122

122

this, 123

123

dot question. 124

124

Then the new line, which is this, remember, 125

125

then we want the options. 126

126

And so one new line for each of these options here. 127

127

So this is an array, we want to transform it to a string. 128

128

And so for that, we use the join method. 129

129

So this one we learned about in the previous section. 130

130

So I hope you remember this one. 131

131

And so we take the options array here and join it. 132

132

And we do join it again by the newline character. 133

133

Now, okay, and then finally, another new line. 134

134

And then this part. 135

135

Now, right? Oh, and then we of course, 136

136

also need to convert this result to a number. 137

137

All right. So this looks good. 138

138

Let's just add a comment here. So this is get the answer. 139

139

And then here second, is to, 140

140

register. 141

141

I think that's, 142

142

what we had here. 143

143

So the first step is to get the answer. 144

144

And the second is to basically update the answers. 145

145

So I'm just calling that register the answer. 146

146

Okay, but here, let's actually start by trying it out. 147

147

So let's do for now, poll dot 148

148

register new answer. 149

149

And indeed, 150

150

this is exactly the formatting we were looking for, 151

151

let's say three. And indeed, we get three. 152

152

Nice. 153

153

And so now let's register the answer. 154

154

And remember that we should check, 155

155

if this value is actually a number. 156

156

And also, if it makes actually sense. 157

157

So in terms of the number of options. 158

158

So first, we check if it is indeed a number. 159

159

And there are better ways of checking this, 160

160

but more about that later. 161

161

And we also want to know if the answer, 162

162

is below the length of this array, basically. Right? 163

163

So if the answer is 10, then that doesn't make any sense. 164

164

And so it must stay below the length. 165

165

So the length here is four. 166

166

And so the max reply that we accept is three. 167

167

So answer needs to stay below this dot answers, 168

168

dot length. 169

169

Now here, we could not do an if statement, 170

170

and basically saying that if this is true, 171

171

then increase the answers array at the correct position. 172

172

However, instead, 173

173

this is actually a great use case for short circuiting, 174

174

with the end operator. 175

175

So let's simply do this. So this dot answers, 176

176

and then we go to the position of answer, 177

177

and then simply increase it like this. 178

178

Now, all right, so if this is true, 179

179

then the end operator will keep going. Right? 180

180

And so then this is evaluated, and if it's still true, 181

181

then this here is executed. 182

182

But if either one of these conditions here is false, 183

183

then the end operator will short circuit, 184

184

and this part here is not executed. 185

185

So this is a nice use case for short circuiting, 186

186

because the code that we want to execute, 187

187

is just one simple line of code. 188

188

Now, okay. So now let's, 189

189

then, 190

190

take a look at the answers. 191

191

So this dot answers. 192

192

So this is for now, the register a new answer method. 193

193

And now let's focus here on point number two, 194

194

which is to actually call the method, 195

195

whenever we click on this ENTER button here. 196

196

So, 197

197

let's select that button, 198

198

document dot query selector. 199

199

And now we need the class name. 200

200

Let's check that out here again, in the elements. 201

201

And so it has the class of poll. 202

202

So poll, 203

203

dot @ event listener. 204

204

Click, and now the function that we want to execute. 205

205

And so that is @ poll 206

206

dot 207

207

register new answer. 208

208

All right. Now, do you think that this will work like this? 209

209

And let's give it a save, actually. 210

210

And there is an error. 211

211

And that's because we're trying to read property join, 212

212

of undefined, right here. 213

213

And so the problem here is, as you might have guessed, 214

214

because we talked about this before, 215

215

is that the disk keyword right now, points to this element. 216

216

So to this poll button here. 217

217

And so again, there is because in an event handler function, 218

218

such as this one here, 219

219

that this keyword will always point to the element, 220

220

to which it is attached. 221

221

And so right now, there is this button. 222

222

So to fix this, we need to bind the disk keyword. 223

223

And in this case, we need to set it to the poll object. 224

224

And so then, in this function here, 225

225

which is the result of the bind method, 226

226

so in this new function, 227

227

the disk keyword will then point to the poll object. 228

228

So let's see that, and now indeed, it works. 229

229

So that's input zero here. 230

230

And indeed, we already get our array, 231

231

where the count of the answers in position zero, 232

232

has increased. And if we try this, again, 233

233

it should become two. 234

234

And it does. 235

235

Now, in order to actually display these results, 236

236

we should create this new method called display results. 237

237

Now, right, so it takes a string that is called type, 238

238

with array being the default here. 239

239

Now, right. 240

240

So let's do this. 241

241

And also keep in mind, 242

242

that this is the kind of string that we want, 243

243

if the type is string. 244

244

So let's copy this one. 245

245

And now here, we add that new method called, 246

246

display, 247

247

results. 248

248

And so it gets the type. 249

249

And remember, it has the default set to array. 250

250

And so here, we can use the ESX default parameters, 251

251

using this equal sign. 252

252

So, 253

253

if, 254

254

type equals, 255

255

array, 256

256

then simply log, 257

257

this, 258

258

dot, 259

259

enters, 260

260

to the console. 261

261

Else, 262

262

if, 263

263

the type equals, 264

264

string, 265

265

then we want to log something like this to the console. 266

266

So once more a template string, or template literal. 267

267

And actually this would be outside 268

268

results, 269

269

are. 270

270

And then to create this here, 271

271

we can simply join the array together to form a string. 272

272

So that's this dot results or actually answers, 273

273

dot join, and we join them with a comma and a space. 274

274

Now, okay, and so now here, 275

275

let's get rid of this console dot log. 276

276

And instead, we will now call this method. 277

277

So this dot display results. 278

278

And that's actually called twice. 279

279

Once without passing any argument, 280

280

and then here passing in, 281

281

string, 282

282

and so then we will see both types of results, 283

283

printed to the console. 284

284

And so this is, 285

285

number four here. 286

286

So, let's give it a save. 287

287

Zero. And, indeed, it works just the same. 288

288

Number three, 289

289

let's try, 290

290

three again. 291

291

And so indeed, it works just fine. 292

292

Let me now input something else. 293

293

And so then nothing changes here. 294

294

So the results are not updated. 295

295

And that's because of this testing logic that we have here. 296

296

Great. So I hope you have been following this far. 297

297

So this is similar to what we have been doing. 298

298

And now let's check out the bonus here. 299

299

So let's use the display results method that we just use, 300

300

but to display these two arrays. 301

301

Okay, let's copy them just, 302

302

so we don't have to scroll so much. 303

303

And it says here that we should think about, 304

304

what the disk keyword will look like. 305

305

So we will do that, of course. 306

306

Okay, so these are the arrays that we're gonna work with. 307

307

So, 308

308

the method is at Pol dot display results. 309

309

But as I said, 310

310

now, we want to call, 311

311

this method here, not with this array. 312

312

So not with the answers array, but instead with this array. 313

313

So what should we do here? 314

314

Well, we will have to use the call method, 315

315

because we will need a new disk keyword, right? 316

316

Because display results uses this dot answers. 317

317

Okay, so the answers come from the disk keyword. 318

318

And so if we want to have a different disk keyword, 319

319

then we need to use call. 320

320

And what should the disk keyword be like? 321

321

Well, we need an object, 322

322

which contains the answers property here, right? 323

323

Otherwise, there is no way for this method, 324

324

to call this dot answers. 325

325

And so we can simply create a new object, 326

326

and say, answers, and then, 327

327

this, 328

328

this array, and that's it. 329

329

Let's try this. 330

330

And indeed, here is the result printed. 331

331

And that's even now passing us the, the string option. 332

332

And so now Indeed, we get poll results are, 333

333

five, two, and three. 334

334

All right. So again, to recap, this works, 335

335

because this function here is looking for this dot answers. 336

336

But our array is, well, it's simply out here. 337

337

So we need a way to make this dot answers, 338

338

equal to this array. 339

339

And so that's why we used to call method here, 340

340

so that we could manually set the disk keyword, 341

341

to a new object, 342

342

which as the answers property has that new array. 343

343

And now let's just try it with the other one here. 344

344

And, 345

345

and we can do the same without the string, 346

346

and then it will just lock the array itself. 347

347

And yeah, that works just fine. 348

348

Great. 349

349

Now, what we did here, it's not really a real scenario, 350

350

but it's still good for us to use these concepts, 351

351

in some different ways, 352

352

to really get used to how all of these concepts, 353

353

work together.