Let's start with the title, so I'm going to hit inspect and I'm going to grab the styles from here and I'll have you copy them in as well. Okay, so it's going to have this font-family of Encode sans condensed, font-size of 18 pixels, and then a E6E6E6. So let's manually type those in, I'm going to go to cart-product.scss, &__title, font-size is 18 pixels, font-family is in encode sans condensed, and the color was E6E6E6, okay those three styles throw those in the title.

cart-product.scss

&__title {
    grid-row: s/m;
    grid-column: title-s/title-e;
    align-self: start;

    font-size: 18px;
    font-family: 'Encode Sans Condensed';
    color: #e6e6e6;
}

let's go see what those look like, it was good to me.

Now, the next thing we need to do is get the remove button and then really we're done. I don't know why we didn't just do this in the last video. So we need the remove button which is really straight forward, it's literally just the font-size of 14 pixels because we have everything else and then an underline okay.

So let's go into our code and lets say on remove we have a font-size of 14 pixels and we have a text decoration line of underlined and what we'll have to do is change this to an a tag because I think it's a div.

cart-product.scss

&__remove {
    grid-row: m/e;
    grid-column: remove-s/remove-e;
    justify-self: start;

    font-size: 14px;
    text-decoration-line: underline;
}

So let's go into cartProduct.js and let's change this to an a tag, and it currently is an a tag so we're good. So let's go ahead and go to Chrome and let's go to those localhost:3000/shop and you'll see that everything looks good.

So now what we need to do is add in a couple more products so we can see it scroll, and then we need to learn how to increment. Okay, so there's really a couple more things we need to do here, we need to learn how to incremented and we need to learn how to add new ones. Let's take care of adding new ones in this video.

All right, so the idea is we click add to cart on the product and then it adds it to our cart. So we need to go back to our shop.js and we need to get rid of this return here because right now it's only returning the shop cart. Okay, so let's just comment it out and by default it's going to show this actually, it will show it because we set it to true.

If you remember up here we have a constructor with showCart set to true and then we're saying, okay if this is true show the cart. Okay, let's go to Chrome and it's right there.

Okay so that looks good, let's hit all. You see we have our products and everything looks good except for the fact that our cart is behind the products, it needs to be off the screen. So before we handle any of this what we really should do is learn how to put it off the screen and make it come in when we hit add to cart. So let's go ahead and commit our code and then in the next video we will do that.

Terminal

git status
git add .
git commit -m "finished styling cart"

Resources

Source code