Original subtitles

So, let's work on the Cart and therefore,

of course, we can go to the Cart folder

and add a Cart.js file for the Cart component.

Now the Cart components should render all the Cart items

and, of course, display the total amount.

And then, also, give us buttons

for leaving the Cart and for ordering,

though for this application, as shown in the preview,

ordering won't really be a thing.

Therefore, here we can add our Cart component function,

expect props and export it, like this.

And attached, you find a Cart.module.css file

with some styling for this Cart.

Hence, we can already import

classes from './Cart.module.css';

and then return the mark-up for the Cart.

Now, here, as I said, in this application

I wanna render this Cart in a modal.

Now, we're going to build this modal in a second though.

You can also try this on your own

also by using React Portals

which is a feature we learned about,

but before we are going to do it together

I wanna finish the general Cart mark-up.

So have a div here, which will later be the modal component,

and inside of that div, or inside of that modal then,

I wanna render my cartitems, here,

and then below that a div with the total amount,

and below that a div with the actions for the Cart,

so the Close and the Order button.

Now, for the cartitems I, again,

will add a little helper constant, here,

cartItems, where I wanna map all cartItems

to cartItem JSX elements.

Now at the moment, we, of course, have no cartItems here.

So, we'll start with a dummy array

which I create inline here,

which will hold a cartItem, let's say with an idea of c1,

with a name of Sushi,

with an amount of two, maybe, and the price of 12.99

and for the moment that's it.

And we then map this array of objects,

which here is just an example.

Later, we will get a real object

managed through React context.

But we will map that item here to a cartItem component

which we also don't have yet.

So, for the moment I'll just output a list item

where I output item.name

and then it's these cartItems which are rendered, here,

cartItems, like this.

And actually, I wanna wrap this in an unordered list

so I will, overall,

set cartItems = to an unordered list

then a opening curly brace

around this JavaScript expression, closing curly brace

and then closing unordered list item.

And I can also already add a class name

on that unordered list and set this to

{classes['cart-Items']}>{[

written like this because of the dash.

And that's the cartItems which are being output down there.

Now speaking of down there, in that first div, here then,

I wanna have a span where I say Total Amount

and then below that another span

where the actual amount is being output.

And for the moment, I'll just hard code 35.62, here,

but this is something which will, of course,

be derived dynamically later.

On that div I will add a class name of classes.total.

And then we got that other div with the buttons.

This will receive a className of classes.actions

and then in there I wanna have two buttons.

The first button says Close

and I will add a className, here, of classes

and then it's button--alt and because of the dashes,

again, I'm using this syntax of accessing that property.

And then below that I have another button where I say Order

and this will receive a className of classes.button.

Now later, we will only render the Order button

when we have items in the Cart

but since we're working with dummy data, only at the moment,

we don't need to worry about this right now.

Okay, so that's the Cart.

Now, as I said, the Cart should not be inside

of that div though, but inside of a modal.

So, therefore, let's add such a modal wrapper

which renders this Cart as an overlay.

Next, of course, try it on your own first if you want to

and thereafter we're going to do that together.