Original subtitles

So I showed you some ideas

and some tools to solve problems

and to debug your applications.

And so now it's your turn

to put all of that into practice on your own.

And so here is your coding challenge for this section.

So given an array of forecast at maximum temperatures,

to thermometer that we've been working about

throughout this section should display

a string with these forecasted temperatures.

So for example, if we have this array,

which is our first test data here,

then the string that it will print should be this.

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

So that's the 17 here.

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

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

23 degrees in three days.

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

Okay.

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

if you can find it on your keyboard.

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

So what you should do is to create a function

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

and then locks the string,

just like this one here to the console.

Okay.

And call this function for these two test values.

And to softwares, you can use the problem solving framework

that we have just been talking about in the section.

So try to understand the problem first

by asking the right questions

and then break it into sub-problems.

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

And for me the main goal

is not even that you achieve the result,

but really that you start thinking about the problem

and that you try as good as possible

to break it up into sub-problems.

And of course there are many ways

of asking the right questions

and of breaking this up into sub problems.

So there is no hard ways of doing this stuff.

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

And I will see you here once you are ready.

Okay.

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

And let's just close this terminal here.

Because remember that this live connection

actually keeps running without the terminal opened.

So let's just grab from up here,

this here.

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

I don't like to type so much,

so I'd just keep reusing stuff.

So we need to understand the problem first.

So let's look at that example string here.

And so one part of the problem

is definitely that this array here,

was basically broken up in three pieces

and then the separator is these three dots.

Let's write that here.

Array, transformed to string,

separated by three dots.

Then we can also ask what these numbers here are.

So we already know that

these here are of course coming from the array,

but what is this?

So one days, two days and three days.

So what is the X days?

And the answer to that is basically

it is the current index of the array plus one.

So it would be weird to say that 17 degrees

in zero days, because this is the forecast.

And so this is for the next day

and then in two days and in three days.

So answer index plus one.

Okay.

So I think we understood the problem now,

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

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

And I would say that the main problem here,

will be to transform this array into a string.

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

Also, each of these elements here will be transformed

to a string with these degrees Celsius.

So let's just transform each element

to string with Celsius.

And I don't even remember where this is,

so I'm just copying it here.

Then we also need to account for the current day.

So string needs to contain day.

And again, that is the index plus one.

And finally, we also need to add the three dots

between elements and start and end of string.

So that looks like a lot of work,

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

So let's start by creating two arrays here.

So for test data one and two.

Actually grab all of this in one go.

Data two.

All right.

And now let's tackle these problems here.

Okay.

So if the string would always have the same length,

so if it was always just be three days,

then it would be very simple.

We could just basically hard coat the string, right?

We could just do something like data one,

at position zero, and then the degrees Celsius,

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

Right?

So here I'm missing this, of course.

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

in first actually trying to write this.

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

and let's indeed lock this to the console,

give it a safe.

And so actually already the string

looks exactly what we had here, right?

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

Because then here in data two,

we have a longer array.

And we want to write one function

that works for all the arrays.

So that print forecast.

And so of course we need a more dynamic way

of creating this string.

But still, as I said,

there is some value in having done that

because it will help us figure out

how we can arrive at a solution.

So print forecast is a function

which takes in an array 'arr'

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

So if we have an array

and we have to do multiple operations on it,

we will as always use a loop.

So let's start with that baseline.

So let i equals zero.

And this part is not always the same,

so i less than arr dot length

and i plus, plus.

Okay, but now what are we gonna do?

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

And there are so many ways

in which we could achieve this

and actually in which we could solve

this whole problem here,

especially if you did some research

to arrive at a solution here,

but I will just go with a solution

using the tools that we already used.

So remember what we did,

when we calculated the average of a number.

We started by adding all the values

of the array using a loop, right.

And we kept adding them,

to an accumulator variable that was called sum, right.

So just to illustrate that sum started at zero,

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

And so in the first iteration,

that sum was then updated to two.

Then in the second iteration,

it was updated to two plus three equals five.

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

which was the current sum plus four equal nine.

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

of all of these values.

And now with the string,

we can actually do the exact same thing.

So here we will also have an accumulator,

a variable essentially, which is gonna be called string.

So let string.

And instead of starting with zero,

we will start with the equivalent of zero,

but for strings, which is the empty string.

So empty string has nothing.

And then in each iteration,

we will simply add to that string,

the current value of the array.

So let's do that.

String equals,

the current value of string,

plus array at the current position.

And also let's already add this symbol here

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

And so I'm selecting this

and then I can just hit the template literal diabetic once

and it will wrap all of that.

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

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

to the console.

So just as was asked.

Which takes in and logs the string to the console.

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

even though it's a really small one.

Log string to console.

And so let's give it a try now.

I'm saving and nothing happened.

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

So let's print forecast with data one,

and here we go.

So 70 in degrees, 21 degrees, 23 degrees.

And that already starts looking like what we have here.

So essentially we already completed the most difficult part,

so of transforming the array into a string.

And again, this was similar to adding multiple numbers

into one bigger number.

Here what we did was to add multiple strings

to a bigger string that kept growing after each iteration.

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

then you can always use the debugger

and go through this loop step by step

and see this string variable here are growing

as the loop goes on and on.

So we already did this part also and this part.

Now let's tackle this one.

So it needs to also contain the day.

So what does that look like?

So 23 degrees in three days.

So in one days, two days and three days,

so that's not too hard.

And now we already understood

that this had to be the current index plus one.

So the current index is i plus one.

So in one days.

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

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

And that starting to look really close

to what we need in the end.

but now we are missing the separator dots.

So how do you think we can achieve those?

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

after each of these strings here, right?

So we have this value and then dot dot dot.

So we have to value dot, dot, dot.

We just need one more space here,

to create this nice separation that we have.

And so now we're almost done, okay.

So actually this is not correct here,

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

and so on and so forth.

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

And so all that is left

is these three dots at the beginning.

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

So we cannot put them here, right?

Because then we would have too many dots.

So that's a lot of dots

and that's not what we were looking for.

So instead we keep it like this

and then as we log it to the console,

we simply add the dots here at the beginning.

So dot, dot, dot,

plus the string, give it a safe

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

Great.

Can just improve this here a little bit again,

by using the plus equal operator

and then get rid of this part,

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

And so, yeah, that's it.

That's the result of this coding challenge.

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

but what I really wanted you to achieve was to understand

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

if you did that, well, then my goal

with this whole section I would say is achieved.

So hope you liked this one,

even though it was a little bit more theoretical,

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

like this in a big web development course

because soft skills,

like the ones that I just showed you

are also very important for your success.