Original subtitles

1 1

Let's challenge ourselves 2

2

with Coding Challenge number two. 3

3

And in this one, we're gonna continue 4

4

with our football betting application. 5

5

And let me start by saying 6

6

that this challenge is actually a bit difficult. 7

7

All right? 8

8

But that is on purpose. 9

9

So after all, it's called a challenge. 10

10

And so you should really challenge yourself 11

11

with these exercises. 12

12

Otherwise it could be called 13

13

a coding copy and paste, right? 14

14

So please try your best to solve these. 15

15

And you can try the problem solving framework 16

16

that we talked about earlier. 17

17

And of course you can also use Google MDN 18

18

and so on and so forth. 19

19

Okay. 20

20

But with that out of the way, let's get into the exercises. 21

21

And the first one is to loop over the game.scored array 22

22

and then print each of the players to the console 23

23

along with the goal number. 24

24

So this one is not that hard. 25

25

And so let's just... 26

26

Yeah. 27

27

So the object is down here, 28

28

so we're gonna use the same object. All right? 29

29

So this is the array that I was talking about. 30

30

And so here, in this case, 31

31

we should print "lewandowski" goal one, 32

32

Then here goal two, "Gnarby", goal three "Lewandowski", 33

33

and goal four, "Hummels". 34

34

Okay. 35

35

Then number two, use a loop to calculate the average odd 36

36

and to log it to the console. 37

37

And we already studied how to calculate averages. 38

38

And so you can go check that out if you don't remember. 39

39

And here you should actually directly use the object itself. 40

40

So don't destruct the object first into variables 41

41

and then use that to calculate the average, 42

42

but instead really calculate the average of the elements 43

43

in the object, okay? 44

44

Then number three, I want you to print the three odds 45

45

to the console and do that in a nice formatted way, 46

46

like you can see it here. 47

47

Now here, You're not allowed to hard-code 48

48

the names of the teams. 49

49

Alright. 50

50

So instead get them directly from the game object itself. 51

51

Now of course you're except for draw 52

52

because that's nowhere in the game object. 53

53

So as a hint, I have fear that the odds 54

54

and the game objects have the exact same property names. 55

55

And so you can use that knowledge maybe 56

56

to get the name of the teams here. 57

57

So these are the three exercises for this challenge, 58

58

but then I also have a bonus. 59

59

Now, let me just tell you that I will not solve 60

60

this bonus question in this video 61

61

because it would take me a little bit too long 62

62

but I will still put the solution 63

63

in the final code of this section, 64

64

so in the GitHub repository, 65

65

so you can check out the solution there 66

66

if you attempt to do this bonus. 67

67

So this one is really hard. 68

68

And what I want you to do 69

69

is to create an object called scores, 70

70

which will contain the name of the players 71

71

who scored as properties, 72

72

and so Gnarby, Hummels, and Lewandowski were the players 73

73

who scored in this game. 74

74

And as a value for each of the properties 75

75

we want the number of goals. 76

76

Alright. 77

77

So this means Lewandowski scored two goals 78

78

and the other two players scored just one goal each. 79

79

So this is a little bit difficult again 80

80

but you can do it. 81

81

Well at least with some research 82

82

and with some reviewing of all the material 83

83

of the course so far. 84

84

Anyway, good luck with this challenge. 85

85

Take your time. 86

86

And I'll see you once 87

87

you're ready. 88

88

All right. 89

89

Hopefully you did at least one or two of these exercises. 90

90

And so here it goes my solution. 91

91

And keep in mind once more that my solution 92

92

might be different from yours, but that's totally okay. 93

93

As long as yours produces the same result. 94

94

So here, the goal is to score on the scored array, 95

95

and print all of the players to the console. 96

96

So const, and let's again fix that later, 97

97

and then of game.scored. 98

98

And now we actually want the entries. 99

99

All right. 100

100

And we want the indexes because we also want 101

101

the number of the goal. 102

102

Remember? 103

103

So goal one, two, three, and four. 104

104

Okay. And so entries will give us that. 105

105

And so now we just need to re-structure that 106

106

into the index and then the player. 107

107

Okay. Actually we don't even need to curly braces. 108

108

Let's just say, console.log and then Goal, 109

109

then the index plus one. 110

110

So that it starts at goal number one, 111

111

and then simply the player. 112

112

Let's take a look. 113

113

Oh, and now we have the problem here 114

114

that I'm accessing game before it is initialized. 115

115

And so the problem is that the game is down here. 116

116

So I'll have to take this game object now 117

117

to that other challenge. 118

118

So let's just cut it from here and put it here. 119

119

So now it should work. 120

120

And indeed we get the four goals 121

121

nicely printed to the console 122

122

exactly in the order in which they appear here. 123

123

Alright, next one. 124

124

And it is one we have to calculate the average odd. 125

125

So the average basically of these three numbers here. 126

126

So what we're gonna do is to loop over this object here 127

127

and simply add all of these three values together 128

128

and then finally divide them by the number of elements here. 129

129

And so that's how you calculate an average. 130

130

And so we start by creating the average and set it to zero. 131

131

And so again, we already did that before, I believe. 132

132

And so now we can loop 133

133

over the object such as I explained it to you before. 134

134

const odd of, and now what do we actually want? 135

135

Do we want the keys or the values or both? 136

136

Well, in this case, we are really just interested 137

137

in the values, right? 138

138

And so this Object.values will give us an array 139

139

essentially containing these three values. 140

140

So we need to say game.odds. 141

141

Okay. 142

142

And now in each iteration, 143

143

we will simply add these odds to the average. 144

144

So that then in the end, 145

145

we can divide it by the length of this object.values array. 146

146

So let's do that, plus equal the current odd, 147

147

and then finally average, average divided equal, 148

148

and so this is a new one, by object.values, game.odds, 149

149

and then let's log it to the console. 150

150

So this one here means basically, 151

151

average is equal average divided by this here. 152

152

And this is actually the same as up here, 153

153

so that's refactor it into let's say, 154

154

simply odds, and then let's use that here. 155

155

Odds, 156

156

and odds. 157

157

And we have a problem. 158

158

So let's do some debugging here. 159

159

I will start by taking a look at the average 160

160

after it is computed here in the array. 161

161

So average, oh. 162

162

So here we have a number 163

163

which means that something is wrong here in the division. 164

164

Right. 165

165

And I see it's because we need to write odds.length. 166

166

Okay. And so then it will be the number three in this case. 167

167

So before I was dividing by the entire array 168

168

and that doesn't make any sense. 169

169

And so now we should see something close to four here. 170

170

Yeah. So 3.7 essentially. 171

171

And so that's our result. 172

172

Okay. 173

173

And you can go over to this code here again, 174

174

if you need to understand that even further, 175

175

but now let's move on here to Exercise number three. 176

176

And this time the goal is to print basically 177

177

the content of the object to the console. 178

178

So we're gonna loop over that. 179

179

And again, I will first say what we need here actually. 180

180

So we want to print both the team and the odd, 181

181

so we need the entire object. 182

182

And so just as we learned in a previous lecture, 183

183

we use object.entries of game.odds. 184

184

Okay. And so we know that we get an array of arrays, 185

185

which in each position will have both the team and the odd. 186

186

All right. 187

187

So let's say team and odd. 188

188

All right. 189

189

And so here it is us who defined the variable name 190

190

because it is now an array. 191

191

So we don't have to match any property names. 192

192

And let's start by simply logging both to the console 193

193

team and odd. 194

194

Okay. 195

195

And so indeed, we already have that kind of working. 196

196

We already have the team here 197

197

and we have the three odd values. 198

198

Now what we want to do is to create a string 199

199

like this. 200

200

let's actually copy this. 201

201

So we know what we have to do. 202

202

And by the way, here, notice again, 203

203

what I explained to you in the last lecture, 204

204

how in the array we use the entries method 205

205

to get the entries of the array, 206

206

but in the object we have to use object.entries 207

207

and then pass into the function, 208

208

the object that we are interested in. 209

209

So that's fundamentally difference. 210

210

So keep that in mind. 211

211

Okay. So here, we now want to build a string like that. 212

212

So odd of victory Bayern Munich, 213

213

draw or victory Borussia Dortmund. 214

214

And so here, we're gonna need some more logic. 215

215

Let's just put here some dots. 216

216

And now, now here the odd. 217

217

So the odd is the easy part. 218

218

So we have that one already finished. 219

219

But now here we need some more complex logic. 220

220

And actually let's create this part of the string. 221

221

So like victory Bayern Munich, or Borrusia Dortmund 222

222

or draw, let's create it here in a separate value. 223

223

So let's call this one teamString. 224

224

And so here what I'm gonna use 225

225

is to use the ternery operator. 226

226

Okay. 227

227

So I will say that if the team here is x, 228

228

like we have a it here, 229

229

then the string should become draw. 230

230

And so that will then create this here. 231

231

So team equals x then the result should be draw. 232

232

But if not, then we need the team name itself. 233

233

So how will we get that? 234

234

And remember, there was a hint about this. 235

235

So note how the odds 236

236

and the game objects have the same property names. 237

237

And indeed here we have team one, team two, 238

238

and here we have team one and team two as well. 239

239

And so here are the team names. 240

240

And so let's now get these team names 241

241

using these keys that we already have here. 242

242

So we want to string victory. 243

243

And then we go to the game object and team. 244

244

Let's check. 245

245

Now I know of course we need to put that string here. 246

246

So teamString and it works beautiful. 247

247

So let's just recap this part here. 248

248

So here we go into the game, 249

249

which is the entire game object 250

250

and we take the property team. 251

251

But team is already this property name here, right? 252

252

So it's team one or team two. 253

253

And so then we take that to read the property 254

254

with the same name from the game object. 255

255

And so therefore we get Bayern Munich and Borussia Dortmund. 256

256

Okay. Great. 257

257

So this one was a little bit more tough 258

258

but we managed to do it in the end. 259

259

Now, again, I will not create the solution 260

260

for the bonus but you can always find it 261

261

in the final code of this section. 262

262

And with that being said, 263

263

let's now go back to learning some more JavaScript.