What we need to do is provide a different height. Let's go to our application, and let's close out the terminal and scroll up to card. We have a min-height: 736px or max-height: 994px. What I want to do is comment out this max height, and let's just see what happens. It appears that nothing happened so perhaps this is our grid.

I'm going to uncomment that. Let's save this. Let's see what's good. So we have the max-height: 994px. We got the grid of the home. The minmax(736px, 994px). So I'm going to put 736 here. See what occurs. It should shrink it.

main.scss

.home {
    position: relative;

    background-color: rgba(207, 207, 207, 0.06);
    display: grid;

    justify-items: center;
    // align-items: center;
    grid-template-rows: [header-s] 218px [header-e card-s] minmax(736px, 736px) [card-e];
}

That looks good but it's going to mess that up.

What we do is put this back to what it was. Then let's just move up the button when we have the styles applied for the generate button. What we'll do is we'll head down to button. I'll just type command + f and button. On generate if it's here, we'll just say:

main.scss

    button {
        justify-self: center;
        transform: translateY(50%);
    }

    &__generate {
        background-color: #00CB79;
        transform: translateY(-200px);
        @include button;
    }

    &__clear {
        background-color: #45B0E5;
        @include button;
    }

Let's head to our application, and it should pull it up. It appears to have not worked. So let's check our include button, because that could be doing something. It looks like we might have transform in here maybe not. I'm going to go back down to button, so I'm going to hit command + f and type in button.

I'm going to go back to the app and reload it. It appears that it's still down there. That's really strange. Let's inspect the element. We have card inputs. It looks like card inputs is just too big too. What we want to do is specify a different height for card inputs.

Let's go to our app here. Let's comment out this translate, and let's go to our grid for the card. Okay, so 1fr 50px. We want to go to the inputs. We have it repeat four times, and 1fr.

Let's go back to our app here. Looks like card inputs is too high though, so do we have a height in here? Looks like we don't. Strange. It's curious why this isn't working, the `translateYi(-200px). What we can do is put this transform on the button. Let's just put this on the clear and let's put this one in here.

main.scss

    button {
        justify-self: center;

    }

    &__generate {
        background-color: #00CB79;
        transform: translateY(-200px);
        @include button;
    }

    &__clear {
        transform: translateY(50%);
        background-color: #45B0E5;
        @include button;
    }

It should just override it, but it's not. You'll see it pulls it back up now, but not far enough.

Let's say minus -400px. That's too high, so let's say The same -300. That should place it pretty good. That looks good. That fixes that problem. When we type in these, and then we hit generate: you'll see it generates this form. Everything looks good, and we're good to go. We've finished this application.

Play around with it, but you'll see that we have a problem here. These are all incrementing when we type because it's re-rendering. That's kind of a cool looking effect, but I'll show you why this is happening. The reason it's happening is because in our input.js, whenever we type, it is re-rendering in our content. It's saying this.count++ every single time we type.

It's going up quite a bit. It's going up 16 times every time we put in a character. What we need to do is simply say when the constructor...well the constructor only runs once, so that it's not going to run again after the first time. When we say componentDidUpdate we want to say:

content.js

    componentDidUpdate(){
        this.count = 1
    }

What this is, is a lifecycle method which we will talk quite a bit about throughout the apps we build, but you don't need to worry about that too much. If you're a curious, search in Google the react component lifecycle. Let's go in here, let's type something in, and hit generate. Then let's start typing in here, and you will see that it looks fine.

It's not really doing anything. It looks good. It looks like it does for a second. When we first render it, so what we can do is in here let's see if there's another method. Let's say:

content.js

    componentDidUpdate(){

    }

    componentWillReceiveProps() {
        this.count = 1
    }

We'll try that. Let's go in here, and let's type some, hit generate, and that actually works just fine. That completes the application. I'm going to go in here and get rid of componentDidUpdate. Let's commit our code, and then just kind of go over the app we built.

Let's hit command + j, git status, git add ., and I'm going to say git commit -m "re-positioned the generate button". Another cool thing I want to show you and that is the git amend feature, because we did reposition the the button, but we also fixed the content counter.

What we can say is git commit --amend, and it'll allow us to change ourcommit message. So I'm going to hit the arrow key until I reach the end and I'm going to press the i key on the keyboard, and that will let us insert.

You'll see the bottom left in the terminal it says insert. Then I'm going to hit the arrow key one more time and space. I'm actually going to hit backspace and then a comma, and then type in: , and fixed content counter for label titles.

Now to get out of this we have to hit escape and then shift + semicolon to write a colon. You'll see at the bottom left, it a colon now. Then type in WQ that stands for write quit. It's going to write the file and then quit it. That that ends our commit. Now let's push to the master: git push origin master. That completes our application.

We are done with the Madlibs once and for all. Let's close out this code editor before we see another problem we have to fix, because we want to continue on with the apps. This app is this geting to me and you, I'm sure. So yeah.

We finished our application. We have all the inputs. We have these titles here. We have the inputs again so like blue, and if you type things out in here like developers. Adjectives is lit. We have a celebrity like: I'm going to say Scott Mescudi, because that his real name.

We have an adjective: chill, and then we have like: homie for now. Then for number we could put like 20 because that how old I am. Let's see what's another number? 2030 for a year I guess. Then for noun, we could put microphone, since there's one right in front of me.

Then for adjective, we could put tasty I guess. Then we have celebrity, let's put him yet put in J-Hidgey for Jordan Hudgens. Let's put in one more celebrity. I don't like celebrities. Let's just say Big Sean.

For adjective, let's put awesome. This is a task alone typing these all out. Then for noun, let's put keyboard. There's a lot of celebrities in here. Let's put Elon Musk. That's a good one. Then for adjective, let's see neat.

The point is the application works. When you hit generate, it generates out Madlib and it says the story, which is really cool. That's pretty cool and it works great. We don't need to do anything else, this looks good. Let's move on to the next application, and we'll be good there. I'll see you in the next set of videos.

Resources

• Source Code