Welcome back, ladies and gentlemen, this lecture, we are going to finally learn how to display the
data that we have inserted into the storage and put it back to the UI right in.
Where do you think we should create a function for this?
So when I click food, I should see that what we have added here, if I choose food, right, if I choose
exercise, it should be the exercise panel.
So where do you think that I should put that function?
Right.
So that function should go to into app UI controller in that function should go here.
And the name of the function we're going to do it is going to see an item.
Right.
Is going to be a function and going to take some parameters.
But don't worry about those parameters at this stage.
So yeah, we need to get that function going.
Should hear this function will be for the display to display what.
To display the item to the UI.
But how are we going to grab these items?
Where where are we going to grab it.
And we created this here.
Right.
But we need to find a way how to return.
The entire object that we just created in that is this new Kalari here.
So we're going to just return.
Return what new gallery?
So basically, we are returning what we have stored.
So we can't make a comment here and saying return what a return added gallery object and we're going
to use this for UI manipulation.
How cool is this?
So we're going to return it.
But here where we are calling the function in add calories.
So this is our main controller function, right?
We control everything here, but here, let's say at the gallery and new gallery.
OK, so now here we need to store it somewhere and I'm going to store it here in a variable.
How are we going to call this variable?
Let's call this very new.
New ad gallery, so this new ad, Kalari, we're going to store it here in that variable.
So because we return at something, right?
We return it that new Kaleri and we store it here, you know, I do have that object.
So how cool is this?
OK, so what we are going to do so here I'm going to need to say, OK, and the inserted.
They inserted Kalari from above to you, I write to the UI, the user interface, and remember, we
did create this add item, so I'm just going to call that an item.
So I'm going to call it.
So what we used.
So I'm just going to page this here.
Don't worry about it.
So we're going to use this app UI controller, dot an item in here.
We're going to pass this new.
So way I'm doing this this new Kalari is actually going to hold the gallery, the description, the
and and I'm not sure if it's going to hold what it was holding.
Check it out.
Yeah, it's going to hold these four things, but it's not going to hold the type.
So I'm not going to manually put the top there.
Right.
Because I'm going to use the time.
So I'm going to see and we're we're going to get the tag from here.
Gets from input actually from this here.
Right.
So I'm going to put it here, dot type.
Now we're going to test this one insurer in in a minute.
So if your controller will call it an item because it's public function from the app UI controller and
we're going to pass in two here parameters, this is what we have done to look at is how it's scaling
this form.
Input goes into Hewat Gallery and this goes to the next one.
So we are scaling it.
We just go like it's like steps from one step to another.
Yeah.
So there was a method here in a software development, if you want, you can check it out and.
Yeah, so it's a waterfall method and yeah.
You can check that one.
So what we're going to do so here actually our function is empty and we need to grab the object.
So I'm going to say I object just like that and I'm going to sit tight now.
Not like that but come on.
So what I'm going to do is I'm going to say comes along.
I'm going to say.
Type in, plus, I'm going to get the type and let's also check if the object has a description, if
this object contains that one, if that is OK, that means we are golden.
We get to go and we can use that information here and we can display it to the item.
So I'm just going to refresh and close most of the things here and I'm going to say food.
One hundred and fifty.
Yeah.
Or something like that.
And I'm going to hit here.
So the tide is going to be and we didn't space it.
That's why in the description is full, this description.
So this is, ladies and gentlemen, working.
So what we going to do.
It sounds like my father.
This is working.
So what are we going to do here?
We need to find a way how we can manipulate this.
So we're going to do a couple of things here.
I'm going to create a variable here, Mark-Up.
And why need this variable, it's going to be empty here, so this variable will actually contain the
markup for these two containers exercise, whereas the other one in a food slider.
Right.
So actually here, I'm going to copy this food, just going to copy it.
And I'm going to comment this one because we don't need it.
Now, if I go back here, I don't have it.
And I do have some unexpected token probably here.
Yeah, I'm just going to delete that one and now I'm going to put it here.
So what I why I need this.
So it's very simple.
We're going to use this one, but we're going to just replace this calorie, this text with our own
text that is coming from the object.
And yeah, you're going to see it.
Why?
And I'm going to store this markup inside this here.
So how can I do just I'm just going to come in for one second.
Maybe I should create that giffels condition.
So if Taieb is equal to that, then I'm going to say markup will be equal to.
So I'm going to uncommented this one.
I'm going to cut it and I'm going to put a single quotes.
So why are the single post will work.
So in my in my HTML, I do have double quotes and it's working full here because we need to put it in
one line.
We don't there is a spacing too much and this is not working.
So this is going to be a little bit boring.
But I'm just trying to say that this is working because if it was double quotes, it will be interpreted
as a string and here then it will be skipped.
So you can use single quotes in Inside the death and inside this here you can have double quotes.
You can't have single quotes as well.
Right.
If everything here was a single quote outside, you use double quotes.
I hope I'm clear now we need to get rid of that white space and we need to just just just put it in
one line that will be a little bit boring for you guys, but it is what it is.
So we're going to put this entire chunk of HTML here.
I'm going to leave that calorie balance for now.
Yeah, this should go as well, and we don't have too much, but that's pretty much it now, our markup
is pretty much done.
See how long it is.
OK, you don't need to worry about that one.
So the other one is ls if Taib is equal to burn.
Right.
And then I am going to use the same markup but for the exercise.
So this is the container, the slider.
So everything that inside I'm just going to comment and Seimas here inside the slider.
What I have I'm just going to copy control see and I'm going to commentate.
Right.
And I'm just gonna put it here now.
The same story goes here.
I need to I need to make it a little bit faster like that.
Oops.
Make sure you don't delete something by mistake, otherwise, the e-mail, when we finally have the
final I mean, when we have the final
display, when we display that one, finally, it will not look good.
Right?
Because if you delete one tag, it will.
Yeah, it will mess up the entire thing.
No.
OK, we're getting there.
We're getting there.
OK, I need to get rid of this.
What happened?
I hate what I'm doing with this big girl.
OK, now we have done the hardest part.
Is that done?
So we do have in this market variable.
We do have to hold this entire container.
If I save it, if I go now to exercise, it will be empty.
So basically we are going to do is we going to replace this tax here?
We're going to replace it with some from that is coming from our object right now.
It's very easy.
So the next step that we are going to do is probably we need to this lecture is going to be a little
bit longer than the other ones.
But we need to do it like this other way, otherwise it will not work.
OK, no.
So we are done with this and we're going to say here, Dom manipulation.
Now, manipulation and that we should we say we are going to try to place the formal markup back to
the dorm using the replace stream method.
So now I do have one interesting method and I'm here are going to create another variable called additive.
Come on, I'm going to say edit it without caps.
Lock added that.
So I'm going to see.
That market that will be changed, Mark-Up, and you will see why I'm using this so this change market,
what I'm going to do is I'm going to say, OK, I'm going to use that markup that I have on top that
replace.
So the strings have replaced have its own string method that we can use.
So what I can do is actually I can search whatever I like from here, from this markup or from this,
and I can change it.
Right.
Because this markup, when it's for ADD is going to go here and it's going to set this variable to this
container and this to this HTML code.
All right.
So based on our based on our adding, based on the type, we're going to have different markup.
So it's not going to set both markups in one place.
So here what I'm going to say, I want to replace the idea with item object idea.
OK, so now how are we going to do this?
I do have the idea here, but this is not ideal.
So what I want is actually to replace these ideas, these zero here, because the idea is the idea from
our new Kalari that we are returning so it can be zero one two.
Right.
So what we can do here is I'm going to say, OK, I'm going to use percentage and I'm going to say it
here.
And now I can target those percentages.
I can replace it just like that.
So it will look through my code and I need to do use it for the same for the burning.
Right.
It will look through my markup code.
It is for the burn and it will replace that one.
Now, I'm going to copy this entire line and I'm going to say anything markup, but I'm not going to
use this markup because I already replaced the idea.
I just want to continue now to replace what?
The description.
So I'm just going to replace this description and I'm going to use it here, these percentage sign.
And I'm going to say description.
And I'm going to copy the entire thing and also we need to change the description for this here for
the running right in now.
I'm going to say Ed Mark-Up and I'm going to replace the description with item description.
So let's do this.
Let's save this one and see what's happening before doing anything else.
Now, there is a one interesting method that we're going to use.
It's called So I don't string representing the position relative to the element, and that is called
insert a Jast adjacent HMO.
So we have before begin after Biggin, before and after N, but we are going to use.
So if you look up in Internet, I'm just going to show you who it is.
If you go to this, if you just type insert adjacent e-mail and it will give you the developer Mozilla.
And now here we can use this element to insert adjacent in the position and the text.
We have three or four different positions here in what text we want to be there right in actually our
taxes edited markup.
So we're going to use before end because I just want to put it inside where we're just going to show
you.
I just want this new edited markup to be inside this slider here.
So I'm just going to copy it.
Right.
And we do have exercise slider.
And I'm going to go there and I'm going to put it in here for now.
This is a class name and I do have this full slide it right.
And I'm going to put it here now, what I what I'm going to do is also we need to create I'm sorry,
we need here to see Slider.
We need to create another variable slider container.
And that slider container will actually be here and that will be equal to HTML.
You will see what I'm trying to do now.
Let's get rid of that.
Now, this food slider we need to insert in our HTML class names.
Right.
And we can call it food slider class.
Right.
Or just food slider.
Don't worry about in class and put it here then.
We do have exercise slider and we're going to use these exercise slider.
You know, I can use this HTML class names object here and replace it.
Right, because I do have access to that one.
So slider container will be html class names, dot food slider.
Very good in this guy here will be class names, exercise slider.
So that is why I need this to put it here and eliminate the syntax is like this.
OK, now I need here to say document, I need to target that one document query selector and the query
selector will be the slider container if it's four and it will be this slider container.
If it's for burn it will be displayed a container and I'm going to insert these adjacent HTML and the
position will be, as I told you before, and and this will be the edited markup.
So I hope that is going to be the one the result.
So let's see.
Don't worry.
If you don't understand right now, you're going to do understand in a second.
So I'm going to say food.
One hundred and fifty calories and something happened here.
Right.
So if I go back to food, here it is.
I do have the food from this markup.
We target this idea and we put it we target a description which is here.
We replaced it with the op item, object description.
But let's see if we do have the right idea, because this here, this idea of zero.
Now, what will happen if I add another class?
So it will be ice cream, two to twenty two.
So if it if I go back here I will have the ice cream.
Right.
And if I inspect it I should have idea of one y because we do have the array of at which you show you
we do have the zero ninety one.
Right.
We're going to need these ID after that we're going to delete this, this, this div here.
So that is pretty much it.
So what we have done is actually based on the type we create the container, the container which we,
where we are going to at the this markup and in the markup we add this percentage this side, because
after that it will be easily to replace.
If I just leave I d like it is it will replace this one idea.
It will be zero equal at zero and that is not what I want.
It will replace something that I don't want.
And same goes for the description.
Now let's change something else.
I do have one for the calories, right.
Actually you don't see it, but here should be calories in here should be calories as well.
OK, but we need to find the calories, where are the calories we need to find it here, right.
So calorie burn, I do have this here, which is going to put it like this without the clothes.
Right.
And the same goes for the word.
For the running.
OK, now let's see, just going to add one food, one one enter.
Go back here.
Is there one calorie?
OK, let's add exercise running a hundred and 1500 at it.
Go back there.
Here is calorie burn running.
How cool is that?
So if you are happy with this, I'm so happy that we have managed to create an application that is working
for us.
This application is actually changing some things.
So we get the object.
We get the idea.
We get the description, we get the calories.
We inserted back the markup that we just grab it.
I, I do this here.
I leave it intentionally in order to see.
And now I comment because we are not going to need it anymore.
But these are mad.
Dash zero or burn that zero will help us because that will be our ID, that when we are deleting things
we are going to we're going to find them.
Right.
So now if I go here and inspect because this is the first element it will have, OK, that's food I
was thinking about running.
Yeah, it will have a burn of zero.
So if we add it will have another one.
So thank you very much.
I hope you enjoy this one and yet go back through the lecture.
If you didn't understand some words, but is actually pretty much simple.
We, we didn't return anything here.
We returned the edit calorie.
No, we call the function an item from our add calories, main control or function.
And we just passed in this object here in the time.
And based on the type here we choose which HTML markup to change in.
Now, the key key point is that we use to replace this string method replace to replace something from
the markup with our with our values.
Right.
These are the values that we just entered before.
And how cool is that?
It's not finished.
We need to do here.
I need to I need to show the notification and we will do that next time.
So thank you very much.
I will see you in the next one.