Welcome back, ladies and gentlemen, today in this lecture, what we can do, we're going to display
the results that we have done with the previous two functions.
We're going to put it here.
Right.
But before doing that, I just want you to go to where the index file and we are going to grab all of
these class names.
Right.
And store them because I don't want to go in front here in front to name class.
Here it is.
So I don't want to go and spend time in the future lectures, so I'm going to create a couple of that
I think that we need for this class.
And after that, we're going to do it right.
And also, if you don't know where it's coming, you can always refer to this one or you can always
inspect it and see what I'm trying to do.
OK, now let's grab this one.
I'm just going to copy it and I'm going to say, OK, the.
I'm just going to put it like this.
So what will be the name I will say front app result, remaining
remaining calories?
I think that is so from because it's forward up front.
You are right.
OK, now that is one.
We need a couple more.
Let's say that I want to get the exercise calories here.
I want this first this one main panel.
I'm just going to copy it there.
Right.
I'm going to copy the other one and we're going to do it
here.
And I'm just going to copy this, including the darn double dots here.
And I'm going to change the name, obviously.
So for an app in how are we going to call this OK from that food, this would be food panel
calories in these ladies and gentleman.
He's a class and should be like this in order to use it later on.
No, this will be front AB exercise.
All calories and same old cut it.
And don't forget that you need to get rid of this space here, so what else we need for our today's
project?
OK, let's use front and remain text and I'm going to do it like this.
I'm going to just write all of them.
Front percentage.
Value, so.
What else we need a front amp chart.
What else we need front amp beat percent.
Right.
We do have a lot of different things, you know, let's go with front and remain text and this will
be about total remaining.
Grab this class.
And put it there, just get rid of that space now, front and percentage value, it will be this one
here, sterkel percentage value, right?
Now, the next one is a chart circle, right?
This is the glass here.
Maybe it's a little bit boring for you guys, but you have to do it or I have to do it.
And you can copy it from the final folder.
And the last one will be what the last one will be, main panel, date percent.
What does this one mean, panel, eight percent, this bad boy here, right?
I'm going to put it like this.
So that's it for now.
You can't put a comma because we in future, we've got to add more and more.
OK, so because we're going to display the result here where she the right to function in which controller
we should do, we should write this function, pause the video.
If you think about right.
And I hope you know by now that we are everything that that's about front that you are controller.
We just put it here.
So the thing is that we are just putting everything in public because we want to access them.
Right.
And we will do this one scene now.
Make sure that you are a you know, that your functions needs to be separated with common here common
and call this function OK.
Display, let's say display the result.
Back to you, I.
OK, nice.
So what will be the name of the function?
I will say display, display front.
From an app Galeries Whelmed Long, it will be a function, right?
Same as the others in this function will receive an object here in make sure that you put a comma here.
So what will be the object?
So the, let's say, call object.
Right now, this object, it will come from where we should call this function.
Right.
We should call this function from our main app controller in our made up controller.
We do have everything about calories and calculations here.
Now, here we can make a comment and we could call this function and we could pass in this object here.
So that object from function above, it's coming from those.
So, OK, let's say f not this one.
Let's first call it episode controller dot display function calories and we're going to pass in the
calories.
Nice.
And we're going to see here display.
This displayed the computer
calories to the front.
You are OK done now, these calories, that becomes a lot.
We're going to put it there and that's why I have this.
Or was it OK?
Should be here, right?
Yes.
Sometimes you can also track this one.
I do have this object.
OK, now I'm going to see more here and I'm going to grab all the variables.
It's easier for me to do this set off.
Yeah.
See, it's either that you can access, count, object, not remaining like this or you can store these
variables like I will do.
So I'm going to say Ed percentage
path.
This will be our path and I will set it like this.
Then I'm going to say, OK, what I'm going to say today's calories light and then total edit.
And where these guys coming from.
Are you do you remember that they're coming from this and remaining percentage.
I can copy all of this if you want white.
So I do have these today's calories, I do have this today added, so I can just cut it from here.
I put it here remaining seen calm, I put it there and percentage cut it, put it there.
This is the history now.
So now I can say today calories equal count object that today's calories.
So now today's calories.
I do have this value.
Right.
Also the total total added.
It will be called object total.
Add it.
OK, total burn.
It will be Kallo object that total burn total.
Sorry, remaining remaining is what we call object up to three remaining.
I don't know what's wrong with this total percentage equal Kakao object calories, object of percentage.
And ladies and gentlemen, we are done what is now what I would like to do.
OK, I'm just going to create another variable here and that variable will be percentage.
Path in this percentage path, it will be same as our market before, right?
Same as this guy here.
And we are going to go back here and we're going to copy the Path class right from here until here.
We're going to copy it.
We're just going to get rid of these spaces.
Right.
And let's make it make it nice.
So make sure that you don't glue them too much.
That is pretty much what we need to do.
OK, I know.
Whoops.
I know that's a little bit boring, so don't be sure, make sure that you not you don't do anything
like you don't delete anything by mistake.
OK, now here we have.
Where was it?
I'm just going to go slowly.
We do have this stroke dash array in here.
We have 10.
That's a 10 percentage.
So I'm just going to replace this with percentage here, OK?
And after that, in our code, we will put the actual percentages.
So we're going to use we're going to we're going to replace this marker here with the real percentage.
Right.
So that is pretty much what we want to do with this.
OK.
No.
Let's try doing something, so let's select the front remaining tax document, not query selector,
and inside we will see e-mail class names dot front half.
So remaining text, we're going to use this one.
And I will say inner HTML.
We're going to put it.
OK.
So what we are going to do here, I'm going to say spam and you will see in a minute why we need a spin
class.
And I will say, OK, remaining.
And let's put it here remaining, I can just copy it from the from our original document, but I didn't.
OK, so I set this here to front up remain text, which will be this or wasn't.
It is.
And I told you, we can just copy this one.
And I said it to remain.
And you will see because we're going to change this later.
And I just want to have this one to be like that when we start when we just called this function.
OK, so I'm going to copy the entire thing again.
That will probably save me a time.
So HTML class names, I'm going to call front up and see food panel calories and I'm going to say text
content.
I'm not going to do anything here.
Text content in here.
What I would like to do is that I'm going to add plus space plus total edit.
That's pretty much it.
All right.
So let's see what's happening.
If I add one thing, let's see if it's going to work.
I'm going to say food here.
One hundred and sixty four.
Let's click, enter.
And we do have all of these things.
It really has got this.
Plus it's coming from our text here.
So if I put minus it will be there.
It's not coming from the number.
We're not checking it.
This number is positive or negative, but it's coming from we are putting here because I put the text
content in total.
Add it.
OK, now we're going to see we're going to do the same with total burn
burn.
OK, but here we need to change this food panel to, I think, exercise panel calories.
OK, let's see if we target new classes.
So I'm going to add hamburger one five hundred and fifty.
I'm going to edit and I'm going to do an exercise, run one lap for thirty eight and I'm going to add
there.
So I hope here is I've done a mistake.
I put a plus there right in here.
We don't have anything.
OK, we, we will, we will do that later.
So this should be minus because we burn calories right now.
Copy the same one.
Let's put the percentage.
OK, so what is the percentage front ab percentage.
Uh, front end date.
We should have that percent.
Right.
Where is that squared.
So that percent is this guys.
So I just want to put a percent here.
So let's go back to where we were.
I'm just flicking around.
I'm sorry you guys.
Yeah, I'm going to the percentage because I already have the percentage talking this variable here.
So I hope now it's going to work.
Let's see what we do.
So food one four eighty seven.
That's exercise of three fifty eight.
Let's put it there.
Let's go back in.
Yeah I see it is but I don't see the percentage.
How cool is this.
Because I always today.
What's wrong with me.
I always forget things right.
But it was working the other one.
So food one is exercise three three three fifty six.
And now let's see I have thirty five percent right.
Here it is.
It's coming from this percentage here.
If I didn't put inside its new zero it's now here because maybe I didn't add it as an exercise.
If I click exercise.
Yeah.
I don't have anything in exercise.
Right.
So we have achieved to get the results in.
Put it here.
OK, we still have a lot of things to do.
Now if you notice, we haven't done this, we haven't changed this here.
Right.
But we will do that in in just a second.
So what is my logic?
If the remaining so I'm going to use this remaining if this remaining here that what we are going to
get, it's more than like 1300 calories.
I just want to have a different color for the remaining text here.
Right.
And you will see how we can do this.
OK, I know it's a little bit boring, but stay with me.
If remaining is greater than 300 now, what we can do here?
Document Doc Querrey Selecter and we can select HTML class names that front AB result, meaning calories.
Right.
And I'm going to set the inner HDMI out and I'm going to set spane.
Let's put it like this spane in style.
So what I'm going to do here, I'm just going to create a color bar GBA so we can set any color that
you want in.
This is color green I hope 64 not one glos this one here.
Semicolon who this close the quotes and yeah that's pretty much it.
What we have to do, we need to close the span so make sure you do this and inside I'm going to concatenate
all the remaining and after that we can copy all this.
Right.
So that is pretty much it.
Now we will replace the percentage.
So any that percentage path will be equal to the percentage bad that is already been set here.
Right.
And I'm going to say that replace.
So the first is what we are looking for.
We are looking for this percentage here.
OK, I can't show it to you right now.
So we are looking for this percentage here and we want to replace we want to replace we would with just
percentage that we have.
This percentage, OK?
No, we don't.
OK, now I need to say document the query selector.
So we need to add HTML class names up front, up date percent in her e-mail.
And we are going to do sorry, not this one.
It should be front
chart, not that so enriched html and that we will set this any that percentage path in place.
Joe, we are done with this so let's see what's happening.
I'm just going to go here.
I'm going to add food one six hundred and fifty.
Bam, let's burn something.
Exercise to 50.
That's it.
Let's go back here now.
How cool is this.
I have 17 percent that burn 650 of atit of burnt minus 250.
And this is coming from what we have put here.
Here is our zero two hundred and thirty sixty four point one right now.
You can create any color you want.
You can play with us.
Just going to copy this guy here.
And I'm going to say else, L.C remaining is less than 300.
So we need to make a couple of conditions here in order to catch them.
All right.
In remaining.
It's greater than 500 now.
Just going to change the color, just going to change the Babbo here and I'm going to change it to one
ninety one, then eighty five, two hundred thirty six in one year.
And that's pretty much it.
Not not two one.
So, yep, our next condition will be when we are less than 500.
And I'm just going to copy this here, I'm going to put it and we will say women need to be less than
500.
Cool.
Now I just a different color.
This was like a purple or orange.
Now it was like a purple here.
We're going to change this one.
It will be two to six one 06 six.
So I know these colors because I've done it so 106 again and one in here, we can add more things.
So we are going to do we can add and we will see over the limit, but we're not going to do it at the
moment.
Right.
So that's pretty much hit.
And yeah, so let's see if we add food one one thousand four hundred calories, I should be able to
see a different texture here.
It is that violent or color.
Now, this one, we need to work a little bit more on this one.
Right.
And I'm going to tell you, because I want to implement a class here that will be exclamation circle
and it will spin a little bit, right?
It will be another one.
And that's pretty much it.
So thank you for watching.
I know that it's been long, but I just want you to show you in these here took me like five minutes
to put it there.
Yeah.
Everything else actually here.
Everything else in this part here.
Otherwise you would not understand how I get this now.
You know that in the percentage point we we put the percentage, we replace it.
That's the main point in the classes that we got.
We just we selectors select them and put those values that we have from this object.
And where we call this object, we call it from APU I controller display display from calories.
It put this calories from here.
See, it's going cascading like a waterfall.
So thank you very much.
And I will see you in the next one.