Original subtitles

1 1

So I showed you some ideas 2

2

and some tools to solve problems 3

3

and to debug your applications. 4

4

And so now it's your turn 5

5

to put all of that into practice on your own. 6

6

And so here is your coding challenge for this section. 7

7

So given an array of forecast at maximum temperatures, 8

8

to thermometer that we've been working about 9

9

throughout this section should display 10

10

a string with these forecasted temperatures. 11

11

So for example, if we have this array, 12

12

which is our first test data here, 13

13

then the string that it will print should be this. 14

14

So three dots, 10, 17 degrees Celsius in one days. 15

15

So that's the 17 here. 16

16

Then again, three dots then 21 degrees Celsius in two days. 17

17

So this 21, is this 21 and then three dots, 18

18

23 degrees in three days. 19

19

So in one, two and three days at 10, again, three dots. 20

20

Okay. 21

21

And here, you don't need to use this exact sign, 22

22

if you can find it on your keyboard. 23

23

I know it was a bit hard to find for me. 24

24

So what you should do is to create a function 25

25

called "printForecast," which takes in an array called 'arr' 26

26

and then locks the string, 27

27

just like this one here to the console. 28

28

Okay. 29

29

And call this function for these two test values. 30

30

And to softwares, you can use the problem solving framework 31

31

that we have just been talking about in the section. 32

32

So try to understand the problem first 33

33

by asking the right questions 34

34

and then break it into sub-problems. 35

35

And I'm not saying that this is gonna be easy. 36

36

And for me the main goal 37

37

is not even that you achieve the result, 38

38

but really that you start thinking about the problem 39

39

and that you try as good as possible 40

40

to break it up into sub-problems. 41

41

And of course there are many ways 42

42

of asking the right questions 43

43

and of breaking this up into sub problems. 44

44

So there is no hard ways of doing this stuff. 45

45

So just try your best to take all the time that you need. 46

46

And I will see you here once you are ready. 47

47

Okay. 48

48

So let me show you how I would have done it. 49

49

And let's just close this terminal here. 50

50

Because remember that this live connection 51

51

actually keeps running without the terminal opened. 52

52

So let's just grab from up here, 53

53

this here. 54

54

So as you see, I'm a little bit lazy. 55

55

I don't like to type so much, 56

56

so I'd just keep reusing stuff. 57

57

So we need to understand the problem first. 58

58

So let's look at that example string here. 59

59

And so one part of the problem 60

60

is definitely that this array here, 61

61

was basically broken up in three pieces 62

62

and then the separator is these three dots. 63

63

Let's write that here. 64

64

Array, transformed to string, 65

65

separated by three dots. 66

66

Then we can also ask what these numbers here are. 67

67

So we already know that 68

68

these here are of course coming from the array, 69

69

but what is this? 70

70

So one days, two days and three days. 71

71

So what is the X days? 72

72

And the answer to that is basically 73

73

it is the current index of the array plus one. 74

74

So it would be weird to say that 17 degrees 75

75

in zero days, because this is the forecast. 76

76

And so this is for the next day 77

77

and then in two days and in three days. 78

78

So answer index plus one. 79

79

Okay. 80

80

So I think we understood the problem now, 81

81

because I think that it's quite simple in this case. 82

82

So let's now break this up into sub-problems. 83

83

And I would say that the main problem here, 84

84

will be to transform this array into a string. 85

85

Because that's essentially what we will have to do. 86

86

Also, each of these elements here will be transformed 87

87

to a string with these degrees Celsius. 88

88

So let's just transform each element 89

89

to string with Celsius. 90

90

And I don't even remember where this is, 91

91

so I'm just copying it here. 92

92

Then we also need to account for the current day. 93

93

So string needs to contain day. 94

94

And again, that is the index plus one. 95

95

And finally, we also need to add the three dots 96

96

between elements and start and end of string. 97

97

So that looks like a lot of work, 98

98

but actually it is not as hard as it looks from here. 99

99

So let's start by creating two arrays here. 100

100

So for test data one and two. 101

101

Actually grab all of this in one go. 102

102

Data two. 103

103

All right. 104

104

And now let's tackle these problems here. 105

105

Okay. 106

106

So if the string would always have the same length, 107

107

so if it was always just be three days, 108

108

then it would be very simple. 109

109

We could just basically hard coat the string, right? 110

110

We could just do something like data one, 111

111

at position zero, and then the degrees Celsius, 112

112

then dot, dot, dot, and so on and so forth. 113

113

Right? 114

114

So here I'm missing this, of course. 115

115

So we could do this and there's still some value 116

116

in first actually trying to write this. 117

117

So this is how it would look like data zero and one and two, 118

118

and let's indeed lock this to the console, 119

119

give it a safe. 120

120

And so actually already the string 121

121

looks exactly what we had here, right? 122

122

But of course, this is not the way to go. 123

123

Because then here in data two, 124

124

we have a longer array. 125

125

And we want to write one function 126

126

that works for all the arrays. 127

127

So that print forecast. 128

128

And so of course we need a more dynamic way 129

129

of creating this string. 130

130

But still, as I said, 131

131

there is some value in having done that 132

132

because it will help us figure out 133

133

how we can arrive at a solution. 134

134

So print forecast is a function 135

135

which takes in an array 'arr' 136

136

and now let's see what we have to do. 137

137

So if we have an array 138

138

and we have to do multiple operations on it, 139

139

we will as always use a loop. 140

140

So let's start with that baseline. 141

141

So let i equals zero. 142

142

And this part is not always the same, 143

143

so i less than arr dot length 144

144

and i plus, plus. 145

145

Okay, but now what are we gonna do? 146

146

So how will we basically transform the array into a string? 147

147

And there are so many ways 148

148

in which we could achieve this 149

149

and actually in which we could solve 150

150

this whole problem here, 151

151

especially if you did some research 152

152

to arrive at a solution here, 153

153

but I will just go with a solution 154

154

using the tools that we already used. 155

155

So remember what we did, 156

156

when we calculated the average of a number. 157

157

We started by adding all the values 158

158

of the array using a loop, right. 159

159

And we kept adding them, 160

160

to an accumulator variable that was called sum, right. 161

161

So just to illustrate that sum started at zero, 162

162

and let's say we had an array of two, three, four. 163

163

And so in the first iteration, 164

164

that sum was then updated to two. 165

165

Then in the second iteration, 166

166

it was updated to two plus three equals five. 167

167

And then in the last iteration, it was updated to five, 168

168

which was the current sum plus four equal nine. 169

169

And so that's how we end up with the sum 170

170

of all of these values. 171

171

And now with the string, 172

172

we can actually do the exact same thing. 173

173

So here we will also have an accumulator, 174

174

a variable essentially, which is gonna be called string. 175

175

So let string. 176

176

And instead of starting with zero, 177

177

we will start with the equivalent of zero, 178

178

but for strings, which is the empty string. 179

179

So empty string has nothing. 180

180

And then in each iteration, 181

181

we will simply add to that string, 182

182

the current value of the array. 183

183

So let's do that. 184

184

String equals, 185

185

the current value of string, 186

186

plus array at the current position. 187

187

And also let's already add this symbol here 188

188

and for that let's wrap this here into a template literal. 189

189

And so I'm selecting this 190

190

and then I can just hit the template literal diabetic once 191

191

and it will wrap all of that. 192

192

So then this and this, and then the degrees Celsius. 193

193

And now all we need to do is to log that string 194

194

to the console. 195

195

So just as was asked. 196

196

Which takes in and logs the string to the console. 197

197

So we could have added that actually as one sub problem, 198

198

even though it's a really small one. 199

199

Log string to console. 200

200

And so let's give it a try now. 201

201

I'm saving and nothing happened. 202

202

And that's because we didn't call the function. 203

203

So let's print forecast with data one, 204

204

and here we go. 205

205

So 70 in degrees, 21 degrees, 23 degrees. 206

206

And that already starts looking like what we have here. 207

207

So essentially we already completed the most difficult part, 208

208

so of transforming the array into a string. 209

209

And again, this was similar to adding multiple numbers 210

210

into one bigger number. 211

211

Here what we did was to add multiple strings 212

212

to a bigger string that kept growing after each iteration. 213

213

And if you want to make sure to really understand this, 214

214

then you can always use the debugger 215

215

and go through this loop step by step 216

216

and see this string variable here are growing 217

217

as the loop goes on and on. 218

218

So we already did this part also and this part. 219

219

Now let's tackle this one. 220

220

So it needs to also contain the day. 221

221

So what does that look like? 222

222

So 23 degrees in three days. 223

223

So in one days, two days and three days, 224

224

so that's not too hard. 225

225

And now we already understood 226

226

that this had to be the current index plus one. 227

227

So the current index is i plus one. 228

228

So in one days. 229

229

So in the first iteration is gonna be zero plus one, 230

230

then one plus one, and then two plus one, give it a safe. 231

231

And that starting to look really close 232

232

to what we need in the end. 233

233

but now we are missing the separator dots. 234

234

So how do you think we can achieve those? 235

235

Well, in fact, these dots are simply something that repeat 236

236

after each of these strings here, right? 237

237

So we have this value and then dot dot dot. 238

238

So we have to value dot, dot, dot. 239

239

We just need one more space here, 240

240

to create this nice separation that we have. 241

241

And so now we're almost done, okay. 242

242

So actually this is not correct here, 243

243

because it's missing the, in one days in two days 244

244

and so on and so forth. 245

245

But let's just compare it here with the original. 246

246

And so all that is left 247

247

is these three dots at the beginning. 248

248

And so, we can just add them at the end. 249

249

So we cannot put them here, right? 250

250

Because then we would have too many dots. 251

251

So that's a lot of dots 252

252

and that's not what we were looking for. 253

253

So instead we keep it like this 254

254

and then as we log it to the console, 255

255

we simply add the dots here at the beginning. 256

256

So dot, dot, dot, 257

257

plus the string, give it a safe 258

258

and yes, that's the solution of our problem. 259

259

Great. 260

260

Can just improve this here a little bit again, 261

261

by using the plus equal operator 262

262

and then get rid of this part, 263

263

make it a little bit more short and more efficient maybe. 264

264

And so, yeah, that's it. 265

265

That's the result of this coding challenge. 266

266

And again, you could have done it in so many different ways, 267

267

but what I really wanted you to achieve was to understand 268

268

the problem and to break it up into small sub-problems. 269

269

if you did that, well, then my goal 270

270

with this whole section I would say is achieved. 271

271

So hope you liked this one, 272

272

even though it was a little bit more theoretical, 273

273

but I think it's important to also have a section 274

274

like this in a big web development course 275

275

because soft skills, 276

276

like the ones that I just showed you 277

277

are also very important for your success.