So let's go ahead and let's build it by going into our application, so let's go in here and let's go into reviewForm.js and at the bottom here what we'll do is say div and we'll give it a className of review-form__details.

In here what we want to do is we want to put in these items, so let's say div className is review form the review from details className is equal to and we'll put it here review-details and then we can say review-details__ and then we can put in all the items okay. So the first one is subtotal then we got tax and shipping our subtotal tax and shipping cool details.

reviewForm.js

<div className='review-form__details review-details'>
  <div className='review-details__subtotal'>$7.96</div>
  <div className='review-details__tax'>$0.16</div>
  <div className='review-details__shipping'>$0.00</div>
</div>

So let's go into our reviewForm.scss, let's go to the bottom and let's say .review-details and we'll say &shipping, &tax, &total. Now in here at the bottom we'll say &details, there we go so we're all set up. Now we need to just put in some styles, so details we want to align it at the end of the grid. Okay so let's say the grid row is 1 to -1, grid column is 1 to -1, and then we'll just say justify self is end and align-self is end.

reviewForm.scss

  &__details {
    grid-row: 1/-1;
    grid-column: 1/-1;
    justify-self: end;
    align-self: end;
  }
}

.review-details {
  &__shipping {

  }
  &__tax {

  }
  &__total {

  }
}

Now let's see where this puts us okay, let's go to our application, let's go to Crome right and all I've added in here in this video is this highlighted code right here minus this line 40 of course. Alright so it should be a little bit over to the right to far, see that.

Alright so let's go ahead and add in the rest of the details and then the styles. So let's go into reviewForm.js we forgot to add in the titles. So let's cut that and put this here, and we'll say div className is, and then here's the deal we're going to make these all the same.

So in each of these let's say detail or let's review-detail okay, and then we'll say that this is review-detail title and then we'll paste that in and then we'll copy this, I will change this from detail title to detail price, so this is subtotal 7.96.

reviewForm.js

<div className='review-details__subtotal review-detail'>
  <div className='review-detail__title'>Subtotal</div>
  <div className='review-detail__price'>$7.96</div>
</div>

Alright, so we've got to do that for each of these. So what I'm going to do is copy this and retype them. Follow along closely this needs to be 16 cents and it needs to be called tax. This needs to be called shipping and this needs to be zero dollars. Okay we're set, let's get rid of these two, now you have this.

reviewForm.js

<div className='review-form__details review-details'>
  <div className='review-details__subtotal review-detail'>
    <div className='review-detail__title'>Subtotal</div>
    <div className='review-detail__price'>$7.96</div>
  </div>
  <div className='review-details__subtotal review-detail'>
    <div className='review-detail__title'>Tax</div>
    <div className='review-detail__price'>$0.16</div>
  </div>
  <div className='review-details__subtotal review-detail'>
    <div className='review-detail__title'>Shipping</div>
    <div className='review-detail__price'>$0.00</div>
  </div>
</div>

Okay, let's go back and then style this, so we've got title and price on this so let's go to reviewForm.scss and at the bottom here let's say .review-detail and we'll say &title &price, okay. Then what we'll do, we now have our are items here and that's been aligned. So let's say that this is a display of grid because we want them display left to right for the displays grid and then it's just going to be a good template.

Row column is 1fr 1fr, and grid template row's is 1fr, and then for the title we'll say grid column is 1/2, grid row is 1/-1. And then for price we'll do the same thing except we'll say the column is 2/3. So get the review detail in there.

reviewForm.scss

.review-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  &__title {
    grid-column: 1/2;
    grid-row: 1/-1;
  }
  &__price {
    grid-column: 2/3;
    grid-row: 1/-1;
  }
}

And then the text align needs to be a bit different but we'll do that in a second. Okay let's go ahead and see what it looks like, Alright looks pretty good so far we just need to bump it over 40 pixels.

So let's start by going to &__details and let's just say transform translate x minus 40 pixels because it's part of the positioning, so I want to group these by positioning and styles.

&__details {
  grid-row: 1/-1;
  grid-column: 1/-1;
  justify-self: end;
  align-self: end;
  transform: translateX(-40px);
}

See it's over there now, that looks pretty good.

Now we need to just put in some styles and then we'll be done. Okay, so first things first these all have a text align right. So let's go do that, let's say that the titles all have text align of right, okay that looks good. And then we need that space, so let's see how big that space is, so that space is 65 pixels.

So what we need to do is just say... we need to label these, or just put in 65 pixels on the title the same margin right, then you'll see now that it looks a little bit better except for it kind of messes things up a bit.

.review-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  &__title {
    grid-column: 1/2;
    grid-row: 1/-1;
    text-align: right;
    margin-right: 65px
  }

So what I want to do is get rid of the margin right, let's go to our columns and let's say title start to title end then we'll say 65 pixels. And that's why it's really nice to use title things from the get go price start to price end and then we'll do that here, okay so title start to title end, price start to price end, and we're good.

.review-detail {
  display: grid;
  grid-template-columns: [titlel-s] 1fr [title-e] 65px [price-s] 1fr [price-e];
  grid-template-rows: 1fr;
  &__title {
    grid-column: title-s/title-e;
    grid-row: 1/-1;
    text-align: right;
  }
  &__price {
    grid-column: price-s/price-e;
    grid-row: 1/-1;
  }

Alright let's take a look and that looks good.

Now it looks like it's really small because it is small, it looks really big this gap because this is so small. In here it doesn't look as small but that's just because these are huge. So let's get in the styles, so it doesn't really have them individually so we're just going to have to wing it, but it does on the right side.

Alright, so let's say title font size is 14 pixels. Let's say that the price has a font size of 18 pixels and font weight because it's bolder of 600. Alright, so 14 pixels and then we got font size of 18 pixels and a border of 600. Alright it should look something like that, yeah it looks good to me.

Now what we need to do is we need to give it a little margin top, we need to make it start at the buttons or something like that and then we need to put it in the last one which is the total. So let's go ahead and do that now, let's go into our code and it looks like it's slightly above this button, you see how it's slightly above it except for in ours it's a bit too far above it.

So what we'll do is we'll put it slightly above it, the way we'll do it is by saying this, we'll go up here and you see how we're translating X we want to say translate y and then here's the thing we're going to push it up, we're going to say like 10 pixels.

&__details {
  grid-row: 1/-1;
  justify-self: end;
  align-self: end;
  transform: translateX(-40px) translateY(10px);
}

You might be wondering what the heck, we're actually gonna minus 10 pixels okay, and put that in and you'll see it pulls it up a little bit. But the reason we're doing that is because we're going to put it on this grid. Let me go back we're going to be putting it on this is great here at the top, so we'll pull it up 10 pixels from there.

So we're going to do is we're going to say grid row is going to go from button start to negative one. Now let's try it, it should push it down a bit, it didn't do it. So why is that? I think it's because of the height of the content.

So either you say... let's do this let's say 1 to -1 and then let's move down 40 pixels to see what that looks like. So I'm doing 1/-1 and translate y 40 pixels. Okay that looks good, let's pull it up a bit so let's say 30 pixels. Still down a bit, we'll say 20 pixels translateY 20 pixels. Alright that looks good me.

Let's go ahead and put in the total now and then we'll be done. So let's go into our code and let's comment this review details out and then we'll go into our reviewForm.js and what we need to do is copy this detail right here, this subtotal paste it let's call it review details total and then we'll say review detail and then we'll say -green okay.

Now what we'll do is we'll say total let's change this to 0 with two zeros and then we'll just say that the total is $8.12. Okay so we got review detail and we'll say -green here and here. There we go total.

<div className='review-details__total review-detail-green'>
  <div className='review-detail-green__title'>Total</div>
  <div className='review-detail-green__price'>$8.12</div>
</div>

Okay so let's go into our code reviewForm.scss and let's go down here, and let's copy this review detail and paste it. I will say .review-detail-green. And what we're going to do is we're going to actually have it have the same grid. So what we're going to have to do is go back to reviewForm.js and add it on, we'll say review-detail, and then we'll copy this and paste it before it and then we'll get rid of the green, that way we can still have the grid styles, there we go.

reviewForm.js

<div className='review-details__total review-detail review-detail-green'>
  <div className='review-detail__title review-detail-green__title'>Total</div>
  <div className='review-detail__price review-detail-green__price'>$8.12</div>
</div>

So do that and we should be good. Let's go to reviewForm.scss, and what we're going to do in review detail green is obviously get rid of all the good stuff but then we're just going to override the styles a bit to look like what we see in here, so it's just going to be green.

Now I'm not sure the intention of having the total out of line here, but I would think it would look better lined up, so I'm going to do that. Okay so all we're going to do is we're just going to say color 0oCB79. Then we're going to apply this on both so take the price and put it right here and put a comma.

.review-detail-green {
  &__price,
  &__title {
    color: #00CB79
  }
}

So we're good there, let's go ahead and see what this looks like and it looks good.

Now one more thing I want to do is I want to align all these items, do you see how the total is slightly too high. And in the design I guess it matches up yet looks like it matches up. It also looks like the total has a little bit of a different font weight, so what we'll do is apply font weight to that too, and then that gap right here of 18 pixels.

So will say margin top is 18 pixels and then we'll say that the font weight is 600 here. And then what we'll do is we will say on the grid align items center and we're set. Let's go see what this looks like.

Okay it looks pretty good except for now it's all the way up there for some odd reason, and that's because we're justifying them all centered right, so what we want to do is we want to push it down more. So let's go ahead and let's translate it down like 100 pixels, and see what that does. So in details around line 39 translate y 100 pixels on reviewForm.scss, okay it looks good.

We want to pull it up a bit so let's just say 60 pixels, that's good it looks like our design.

So that's how you put in the details, let's head back and add something to the cart, let's hit check out our details here. So one thing we need to do before we end it is we need to actually calculate it. We don't want it to just have this $7.96, so we want to say 3.95 + 1.99 + 1.99 which I think is 7.96, that's a coincidence. We need to calculate the actual value here.

What we're going to do is we're going to go in here I'm going to go to reviewForm.js and basically the only way to get all of these is by including mapStateToProps or by passing it in as a prop from review.js. What we need to do is use mapStateToProps in here.

Since that's a little bit more involved and this video has already been really long let's do that in the next video. So let's say

Terminal

git status
git add .
git commit -m "built review form details"

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

Resources

• Source Code