Jonas: Alright, here goes my solution
for the first part of the coding challenge
that I just showed you.
So, I start by creating the John object,
set object literal again,
then the full name, John Smith.
And then an array of the bills,
just as it says in the instructions.
And the bills are 124, 48, 268, 180, and 42 dollars.
Okay, and that's all the data that we need.
Now we're already ready to write
our calcTips function, or method I should say.
So, function without any argument,
such like before.
And so, this challenge here is actually
a bit similar to the one before
where we calculated the BMIs
for John and Mark.
The only difference is that this time
we also need some loops
and so that adds a new level of complexity
to this functioning.
Alright, so, remember how I said
that you should start with an empty array
for both the tips, and the final values?
And while you could do that,
you can do it like this.
So, tips, and then here, an empty array,
but I figured that would be a bit cleaner
to start without a tear
and instead, as soon as we run the function,
then we add these empty arrays to our object.
Okay, so, how do we do that?
Well, we just say this dot tips
equals an empty array,
and then also this dot final values
is also an empty array.
Okay, so I'm giving it the same names
as I did in the other tip calculator.
So, tips will be the array
with all of the five tips.
So, one for each of these bills,
and then the final values is the array
where we will have the sum
of each tip with each bill.
Okay, so now we have to loop through the bills
in order to calculate the tip
for each of these values.
Okay, and so, of course we're going to use
the four loop, such as we learned in the last lecture.
Four, and restarting at I zero,
and we're going until I reaches the length
of the bills array.
So, once more, it's the exact same thing
as we did in the last lecture.
Okay, so we're just applying
what we just learned before.
So, where is this bills?
Well, it's at this dot bills
and then dot length.
And so, here you see something for the first time,
which is two dots.
Okay, and actually the dot is an operator.
So, let's go to our operator precedence table
that is still opened here,
and here you have this operator
which is called the member access.
Okay, and we see that this one
is executed from left to right.
Alright, and so this is why this works.
So, here is the first one.
So, the first dot.
And so this dot bills
is the first part that will be executed.
And so, this here will be basically
replaced with this array.
And so, we end up having this array here
and then after that, we retain the length property,
this one here, of that array.
Okay, so, if it was the other way around,
if we started reading this way here,
then it wouldn't work at all
because bills dot length would be something anon.
So, it wouldn't exist
because all that exists is this dot bills.
And so, of course it makes a lot
of sense that we start basically reading
that we start executing from left to right.
So, that was just a small detail,
but I think it's important to really
understand why these things
actually work the way they do.
Okay, I hope you agree with that.
So, I plus plus.
Alright, makes sense.
So again, we're going all the way
until we reach the length of the builds array.
Which is six in this case.
So, we execute it for 0123 and four.
Okay, so the length is not six, it's five.
I think I said six, but of course it's five.
Alright, so what are we going to do in each duration?
Well, just like before,
we are going to determine the percentage
based on the tipping rules.
Okay, so let's write that down here.
Okay, and so I actually,
I like to add these comments here
in order to figure out beforehand,
before actually writing the code.
So, we determined the percentage
and then we add the result
to the corresponding arrays.
So, this is the same stuff that we did before.
So, we define the percentage
without actually specifying it.
So we just declare the variable here
but do not define it.
And we do that based on the bill.
So, if the bill is less than 50, remember.
So, that's the rule that we have up here.
So, if the bill is less than 50
then the tip is 20 percent,
it is 15 percent if it's between 50
and 200 dollars, and it's 10 percent
if it's more than 200 dollars.
Alright, and so, we are going
to translate that here into code.
Okay, and actually, bill is not something
that we have defined.
So, sorry for that.
So, it's not bill, but instead,
what do we have here?
We have this dot bills, add to current position.
Okay, so maybe this is starting
to become a bit confusing.
Okay, and I totally get that.
And I actually mentioned before,
that was kind of the goal of this challenge.
Not to be confusing to you,
but to make you think a little bit about
how the things work.
So, how can we solve this kind of problems?
Okay, so this dot bills
is our array with the bills.
Right, and what we do here with the loop,
is to loop exactly through that array.
And so, it only makes sense
that we then access the current position
of this array using the current counter variable.
Okay, and that's always I,
just as we learned in the last lecture.
Alright, and so, let's now define
the percentage for this bill value,
and that will be point two.
Okay, so, 20 percent.
Then else, and I actually grab this one here.
So, if it is larger, or equal 50,
and at the same time it should be less than 200.
Right, so that it stays exactly
between 50 and 200.
So, in this case,
the percentage is going to be point 15.
And then finally, in all other cases,
the percentage is going to be point one.
Okay, now as you see here,
we have a lot of duplicate code here.
So, this dot bills and then I,
we have repeated it here three times.
And so lets actually create
a separate variable for that.
So, lets call that one bill.
Okay, and to before doing anything here
we simply create a variable
where we store the current bill value.
Alright, so we can now go ahead
and replace all of these here.
And so, that's a bit better.
So, instead of repeating the same code
multiple times, we just store the value
and a variable.
Okay, so that is much better.
Okay, so for each of the bills
we have now figured out the percentage.
So, all we have to do now
is to edit to the tips,
and to the final values array.
So, this dot tips at the current position.
Remember, that is I.
Well, and now it's very simple.
It's the bill variable that we defined before.
So, this dot bills at the current position,
times the percentage.
And so, this part here is exactly the same
as in the first, in the more simpler version
of our tip calculator, right?
And now finally, this dot final values,
add to current position,
will be the bill plus the this dot tips
at the current position.
Or, actually, we can do this one here.
So it's the same.
Okay, so we have the bill,
plus the bill times the percentage.
Alright, and so that's actually it.
So, that is our tips calculator
which will at the same time,
calculate the tips for all
of the five bills.
Alright, let's actually try that out.
So, John dot calcTips,
and then let's log into the console.
Console dot log, John.
Alright, oh we have some syntax error
here at line 674.
So, where is that?
And indeed, I'm missing the if here.
So, else if.
Probably, you already saw that when coming.
So, I'm sorry for that mistake.
And so, now we have the object here.
And in here, we have our bills.
We have our final values,
and we have our tips.
So, it's all here now.
Okay, so, we have 18 point six,
nine point six, 26 point eight,
27 and eight point four.
And this, if we edit to this bills,
will then result in this final values
that we have here.
So, for example, this 180 plus the 27,
is 207 and that's exactly what we see here.
Right, so, it means that it's actually working.
So, the first part of a challenge
is completed I think.
Let's take a look.
So, add the method and should include the loop.
Add as an output, create these two arrays.
Okay, so the first part is finished.
Let's take a look at it again,
because it's quite a lot of code here,
and this is by far the most complicated
code that we have written
up until this point in the course.
So, the hardest part probably to grasp
is the fact that inside of this method here
this calcTips method,
we have this loop that calculates
all of the five tips all basically at the same time.
One after the other, but automatically.
So, that's exactly the reason
why we used the loop.
Okay, and so we had to have these
kind of confusing like, this dot bills dot length.
Where we first read the bills array,
from the current object,
and then from there,
we get the length.
Alright, and then here we get the current bill.
So, the current value,
and from there, well, basically
the same is then the rest is the same
as we did in the other challenge.
Okay, then another particularity
was that we had to create these empty arrays here
so that we can then fill them up.
And maybe you thought that we could do it like this.
So, this dot tips, is equals this dot final values,
is equals an empty array.
So, maybe try to do it all in one line,
but that is not going to work.
So, this here will not work
because what is this going to mean,
is that this two arrays will be the same.
So, in this case, if you did it like this,
if you then added something to the tips array.
So, this one here, then you would have
automatically also added to the final values
because they would be in fact the same array.
Alright, and don't worry
if that sounds a bit confusing
to you at this point,
because later on, again,
we will learn why it is that way.
So, what I want you to do now
is after this video,
take a deep look again at this method here
and especially of course, at this method here.
Try to figure out why everything works
the way that it does here,
and only move on if it really makes sense to you.
Okay, so this was the first part of the solution.
Now, in the next video,
I will then solve this second part.
Okay, so I'm leaving that for a different video
so that you can first go over this again
and make sure that you understand
100 percent what's going on here.