Focusing on what we'll do is we'll create our guard container company or for that we need to create
a file name inside the source where the two will name it as.
Can't contain it.
That will be.
Can they not sort this file?
We'll use our separate search, and that will be on ABC's The.
And that will give us.
Function.
And here, first of all, the new to are.
Global context or really important global context to.
It was.
Global context from contextual search it important for us and.
Next, we want to.
We're inside this function.
And we want to create a constant that is.
Not in the capital letters, of course.
And we eat a.
And that couldn't be U.S.
Global context.
Now, first of all, we need to check if.
Inside the container, if I like the count of the product is zero, then we need to display that, uh,
your card is empty or any message related to that.
Like something like that?
So here will write if.
Guide dog.
Lent.
It equal to zero.
So that means we will done what?
We'll return this.
And inside her of We'll Just Return, and it's to and we'll invite your.
Wish list.
And after that.
Lean in is fatigue with a class name of empty, clogged, empty.
Bill Wright is currently Dean.
All right.
This will wrap this all in a section, so.
Factions, Daugaard, that means a section with the class name of God.
And this section would contain all of these things.
The next inside that are done, if we go, so here will be the main main body.
And here is that we will write the GSX.
Inside the written statement.
Inside this return will create a section will not create or do, and that is the reason we want to create
a section with the class name of GA.
Aunt Bev, why I made this mistake.
S..
Yeah.
S. Dot.
God.
So inside the section.
Oh, I'm getting this.
Inside the section, what we'll do is, first of all, we'll create a header and the panel will see
your wish list.
Harder.
And this will have it, too.
And that H2 will say your.
Wish list.
And after the harder.
We'll have our live, which will map all of the data from the database or from the API or whatever.
We will be using.
OK, so.
You're after your wish list and after this will continue in this section itself.
So after the handover, we'll have all of it, so we'll write our David.
The insiders will write it down, so that's why I'm providing this column with us, so we'll map.
But.
We need to create another component before moving to this, because we want a component that will contain
the item and that will that will be like holding the values for each different item.
For that, we need to create another component and we'll call it card item.
OK, so we can do that.
But as we are on the same file so we can create a $4 billion.
And.
So that footer will be after this.
This day we are leaving as of now, but we'll come back to it and God.
What does?
We can command this line.
And after this comment, we can write the footnote.
OK.
OK, so food or drug and then a horizontal line that the HRT?
Remember, this is a self-closing tag, just like B R and image tag HRT is also.
Then we'll have a day with.
OK, last name of Card Total.
And inside the card total, we'll have an itch for and that itch for will see total.
Total.
And we'll have a span in here.
Inside the span will have.
Okay, let me grab the rupee symbol.
So where is the rupee symbol headed?
It's OK.
So right now, the total, we are hard coating it, we're not getting it from anywhere, so that will
be zero point zero zero.
OK, and next, we'll have a button, so that will be for clearing.
OK, OK.
OK.
So after this, Dave?
In the folder itself.
Yeah, and the paper itself.
So inside of this will have a button and that button will have a class name and a class name would be.
Name would be button clear, but like meet the End is near between.
And what this will do is will create will right clear guard here and will provide an on click function
to this part and like whenever the user clicks this button, like something should happen, otherwise
that would be useless.
OK.
We will provide an on click to it and.
As of now, we are just providing it in a funk.
We are just passing a function inside this and that function will just console log.
Small thought log.
Clear cut.
Like, definitely, we are going to add functionality to this button of clearing out a card, but as
of now, we are just going to check if it's working or not.
And the best way to check or test anything in JavaScript or debug is the console.
So control the clock.
OK, so ahead this deal, this is for the cards.
Let me just read a comment for so it will be easier for us to understand like.
Which is the cart and which is the like, whatever.
This devrait that will be fought on court and inside this will pass our car component.
But for that, we need to, first of all, create a card card card component and use the card item component
that will be responsible for holding like each card, each item's friendly.
Separately, we have to learn differently separately.
So that will component that will create in a while.
So let me just see if everything is done here.
Yeah.
So next, we'll create the cart item component.