Welcome back, my friends, in today's lecture.
What are we going to do is we're going to try to replicate this part.
So when I go to movies and when I click here, so I just want to grab these reading here with the stars
so we know that it's eight point one here.
But and I'm giving half star because I don't have any other, like, CGI that can make this point zero
one.
Right.
So that's not possible.
And even if I have eight point eight, I will still give a half stars.
So that is the reality here.
And we need to do a couple of changes.
So first, change that we need to do.
So I'm just going to close everything.
So I'm in MAPI starter.
You should go there.
So the first change we need to do in the movie that Geass in here, we need to add a method that will
calculate this one.
So this, that movie rating and I'm going to pass the data that I am DB rating here.
Right.
So these data will go back to the movie rating.
Now I'm going to create here a function called movie rating.
Obviously we need to do this.
And I'm going to say IMDB.
I'm Debbie Rating.
Right.
So you can give any name.
Actually, it's pretty much this what we got passing here.
Now, the idea is to create an area based on this bar.
So I'm just going to grab the decimal integer park and I'm going to grab these decimal part.
And we also need to think about if it's ten.
So if the result is ten, I'm just going to need to have a ten stars here.
So what I'm going to see these that rating rating array that will I will set this one to empty.
Right.
Because I don't have empty I don't have array here and I want to store all of these calculations we're
going to do here.
2D array here.
Now stay with me.
I think this is a little bit tricky to understand, but what I'm doing is actually I'm going to create
an array with with items.
For example, if I have eight, I will create eight items inside that area.
So I'm going to check first if I am DBE rating is equal equal to 10.
Right.
So if that is the case, what I will do, I will just create a for loop.
A normal for loop where I'm going to start.
So normal for normal for a loop here.
And I'm going to say I n let's start with this, let I start from zero and I'm going to say I pass int
so I need to use these parts in functions because I am db reading is actually a string so it will not
work if I try using the IMDB here.
Right.
I plus plus in.
What I will do here is that rating array I'm going to push here the I.
OK, so I don't think so.
There is a IMDB rating of 10, but let's create this one here.
So I'm going to rewrite everything that we passing from here.
For example, we passing seven but I'm going to rewrite it and I'm going to store in this story in this
variable number 10 and let's see if it's going to work now.
I'm just going to inspect it here.
I'm just going to go here and let's pass a movie here.
Click on this one.
Doesn't matter.
I'm going to inspect this one and I'm going to go to the console.
And what I know that here we need to zoom in a little bit.
Window, window dot data.
Right.
So I do have access to the movie now.
I should be able to see the reading array.
So here is the reading array is there from zero until nine.
Cool.
So I do have this.
So it's working OK, but what I'm going to do from now, I'm just going to write it.
That window, the data, that movie that I'm reading, IMDB, what was the name reading or rating array.
So I'm just going to click it like this and after that it will be stored there so I can use it.
Right.
Nice.
So here it is zoomed up.
Zoom in now.
So that was the first case.
So what is happening?
If it's if it's not, then.
Right.
So we need to think of that.
So if it's not, then we will try and save this array.
So I'm going to say let Deery in.
I am going to save this IMDB reading dot split.
Now let me show you what will happen.
So I'm just going to cancel.
Log entire Deery, right, so you can choose any name me one.
So here it is.
I do have array because it's seven point seven.
I do have array with two values on the first position, zero on the second on the zero position is seven
on the first position is also seven and the length is too cool.
Now this is working.
So if I go another movie here.
Oh yeah.
Search something else and if I click here it will be different rating.
So I need actually to clean this one and to refresh.
And now we will have the array of eight, eight and one cuz we want this.
But look, there are strings right.
Remember this.
So I'm going to create here let let in part and I'm using this led because I'm pretty much sure that
I don't want to mess around and I don't want to run into error.
So array of the zero position.
So I'm going to grab this one and I'm using the pass in and I'm going to say that's decimal part.
That's part.
And that will be for the first position.
Right.
OK, now if I count the lock the deck, that's four.
Let's see.
So it will be one because it's eight point one and we are grabbing the one.
But look, it's no, it's not string anymore.
Good.
Now it means that I can do things that I can do with numbers.
Show means that I can use these if conditioning if I see this part is bigger than zero.
Right.
So even if it's like this, if it is three point one, this is actually point one now it will go inside
here and I will just run this function.
But look what I'm going to do here now.
I'm going to go here until the inpart, right.
Until this integer part.
So this integer part, it will be seven sorry, eight in this case.
So it will go eight times.
And after it finishes, I am going to set these that push is that reading array and I am going to push
zero point five at the end.
Why?
Because I know that we have decimal number and I'm going to use the zero point five later and let's
see what's happening here.
Now, if you go back here to the data array, here it is now.
I have nine elements inside and it goes from zero until seven in each.
It goes on to zero until eight, but doesn't matter.
So actually, it's still good.
It's not nine here, it's eight.
So it will go on to seven in the last one will be zero point five.
This is what I expect here right now.
Cool.
What I want is to have a different if no, I want to say out here and in this else what I'm going to
do.
I'm just going to copy this part.
So why I'm doing this, for example, if we don't have a decimal part, that means if it's seven only
and let me search.
I think this red has a seven only thinks of this one error is because I've done my homework before.
So it's seven only, right.
Seven point zero.
But I don't care if one zero.
Now if I go back here, it will go until zero.
One, two, three, four, five, six.
That's I have seven items.
That's what I need.
Because the decimal part is not bigger than zero.
It's a zero actually.
That's why it's going here in this house.
Now, we have done the structure for I mean, we have created the rating array and what we need also
to do.
So what we need also to add it into the the the movie view.
Right.
So here where we are going to add rate search for this movie and we do have these SPG, Igen.
So what I'm going to do, I'm just going to cut one.
I'm just so I'm cutting one right in on top here.
I'm going to create a function.
So I'm going to say actually we're not going to export it because this is a function going to be used
here locally.
So I'm going to say constantly movie rating.
And inside here, I am going to pass the current element, so we need to do a for loop, by the way,
right now.
Stay with me.
So what I'm going to do here, I'm going to say, let's mark-up all kinds of markup doesn't matter here.
I'm going to paste the SPG.
I have cut it from before.
Right now, the current element will also will be one.
It will be for example, it will be one, two, three, four, five, six, seven.
But if we have a decimal number, what I want to say, I want to check this one so I can do it like
this.
If the element is different than zero point five, I am just going to say return the markup right else.
And I need to fix this one because it's not looking great here.
I don't know.
Why is this like that?
No, OK, it's getting there now.
I need to shift this one as well because it's looking very odd.
Now, if the element current element is different than zero and five, then I'm going to return this
one.
Otherwise I'm going to return something else.
So I do have a different markup that I will return.
So I'm just going to use this markup again.
That's why I use it left here.
Nice.
And what I'm going to do here, I'm going to change a couple of things.
So this is for the full star, but here I need half a star star, half, that is what you need to change
and I'm going to return to Mark-Up
pretty much that.
No.
Nice.
So we have done this function here.
We created this function will return like seven stars, and if we have zero point five, then it will
return this one.
Right now, what we need to do is actually go back here.
Where was it rate this movie?
So we need to call this function.
So how are we going to call this function here?
Well, we're just going to simply create here.
We're going to use the map method.
Right.
So I do have the access of the movie star rating array.
Right.
Because we created a rating array here, this that reading array.
So I have the access of this one and I'm going to call on this one, the map method.
Right.
Remember, in inside the method, I have the axis of the current element I have X is actually the three
things, but I'm going to use the current element in from here.
I'm going to loop actually I'm going to call the movie rating function.
Right.
And I'm going to pass the current element there.
Let's save it and let's see what's happening.
Here it is.
I do have seven stars.
One, two, three, four, five, six, seven.
What was this?
I do have this disclaimer here, OK?
One simple solution to get rid of this one is, is to use the joint method.
But I'm going to explain you.
So the map returns a new area which contains the elements that are altered right.
In the function that is best to.
And when the area is converted to string, it is automatically joined with commas.
So that is the way the map function function is working.
So it is automatically join with commas when the rate is converted back to string.
Now we can get rid of this one by using that joint here.
So I want to join them and I want to use that empty string here cuz now I do have this one.
OK, so it's working for seven.
Let's search movies again.
Now let's click on this one.
Good.
Six point eight.
That means six and a half stars.
One, two, three, four, five, six and a half.
Nice.
Something else.
We do have something else.
Eight point one.
Good.
So we have nine.
Which one of them is one, two, three, four, five, six, seven, eight.
And this is the nine.
Nice.
I really like how this is looking now.
In next section we're going to do this one, this port and this where we will use with the with the
help of data sets.
Right.
So I'm just going to recap what we have done.
I've just called a function that we just created a past the current element that we are looping using
the map method.
And I'm calling this function and this function is way up here and I've created markup.
The markup contains the full I can star in, but that is if element is different than zero five.
Why?
Because here we put it here.
If there is a decimal part, let's push zero point five.
Now, this is not a very fancy way of doing this.
And if you guys find a better way, just let me know the solution and I'm going to just introduce that
solution here.
Right.
This is just for practicing how we can do it else in how we can do for it.
So this is my idea.
Just to push as many more things here, then.
Yeah.
Than just displaying things.
Right.
So that is how I solve it.
But there is other ways, much easier ways.
But yeah, let me know if you think of something and we will do it right.
So see you in the next one.