So what we want to do is we want to develop the footer and then the products. But real quick let's just have it render like a component in here based on our data. Let me show you what I mean shopCart.js we're taking in this data, this array of products with just random numbers in it and we're getting the length from that, now what we want to do is get some JSX and throw it into here okay.

So normally we would do something like put brace's in here and say products.map right which is not a bad way to do it, it's actually my preferred way of doing it. But I want to show you that you don't have to do that, you can do it like this too. You can say let productsJSX right, name it whatever you want other than products obviously and just say products.map and then in here we can say product and then put an arrow right, and then just return like an H1 or you don't even have to put the return you can just say like H1 and then just put in braces in here and say product.

Obviously right now it's just a number and we're just going to put that number in there and that builds us an array of JSX items so it's as if this existed in array okay. So really all this thing is doing, all this statement here is doing is saying products JSX is equal to and then putting in H1 with our items in here so like 243, H1 whatever the next number was, it's doing that okay. And then we can just throw it in here with braces and say products JSX. That way we don't have to put the map statement in here if it's really small.

And in our case what we're going to do is we're actually going to develop a whole other component so that this is all we have to do, all we have to do is throw the product in and like a key, which we should do right now, we should say key is equal to product just because we know it's just a number and then the idea is it will do it all on its own component and then we can just throw it in like that.

Okay so let's go see what this does, let's go into our application and you'll see it says our numbers, it says as 243, 3434, and 4554 which are random numbers, they don't mean anything I just threw them in. Okay so let's go ahead and develop the footer and it's going to appear right below these numbers initially but we'll build a grid for it if we didn't already, no we didn't.

So what we're going to want to do is go into shopCart.js and in footer what we want to do is I want to make this other component. So let's go below cart-content and let's say function cart footer and we'll say in this component we're going to take in a className and we're going to take in a price or the products, let's just pass the products through and we'll calculate the price in there okay, then we'll return it and we're just going to put a div in here.

Then in here, we'll say class name is equal to in backticks and brace's we'll say className and then we'll just say cart-footer, that way we can pass in this cart-footer and it can be like our other components. So let's cut this className out, let's cut this div out, and let's say CartFooter. Let's say that className is equal to cart-content__footer. Now, what we need to do is just pass the products in again, so product is equal to products which we're getting from here.

Notice how I don't do JSX I just do products because we're going to go in here and calculate the price once we actually have object in here. So we won't be able to calculate the price immediately but we'll have a good start. So again just a lot of inception going on in here, we've got another set of div's we need to put in this footer okay. We have the checkout, subtotal, and the price okay. So pretty simple stuff, all we need to do is we need to go into our code and we need to say div className is equal to cart-footer_checkout, then we have className of card-footersubtotal label right, then we have a div with a className of cart-footer_price.

Okay, so we have these three attributes, now what I'm going to put for the price is going to be hardcoded in. I'm going to say dollar sign and I'm going to put in a variable right, I'm going to put in a price and then I'm going to go up here and I'm just going to say constant price is equal to 7.96 that we can eventually get the price and put it into this variable and then display it down here.

So I'm trying to give us all of it as much as we can do before we put in the other stuff right because we can't get the actual price yet because we don't have the actual model. All right, so for the subtotal it's obviously just subtotal and checkout is going to say checkout, all right, and this is going to be a button. Okay so get this in, this cart footer component, and make sure you're using it up here in our cart content, all right.

So hopefully you had time to put that in, I'm going to go back to the design and basically we want to get these styles into our checkout button right. Let's go see what it looks like first though because we haven't really checked back in the browser much yet. Okay, so we have checkout right it's a nice button and we've got subtotal and we've got the dollar sign.

I don't know why but these buttons whenever they're in the application just plain old buttons are kind of satisfying. Okay, let's go ahead and remember how I told you it would be up here? Just verifying that it is. So what we need to do is style this button and then put these all on a grid and then be done with this video.

Okay, so let's go to vs code and what I want to do is go to shop-cart.scss and let's go down here and let's just say .cart-footer and I pasted these styles in, so real quick I want to be ultra clear here so you're not confused as to where all of this just came from. I copied it from the design, the button style as you'll see it doesn't even look right. But basically I pasted it in here to .cart-footer and that's what's going on here okay, so that's where these four lines came from.

Okay, so what we need to do is we need to command + x that and I need to say &__checkout okay, and then in checkout we need to put a height of 38 pixels, a width of 183 pixels, a border-radius of 20 pixels, and a background color 00CB79.

shop-cart.scss

.cart-footer {

    &__checkout {    
        height: 38px;
        width: 183px;
        border-radius: 20px;
        background-color: #00CB79;
    }
}

If you want to use the button component, form field component that we built, feel free to but I'm just going to do it this way because it's faster and more understandable straight off the bat. Also if you want and I suggest that you do this, outside of if you're in the class right now, I suggest you do this in your own time. Just put everything in variables just to get used to how variables work and put them all in one file along with fonts and stuff like that. You don't have to but if you want to get better it might be a good exercise to do.

So what we want to do is check our application now and you'll see that we have this check out button but we don't really have the styles in there.

Now, just so you know that I actually know CSS and that I'm not just copying everything. Let me show you how to approach this without looking at the design right. If I just look at the design and say hey I want this to be white and a little bit bigger right. I'm not just going to copy, I'll show you what I would do to get there and then we'll verify that the styles are as close as possible to that okay.

So let's go into our application and first thing I think of is the font family, okay, so let's go in here and it's probably open sans to be honest, let's look back in there but not look at it, that's probably open sans so I'm not going to touch it yet. It looks like it has a normal font-weight and it looks like it's white and a bit bigger.

So what we need to do is just say that the font-weight is normal which we don't need to specify, and we'll say that the color is white and if you're not sure, if you haven't been messing around with fonts and you're like "okay well I want it to be a bit bigger", you can say something like font size. We know right now that it's just like 1rem so we can say like 2rem and that would increase it like 50 percent or 100 percent gain. Now look at our application in the browser and let's go to the browser and you'll see it looks like our design.

Now let's go ahead and actually see what it is in the design to see how close we got okay. Obviously the pixels are going to be different, it looks like it's a little smaller though. Okay so open sans was correct, color white is correct, #FFFFFF right, that's white. And it looks like it has a font-weight of 600, and the font size is slightly smaller, it's four pixel smaller than what we did.

So really all we missed was the font size and font weight, which is basically all of it but anyway it's not that much right. 1.6rem is going to be what we want, and you'll never just guess the font size correctly, like it would have been optimal to change it to 2rem right and then say "oh it's a little bit bigger, then scale it down a bit and then it's like oh it's too small put it up to like 1.6, maybe that's it right." Eventually, you're going to get something accurate. Okay, and then let's say font-weight is 600, maybe by default it's 600 on here, we said it in our body, I don't know, let's try it.

Let's go into our application and it looks a little bolder okay, it definitely looks bolder but in the design it doesn't really look bolder. All right, so you see how there's like these weird default styles on the button? That's because we're actually using a button and we're not using a div. So what I want to do is I want to reference our shop-product.scss and do the buttons that way, if you remember they were a little bit different.

So let's go over to shop-product.scss and let's go get, these scales, this is what we want to do. Let's copy this okay in shop-product.scss around line 124 to 132, it's probably going to be a bit different than yours right, it might be like four lines down or up or something, just get these styles and let's go into our application checkout and let's paste it in here, that way we can transition it have the hover effect and any active effect.

shop-cart.scss

&:hover {
    transform: scale(0.97);
}

&:active {
    transform: scale(0.95);
}

Now if we just save this and look at it, it's going to look a bit different then our add to cart button and a bit different than what we just had because it's going to combine the button styles with our div styles that we made.

Okay, see how it's still a button but then it also has that effect that our add to cart buttons had. So what I want to do is we can either do this and leave it like that or we can get rid of the button styles and we can just have it be a div that has our animations on it. And then one thing I know for sure is that we want to get rid of this outline so let's do that all on the same second here.

So let's say and focus, and let's say outline is none. Now that way when we go into our application it doesn't do that, now you can see a little bit better about what I was talking about. Okay, let's go change it from a button to a div okay, so I want to go into visual studio code and let's go into shopCart.js and instead of a div and a button let's do an a tag because we still need that onClick to actually navigate us elsewhere right.

So let's just use the a tag then let's go back into Chrome and let's click it and you'll see it looks better now, except for checkout is all over the place.

So what we need to do is apply some grids styles to the button as well. So let's go back into visual studio code and let's go into shop-cart.scss and in here at the top let's just say display is grid and then let's just say justify items is center and align-items is center, so really basic stuff and it will center the content in there, so now let's look at it.

All right it looks good, it has that button effect that our add to cards have on our shop products, and it doesn't look like that nasty HTML button with the board right. Okay, so that's how you do that.

Now, this video is kind of going on long, so what I want to do is commit it and then we'll just say that we built out this button and a couple of the other pieces of JSX and then we'll move on okay. So let's hit command + j, and let's commit our code.

Terminal

git status
git add .
git commit -m "built shop-cart-content-footer component and styled the checkout button"

Okay, I'll see you in the next video.

Resources

Source code