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.