Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,350 --> 00:00:03,100
So I showed you some ideas
2
00:00:03,100 --> 00:00:05,730
and some tools to solve problems
3
00:00:05,730 --> 00:00:08,560
and to debug your applications.
4
00:00:08,560 --> 00:00:10,330
And so now it's your turn
5
00:00:10,330 --> 00:00:13,563
to put all of that into practice on your own.
6
00:00:15,280 --> 00:00:19,150
And so here is your coding challenge for this section.
7
00:00:19,150 --> 00:00:23,670
So given an array of forecast at maximum temperatures,
8
00:00:23,670 --> 00:00:26,370
to thermometer that we've been working about
9
00:00:26,370 --> 00:00:28,900
throughout this section should display
10
00:00:28,900 --> 00:00:32,240
a string with these forecasted temperatures.
11
00:00:32,240 --> 00:00:35,820
So for example, if we have this array,
12
00:00:35,820 --> 00:00:38,270
which is our first test data here,
13
00:00:38,270 --> 00:00:41,380
then the string that it will print should be this.
14
00:00:41,380 --> 00:00:46,380
So three dots, 10, 17 degrees Celsius in one days.
15
00:00:46,870 --> 00:00:48,620
So that's the 17 here.
16
00:00:48,620 --> 00:00:53,620
Then again, three dots then 21 degrees Celsius in two days.
17
00:00:54,040 --> 00:00:57,690
So this 21, is this 21 and then three dots,
18
00:00:57,690 --> 00:01:00,311
23 degrees in three days.
19
00:01:00,311 --> 00:01:05,022
So in one, two and three days at 10, again, three dots.
20
00:01:05,022 --> 00:01:05,855
Okay.
21
00:01:05,855 --> 00:01:09,070
And here, you don't need to use this exact sign,
22
00:01:09,070 --> 00:01:11,100
if you can find it on your keyboard.
23
00:01:11,100 --> 00:01:13,453
I know it was a bit hard to find for me.
24
00:01:14,360 --> 00:01:17,120
So what you should do is to create a function
25
00:01:17,120 --> 00:01:22,120
called "printForecast," which takes in an array called 'arr'
26
00:01:22,300 --> 00:01:23,940
and then locks the string,
27
00:01:23,940 --> 00:01:27,630
just like this one here to the console.
28
00:01:27,630 --> 00:01:28,780
Okay.
29
00:01:28,780 --> 00:01:33,090
And call this function for these two test values.
30
00:01:33,090 --> 00:01:37,130
And to softwares, you can use the problem solving framework
31
00:01:37,130 --> 00:01:40,780
that we have just been talking about in the section.
32
00:01:40,780 --> 00:01:43,420
So try to understand the problem first
33
00:01:43,420 --> 00:01:45,410
by asking the right questions
34
00:01:45,410 --> 00:01:48,360
and then break it into sub-problems.
35
00:01:48,360 --> 00:01:51,560
And I'm not saying that this is gonna be easy.
36
00:01:51,560 --> 00:01:52,760
And for me the main goal
37
00:01:52,760 --> 00:01:55,830
is not even that you achieve the result,
38
00:01:55,830 --> 00:01:59,140
but really that you start thinking about the problem
39
00:01:59,140 --> 00:02:01,430
and that you try as good as possible
40
00:02:01,430 --> 00:02:04,170
to break it up into sub-problems.
41
00:02:04,170 --> 00:02:05,940
And of course there are many ways
42
00:02:05,940 --> 00:02:08,070
of asking the right questions
43
00:02:08,070 --> 00:02:10,980
and of breaking this up into sub problems.
44
00:02:10,980 --> 00:02:14,170
So there is no hard ways of doing this stuff.
45
00:02:14,170 --> 00:02:17,150
So just try your best to take all the time that you need.
46
00:02:17,150 --> 00:02:19,433 line:15%
And I will see you here once you are ready.
47
00:02:23,290 --> 00:02:24,730 line:15%
Okay.
48
00:02:24,730 --> 00:02:28,410
So let me show you how I would have done it.
49
00:02:28,410 --> 00:02:30,523
And let's just close this terminal here.
50
00:02:31,560 --> 00:02:34,150
Because remember that this live connection
51
00:02:34,150 --> 00:02:37,760
actually keeps running without the terminal opened.
52
00:02:37,760 --> 00:02:39,843
So let's just grab from up here,
53
00:02:42,860 --> 00:02:44,223
this here.
54
00:02:45,090 --> 00:02:47,620
So as you see, I'm a little bit lazy.
55
00:02:47,620 --> 00:02:49,743
I don't like to type so much,
56
00:02:50,780 --> 00:02:52,563
so I'd just keep reusing stuff.
57
00:02:53,780 --> 00:02:56,910
So we need to understand the problem first.
58
00:02:56,910 --> 00:03:01,300
So let's look at that example string here.
59
00:03:01,300 --> 00:03:03,060
And so one part of the problem
60
00:03:03,060 --> 00:03:06,030
is definitely that this array here,
61
00:03:06,030 --> 00:03:09,090
was basically broken up in three pieces
62
00:03:09,090 --> 00:03:13,053
and then the separator is these three dots.
63
00:03:13,910 --> 00:03:16,180
Let's write that here.
64
00:03:16,180 --> 00:03:20,467
Array, transformed to string,
65
00:03:23,960 --> 00:03:27,823
separated by three dots.
66
00:03:29,300 --> 00:03:33,310
Then we can also ask what these numbers here are.
67
00:03:33,310 --> 00:03:34,400
So we already know that
68
00:03:34,400 --> 00:03:37,780
these here are of course coming from the array,
69
00:03:37,780 --> 00:03:39,030
but what is this?
70
00:03:39,030 --> 00:03:42,233
So one days, two days and three days.
71
00:03:43,900 --> 00:03:48,073
So what is the X days?
72
00:03:48,980 --> 00:03:51,660
And the answer to that is basically
73
00:03:51,660 --> 00:03:55,700
it is the current index of the array plus one.
74
00:03:55,700 --> 00:03:58,700
So it would be weird to say that 17 degrees
75
00:03:58,700 --> 00:04:01,320
in zero days, because this is the forecast.
76
00:04:01,320 --> 00:04:03,810
And so this is for the next day
77
00:04:03,810 --> 00:04:06,083
and then in two days and in three days.
78
00:04:08,290 --> 00:04:12,243
So answer index plus one.
79
00:04:13,970 --> 00:04:14,803
Okay.
80
00:04:14,803 --> 00:04:17,550
So I think we understood the problem now,
81
00:04:17,550 --> 00:04:21,640
because I think that it's quite simple in this case.
82
00:04:21,640 --> 00:04:25,930
So let's now break this up into sub-problems.
83
00:04:25,930 --> 00:04:28,270
And I would say that the main problem here,
84
00:04:28,270 --> 00:04:31,403
will be to transform this array into a string.
85
00:04:36,000 --> 00:04:39,720
Because that's essentially what we will have to do.
86
00:04:39,720 --> 00:04:43,190
Also, each of these elements here will be transformed
87
00:04:43,190 --> 00:04:46,890
to a string with these degrees Celsius.
88
00:04:46,890 --> 00:04:51,890
So let's just transform each element
89
00:04:52,180 --> 00:04:55,740
to string with Celsius.
90
00:04:55,740 --> 00:04:58,350
And I don't even remember where this is,
91
00:04:58,350 --> 00:04:59,833
so I'm just copying it here.
92
00:05:04,520 --> 00:05:07,950
Then we also need to account for the current day.
93
00:05:07,950 --> 00:05:12,847
So string needs to contain day.
94
00:05:14,750 --> 00:05:19,000
And again, that is the index plus one.
95
00:05:19,000 --> 00:05:22,980
And finally, we also need to add the three dots
96
00:05:22,980 --> 00:05:27,980
between elements and start and end of string.
97
00:05:32,260 --> 00:05:35,490
So that looks like a lot of work,
98
00:05:35,490 --> 00:05:40,330
but actually it is not as hard as it looks from here.
99
00:05:40,330 --> 00:05:44,800
So let's start by creating two arrays here.
100
00:05:44,800 --> 00:05:47,900
So for test data one and two.
101
00:05:47,900 --> 00:05:50,163
Actually grab all of this in one go.
102
00:05:57,430 --> 00:05:58,393
Data two.
103
00:05:59,560 --> 00:06:00,690
All right.
104
00:06:00,690 --> 00:06:03,680
And now let's tackle these problems here.
105
00:06:03,680 --> 00:06:04,870
Okay.
106
00:06:04,870 --> 00:06:08,350
So if the string would always have the same length,
107
00:06:08,350 --> 00:06:11,210
so if it was always just be three days,
108
00:06:11,210 --> 00:06:12,570
then it would be very simple.
109
00:06:12,570 --> 00:06:16,890
We could just basically hard coat the string, right?
110
00:06:16,890 --> 00:06:20,913
We could just do something like data one,
111
00:06:21,800 --> 00:06:26,403
at position zero, and then the degrees Celsius,
112
00:06:29,960 --> 00:06:33,760
then dot, dot, dot, and so on and so forth.
113
00:06:33,760 --> 00:06:35,350
Right?
114
00:06:35,350 --> 00:06:37,443
So here I'm missing this, of course.
115
00:06:42,420 --> 00:06:45,430
So we could do this and there's still some value
116
00:06:45,430 --> 00:06:49,253
in first actually trying to write this.
117
00:06:50,620 --> 00:06:55,620
So this is how it would look like data zero and one and two,
118
00:06:56,750 --> 00:06:59,963
and let's indeed lock this to the console,
119
00:07:03,320 --> 00:07:04,620
give it a safe.
120
00:07:04,620 --> 00:07:07,270
And so actually already the string
121
00:07:07,270 --> 00:07:11,230
looks exactly what we had here, right?
122
00:07:11,230 --> 00:07:13,363
But of course, this is not the way to go.
123
00:07:14,570 --> 00:07:16,610
Because then here in data two,
124
00:07:16,610 --> 00:07:20,830
we have a longer array.
125
00:07:20,830 --> 00:07:22,760
And we want to write one function
126
00:07:22,760 --> 00:07:24,673
that works for all the arrays.
127
00:07:25,530 --> 00:07:27,303
So that print forecast.
128
00:07:28,700 --> 00:07:31,090
And so of course we need a more dynamic way
129
00:07:31,090 --> 00:07:33,000
of creating this string.
130
00:07:33,000 --> 00:07:34,260
But still, as I said,
131
00:07:34,260 --> 00:07:36,820
there is some value in having done that
132
00:07:36,820 --> 00:07:38,520
because it will help us figure out
133
00:07:38,520 --> 00:07:41,200
how we can arrive at a solution.
134
00:07:41,200 --> 00:07:44,470
So print forecast is a function
135
00:07:44,470 --> 00:07:46,460
which takes in an array 'arr'
136
00:07:49,030 --> 00:07:50,933
and now let's see what we have to do.
137
00:07:52,500 --> 00:07:54,730
So if we have an array
138
00:07:54,730 --> 00:07:57,590
and we have to do multiple operations on it,
139
00:07:57,590 --> 00:07:59,760
we will as always use a loop.
140
00:07:59,760 --> 00:08:02,143
So let's start with that baseline.
141
00:08:03,470 --> 00:08:06,730
So let i equals zero.
142
00:08:06,730 --> 00:08:09,480
And this part is not always the same,
143
00:08:09,480 --> 00:08:13,720
so i less than arr dot length
144
00:08:14,670 --> 00:08:16,623
and i plus, plus.
145
00:08:17,960 --> 00:08:20,830
Okay, but now what are we gonna do?
146
00:08:20,830 --> 00:08:25,800
So how will we basically transform the array into a string?
147
00:08:25,800 --> 00:08:27,310
And there are so many ways
148
00:08:27,310 --> 00:08:29,150
in which we could achieve this
149
00:08:29,150 --> 00:08:30,940
and actually in which we could solve
150
00:08:30,940 --> 00:08:32,470
this whole problem here,
151
00:08:32,470 --> 00:08:34,450
especially if you did some research
152
00:08:34,450 --> 00:08:36,410
to arrive at a solution here,
153
00:08:36,410 --> 00:08:39,210
but I will just go with a solution
154
00:08:39,210 --> 00:08:41,830
using the tools that we already used.
155
00:08:41,830 --> 00:08:43,330
So remember what we did,
156
00:08:43,330 --> 00:08:46,320
when we calculated the average of a number.
157
00:08:46,320 --> 00:08:48,190
We started by adding all the values
158
00:08:48,190 --> 00:08:50,850
of the array using a loop, right.
159
00:08:50,850 --> 00:08:52,330
And we kept adding them,
160
00:08:52,330 --> 00:08:56,780
to an accumulator variable that was called sum, right.
161
00:08:56,780 --> 00:09:00,150
So just to illustrate that sum started at zero,
162
00:09:00,150 --> 00:09:04,270
and let's say we had an array of two, three, four.
163
00:09:04,270 --> 00:09:05,600
And so in the first iteration,
164
00:09:05,600 --> 00:09:08,220
that sum was then updated to two.
165
00:09:08,220 --> 00:09:09,480
Then in the second iteration,
166
00:09:09,480 --> 00:09:14,080
it was updated to two plus three equals five.
167
00:09:14,080 --> 00:09:18,100
And then in the last iteration, it was updated to five,
168
00:09:18,100 --> 00:09:23,100
which was the current sum plus four equal nine.
169
00:09:23,170 --> 00:09:25,430
And so that's how we end up with the sum
170
00:09:25,430 --> 00:09:27,290
of all of these values.
171
00:09:27,290 --> 00:09:29,080
And now with the string,
172
00:09:29,080 --> 00:09:32,400
we can actually do the exact same thing.
173
00:09:32,400 --> 00:09:34,940
So here we will also have an accumulator,
174
00:09:34,940 --> 00:09:38,743
a variable essentially, which is gonna be called string.
175
00:09:39,810 --> 00:09:41,400
So let string.
176
00:09:41,400 --> 00:09:43,720
And instead of starting with zero,
177
00:09:43,720 --> 00:09:46,220
we will start with the equivalent of zero,
178
00:09:46,220 --> 00:09:49,900
but for strings, which is the empty string.
179
00:09:49,900 --> 00:09:52,430
So empty string has nothing.
180
00:09:52,430 --> 00:09:54,260
And then in each iteration,
181
00:09:54,260 --> 00:09:57,140
we will simply add to that string,
182
00:09:57,140 --> 00:10:00,020
the current value of the array.
183
00:10:00,020 --> 00:10:01,840
So let's do that.
184
00:10:01,840 --> 00:10:03,693
String equals,
185
00:10:05,660 --> 00:10:07,660
the current value of string,
186
00:10:07,660 --> 00:10:12,660
plus array at the current position.
187
00:10:13,100 --> 00:10:17,430
And also let's already add this symbol here
188
00:10:17,430 --> 00:10:21,310
and for that let's wrap this here into a template literal.
189
00:10:21,310 --> 00:10:22,720
And so I'm selecting this
190
00:10:22,720 --> 00:10:27,060
and then I can just hit the template literal diabetic once
191
00:10:27,060 --> 00:10:28,573
and it will wrap all of that.
192
00:10:30,000 --> 00:10:35,000
So then this and this, and then the degrees Celsius.
193
00:10:37,200 --> 00:10:39,760
And now all we need to do is to log that string
194
00:10:40,830 --> 00:10:41,890
to the console.
195
00:10:41,890 --> 00:10:44,223
So just as was asked.
196
00:10:45,810 --> 00:10:49,760
Which takes in and logs the string to the console.
197
00:10:49,760 --> 00:10:53,720
So we could have added that actually as one sub problem,
198
00:10:53,720 --> 00:10:56,660
even though it's a really small one.
199
00:10:56,660 --> 00:11:00,413
Log string to console.
200
00:11:01,300 --> 00:11:04,580
And so let's give it a try now.
201
00:11:04,580 --> 00:11:09,580
I'm saving and nothing happened.
202
00:11:09,680 --> 00:11:13,763
And that's because we didn't call the function.
203
00:11:14,660 --> 00:11:18,863
So let's print forecast with data one,
204
00:11:20,950 --> 00:11:23,840
and here we go.
205
00:11:23,840 --> 00:11:28,360
So 70 in degrees, 21 degrees, 23 degrees.
206
00:11:28,360 --> 00:11:32,690
And that already starts looking like what we have here.
207
00:11:32,690 --> 00:11:37,000
So essentially we already completed the most difficult part,
208
00:11:37,000 --> 00:11:40,630
so of transforming the array into a string.
209
00:11:40,630 --> 00:11:43,270
And again, this was similar to adding multiple numbers
210
00:11:43,270 --> 00:11:44,820
into one bigger number.
211
00:11:44,820 --> 00:11:47,850
Here what we did was to add multiple strings
212
00:11:47,850 --> 00:11:52,070
to a bigger string that kept growing after each iteration.
213
00:11:52,070 --> 00:11:54,353
And if you want to make sure to really understand this,
214
00:11:54,353 --> 00:11:56,680
then you can always use the debugger
215
00:11:56,680 --> 00:11:58,860
and go through this loop step by step
216
00:11:58,860 --> 00:12:02,360
and see this string variable here are growing
217
00:12:02,360 --> 00:12:04,393
as the loop goes on and on.
218
00:12:05,450 --> 00:12:09,740
So we already did this part also and this part.
219
00:12:09,740 --> 00:12:12,210
Now let's tackle this one.
220
00:12:12,210 --> 00:12:15,590
So it needs to also contain the day.
221
00:12:15,590 --> 00:12:17,823
So what does that look like?
222
00:12:19,130 --> 00:12:22,440
So 23 degrees in three days.
223
00:12:22,440 --> 00:12:25,610
So in one days, two days and three days,
224
00:12:25,610 --> 00:12:27,733
so that's not too hard.
225
00:12:30,670 --> 00:12:33,330
And now we already understood
226
00:12:33,330 --> 00:12:36,163
that this had to be the current index plus one.
227
00:12:37,050 --> 00:12:41,253
So the current index is i plus one.
228
00:12:42,280 --> 00:12:44,710
So in one days.
229
00:12:44,710 --> 00:12:47,740
So in the first iteration is gonna be zero plus one,
230
00:12:47,740 --> 00:12:52,740
then one plus one, and then two plus one, give it a safe.
231
00:12:54,140 --> 00:12:56,790
And that starting to look really close
232
00:12:56,790 --> 00:12:59,010
to what we need in the end.
233
00:12:59,010 --> 00:13:01,960
but now we are missing the separator dots.
234
00:13:01,960 --> 00:13:05,040
So how do you think we can achieve those?
235
00:13:05,040 --> 00:13:09,740
Well, in fact, these dots are simply something that repeat
236
00:13:09,740 --> 00:13:12,943
after each of these strings here, right?
237
00:13:13,860 --> 00:13:17,243
So we have this value and then dot dot dot.
238
00:13:18,630 --> 00:13:21,343
So we have to value dot, dot, dot.
239
00:13:23,130 --> 00:13:25,240
We just need one more space here,
240
00:13:25,240 --> 00:13:29,403
to create this nice separation that we have.
241
00:13:30,690 --> 00:13:34,750
And so now we're almost done, okay.
242
00:13:34,750 --> 00:13:37,410
So actually this is not correct here,
243
00:13:37,410 --> 00:13:40,010
because it's missing the, in one days in two days
244
00:13:40,010 --> 00:13:41,363
and so on and so forth.
245
00:13:42,250 --> 00:13:46,253
But let's just compare it here with the original.
246
00:13:47,820 --> 00:13:49,820
And so all that is left
247
00:13:49,820 --> 00:13:52,253
is these three dots at the beginning.
248
00:13:53,120 --> 00:13:57,930
And so, we can just add them at the end.
249
00:13:57,930 --> 00:14:00,210
So we cannot put them here, right?
250
00:14:00,210 --> 00:14:02,890
Because then we would have too many dots.
251
00:14:02,890 --> 00:14:05,250
So that's a lot of dots
252
00:14:05,250 --> 00:14:08,480
and that's not what we were looking for.
253
00:14:08,480 --> 00:14:10,710
So instead we keep it like this
254
00:14:10,710 --> 00:14:13,410
and then as we log it to the console,
255
00:14:13,410 --> 00:14:16,380
we simply add the dots here at the beginning.
256
00:14:16,380 --> 00:14:17,453
So dot, dot, dot,
257
00:14:18,560 --> 00:14:21,890
plus the string, give it a safe
258
00:14:21,890 --> 00:14:26,260
and yes, that's the solution of our problem.
259
00:14:26,260 --> 00:14:27,470
Great.
260
00:14:27,470 --> 00:14:29,770
Can just improve this here a little bit again,
261
00:14:29,770 --> 00:14:32,420
by using the plus equal operator
262
00:14:32,420 --> 00:14:34,530
and then get rid of this part,
263
00:14:34,530 --> 00:14:38,223
make it a little bit more short and more efficient maybe.
264
00:14:39,160 --> 00:14:43,220
And so, yeah, that's it.
265
00:14:43,220 --> 00:14:46,690
That's the result of this coding challenge.
266
00:14:46,690 --> 00:14:50,070
And again, you could have done it in so many different ways,
267
00:14:50,070 --> 00:14:53,690
but what I really wanted you to achieve was to understand
268
00:14:53,690 --> 00:14:57,630
the problem and to break it up into small sub-problems.
269
00:14:57,630 --> 00:15:00,040
if you did that, well, then my goal
270
00:15:00,040 --> 00:15:04,000
with this whole section I would say is achieved.
271
00:15:04,000 --> 00:15:05,960
So hope you liked this one,
272
00:15:05,960 --> 00:15:08,680
even though it was a little bit more theoretical,
273
00:15:08,680 --> 00:15:11,250
but I think it's important to also have a section
274
00:15:11,250 --> 00:15:14,420
like this in a big web development course
275
00:15:14,420 --> 00:15:15,580
because soft skills,
276
00:15:15,580 --> 00:15:18,590
like the ones that I just showed you
277
00:15:18,590 --> 00:15:21,773
are also very important for your success.
20052
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.