So what I'm going to do is I'm going to go over to the code and let's just get in the name and email for now, just so we can remember. We've got the e-mail, what I'm going to do is I'm going to take the e-mail and I'm going to copy it and then I'm going to paste it, okay so we have two e-mails here. Then I'm just going to leave these all down here because we're going to need password and this button, so we'll just put them down here.

I'm going to close the terminal real quick and I'm going to close out the sidebar using command + b. Okay so I got an email and an email, let's make the first one name, I believe that's what it was. And then we'll say the type is name, the title and the placeholder is name, and the name is name, so a lot of names.

Now let's go in here, and let's get the street address, the city and that's it for now. I'm going to copy these two so the name and email and paste it and then I'm going to name this one, okay I can't do that because this one's named name as well, I'm going to go to let's see street-address, and then the type is going to be address and the name is going to be street address and the name is going to be street-address, well let's just call it address. I can't remember what I put on the back end, so I was just trying to make it the correct one.

Okay, now we've got the street address. Now what we want to do is we want to name this right here city. And then I'm going to replace title and placeholder with capital City. Let's just review that one more time. So I've got the address, and note that's street-address but then the type is going to be address because that's how it works with HTML.

All right then we got the form city and then now we just need the state and zip code. So let's just throw those in really quick. I'm going to copy these two and then I'm going to name this one state. The type is going to be state, and the title is going to be state and the place holder is going to be state and the name's going to be state. Now this one's going to be zip code, all right. The title and the placeholder are going to be Zip code with a Capital Z.

All right, we're good, we've got six things here. We got the name, e-mail, street address, city, state, and zip code. Now if you look in here you'll notice we have Current Password and we have New Password and Confirm Password. Let's go ahead and comment out in our code the password the line and the login, let's just get rid of the line entirely. And let's copy and paste all the password and the login buttons.

All right, for some reason it's not commenting on all of that. So that's annoying, I'm going to get rid of them because it's not letting me comment it out. I'll comment out the login button just because I want to just remember all these fields. But we know what to do with the password and it's not commenting out so we'll get rid of the password.

Okay, so we've got name, e-mail, Street Address, City, State, Zip code, and then a commented out logging in button. Let's go ahead and see what this looks like on our form in our project.

All right, looks like we have all of our fields that are all lined up except for not really in the way we want, and another thing is these are all called sign in. We don't want them to be on the sign in grid, we want them to be on account information grid. So let's go ahead and rename everything in here that has sign-in in our class names to account-information. Okay so I just renamed all of the sign-in's the class names to account-information.

So now if we go back to our application it's most likely that they're going to be all over the place or stacked up or the same, right. Okay, so that's nice you'll see that and it auto fills really nicely.

All right, so what we want to do is throw in the passwords now just so we have them. Well here's what we'll do, because we want to have this Change Password button initially okay, so we don't want these here so we won't worry about passwords now. What we'll do is we'll line up everything on the grid here and then we'll deal with the passwords okay.

So what we want is two columns and a bunch of rows okay. So let's start off with two columns and three rows, really simple stuff let's go to our code and let's reference the signin.scss. You'll see that they're each about 64 pixels and I guess there is no grid gap. So let's just copy, well I guess we've already copied the css, did we? Let's go check.

Looks like account information we haven't copied anything, so let's go ahead and let's go into signin.scss and let's copy everything in signin.scss and let's throw it into account-information.scss. Okay so really simple, now we want to replace both of these signins with account-information.

Now what we want to do is we want to actually align it on the grid because these don't really map up with our our JSX items in the form right. So what we need to do is say okay we've got account-information-form__name, email, street address, city, state, and zip code okay. Now we have to name this correctly, okay we named this correctly I thought we didn't say form.

Okay, so that was a little hard to remember, but we've got to get these all in okay. So we've got the name, and email so start with that, then we got the name, and here's the deal because we're going to have multiple on the same row. So let's get rid let's just call this, let's see, okay let's just start with this not the grid. Okay we got the e-mail I'm going to rename that to name and then I'm going to rename password to e-mail and I'm going to get rid of these styles under it. And I'm going to get rid of the &line, &login, and &__details and the styles in them.

So we're just left with these two &name, &e-mail then we've got, what was it street address? And then we have city, and then we have zip code, oh and we have state in there somewhere probably above zip code. It doesn't matter what order you put them in here, but it's obviously a good idea to keep it consistent with the order it is in the visuals and with it in here. But in all reality you can put the name all the way down here and it wouldn't matter because we're going to put it on the grid in the right place.

Now we actually did that with the header. When you inspect it you'll see in the elements that if you close everything up you'll see that in the header and the navbar actually below the account in our header here but it doesn't matter because we applyed it to the top.

Now obviously it's a better idea to put these above it because that makes more sense but it doesn't matter again. So let's go back to our code and lay things out. We have the name, e-mail, address, city, state, and zip code, all right, now here's the thing we don't want to apply these all on grid column 1/-1. So let's start by creating some columns here all right. So we got start and end. Now what we want is a middle one, so we want middle and then 1fr.

account-information.scss

&__form {

    grid-template-columns: [s] 1fr [m] 1fr [e];
}

Okay, that's pretty straightforward. Now what we need to do is we need to get rid of this and put them all in the correct column so we got grid column for the name is going to be start to middle obviously and then e-mail is going to be start to middle and that's it for that side except for the passwords which we are not at yet. Okay, now for street address that's going to be middle to end and same with city state and zip code, if I remember correctly. So let's go ahead and let's look back at our design, all right that looks correct. We've got these four and we've got these these two, it feels like there's three over here because state and zip code are on the same line but there's four. Okay, now we have four of these over here, state and zip code are overlapping so you can't really see them.

So let's go ahead and let's do this, let's make zip code and state 50 percent of their width, let's say input in each one of these width 50 percent. I don't think this is going to work to be honest but let's try it we might just have to use the pixels.

account-information.scss

&__state {
    grid-column: m/e;
    input {
        width: 50%;
    }
}
&__zipcode {
    grid-column: m/e;
    input {
        width: 50%;
    }
}

Ok it works, nice.

So all I did was say input width 50 percent on the state and zip code. Now you'll see that these have a lot of similar code, it's actually all the same. We could do this all to the name email street address city with all the grid columns but sense that's only one line I'm not going to really worry about it. But since this has the input and everything, what I want to do is cut this grid-column, and input out of zipcode, all right, and then cut it out of state as well.

Then go down here and just say &state and then comma &zipcode and then pasted it, that way we don't have to write that twice.

&__state,
&__zipcode {
    grid-column: m/e;
    input {
        width: 50%;
    }
}

Okay let's check it out now.

Looks good to me, let's go back to our code.

Now what we need to do is we need to specify the rows because you'll see that the rows are quite a bit off here in our app. So the top one obviously is going to be name, so we want this to be a name and that can be 64 pixels. Now it's also going to contain the street address because these are in the same row. Okay so name, street address, email, and city. So let's say name and street address and then we got e-mail and we have city.

Okay, look at this and understand what's going on here.

grid-template-rows: [name-s street-address-s] 64px [name-e street-address-e email-s city-s] 64px [email-e city-e state-s zipcode-s] 64px [zipcode-e state-e];

I'll explain it, we have name start to name end is on the first row. But we also have street address start to street address end on that row because they belong on that row. The next row we have e-mail start to email end then we also have city start to city end okay and obviously don't worry about this right now, this end part, as a matter of fact we'll cut it out.

grid-template-rows: [name-s street-address-s] 64px [name-e street-address-e email-s city-s] 64px [email-e city-e];

Okay, there we go, I'm going to close out the side tabs so you can see better, so it's still big but you can see more. Okay I'll keep it zoomed in, well I can probably zoom out a little bit. Okay, so we got name start, street address start, name end, and street address end. Okay, yeah that's pretty set so let's go ahead and apply it.

Let's a good ahead and say grid row is name start to name end, and again this is a really customized one because when we get into making it mobile responsive we'll have these applied all to the same one, like we could say "Okay, we want these to belong in the same place" right. So we'd put it on the same thing and we could say like name address right.

But that would be a rookie mistake because when we get to media queries they'd have to belong in the same row because in here they would have the same names. They'd both be named name address start to name address end. Okay so by doing this it gives us a lot more versatility and we can basically do whatever we want really easily with media queries.

Okay so let's go ahead and apply the rest of these rows. We've got e-mail and that's going to belong on e-mail start okay so these are pretty self-explanatory now because we've already named them so we can just name them what they're called. That's one reason I called this one street-address and not just address because, while that would have been less clutter some it would be easier to see on the screen up here. It's easy to just look at this and be like hey this row is called street address.

So let's go ahead and let's apply it to the city. Now we haven't handled state and zip code. Let's go check it out on the browser and see what looks like before we do that. Okay, we should see kind of what we're seeing here without the state zip code and password. All right, yeah that looks really really good.

So what we want to do is we want to manage these two now, the state and zip code. So let's go into account-information.scss and let's add another 64 pixels, and really quick I want to reference the design. Okay, there's no extra space like it has from the email to the password, I'm just checking on that. Okay so 64 pixels in the end here and we'll say zip code and state. Then we'll say state start okay so this is a row, yeah state start to zipcode start, they are on the same row, but they're going to be on different columns.

Okay, so let's put the rows in there now. All right, let's try it out. All right nice. Now you'll see that they're stacked on each other.

We have to fix that, and you'll see that the width is a little bit too much. So what I want to do is I want to go in our design and hit inspect so I can see what the width is then we'll add it, okay, it's 200 pixels. What I'm going to do is instead of saying 50% let's say 200 pixels. And then if that doesn't work we won't apply it to the input we'll apply it to the actual tag there. Okay, that looks good, you'll see it's what we need.

All right so we can do two things here, we can either translate it over or we can provide an additional column or better yet we can just, this is a great solution right here, we can just have it justify to the end. Because you'll see in elements if we hover over it you'll see that it's the width of the entire thing. So if we just put them on the same column but have one set to justify start and one set to justify end then it will be perfect. It will get the spacing in there and everything automatically.

Okay, so let's go to our code and on zipcode lets just say, well let's see which one needs to be over there, looks like zip code yeah. Okay so zip code is going to be justify self is end, and we don't even need to apply it to state, so let me show you. Let's go to Chrome and let's go to our application, let's go to account information and you'll see it's right where it needs to be.

See this is automatically justify self is start on the states so we don't need to specify that one, but just to show you so you understand if we go to state and say justify self start, it will start at the beginning where it is right now. And to help you further understand how this is all working if we say center, it's going to center in between there.

All right, now if I say center on the zip code it's going to be the same thing. Okay, I just want you to understand how that works, and then if we have a media inquiry we can just say okay we don't want any columns we want them all to be on the same column and then autofill the rows and then it would be in a nice layout. Okay so a lot of versatility.

So I'm going to change zipcode back to end and and I'm going to get rid of justify self on state. Okay that sets that up, now let's go ahead and Ooh it looks like it actually has a problem here and it's that the width is sometimes longer than the input, that makes sense because we declared a static width on these inputs so they're not going to stretch which means this is going to stay here, and this one's going to flow over here.

So the easiest solution at this point is to translate it over 200 pixels and then 26, all right, that gap. So let's go back to code and instead of saying justify self end and let's say transform translate x we'll say 226px and we'll see what that looks like.

account-information.scss

&__zipcode {
    grid-row: zipcode-s/zipcode-e;
    transform: translateX(226px);
}

All right, looks good, we can stretch it out and nothing breaks.

Now, it's still a good idea to, it might be a better idea I guess it doesn't really matter. But personally I feel like justify self would be cleaner, but since our inputs don't expand larger than 400 pixels or 440 pixels however large they are then I'm just going to use this method because it's quicker and it's just as clean to be honest, okay it's just personal preference to be honest.

What we want to do now is throw in some grid gaps because you'll see that they are touching each other which doesn't look good. Okay so it's about 14.5 pixels so let's just say 15 pixels. Okay we got the name to the input gap there because that's it's own grid but yeah. So go up here and let's say on the form that the grid row gap is 15 pixels, and that will handle it all for us.

Okay sweet, it looks really nice.

So that looks like our design, what we need to do now is we need to implement this password button and we need to make it so when we hit change password it shows these fields and these buttons. Now, it seems kind of complicated but it's actually really easy. It's basically just throwning in some more fields and a couple of if statements right, with some local component statements not global statements, so it's not going to be in redux it's going to be all in our component and it will be really simple.

So we'll do that in the next video, we'll finish off this entire form in the next video and then we'll move on to the actual bulk of this application which is the shop. Okay so let's go ahead and commit our code.

Terminal

git status
git add .
git commit -m "built account information grid and placed majority of fields on form grid"

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

Resources
Source code