When we type out color, we want it to say 1 like the label here. When we type out the number in seven: we want it to say seven. So let's go and do that. I'll just type some stuff out here, and then hit generate, so that can be there.

We tried doing this already by mapping over it, but it is an object since it was state. It didn't work in our content component. What we need to do is pass in a number that we can apply as a label on each one of these.

We could also push these all to its own array, or put it in an array and then do it like that, or what we could do is just manually put these in here. What we would have to do is: we would have to put in a span here and say 1 number, say `className="card_content_label". So that works.

Let's apply the styles in our main.scss. Let's scroll down here and say:

main.scss

.main__content__label {
    height: 18px;
    width: 18px;
    background-color: black;
    border-radius: 50%;
}

That will solve the black circle problem. When you hit generate, and type something in on color. It should be there, but it's not. Let's see why. We have the main__content__label not sure why I said main. We all know it's card__content__label.

So what we need to do is cut this right here and delete this. Let's find our card in here. So card content and then label. Let's say:

main.scss

    &__content {
        width: 1100px;
        height: 297px;
        background-color: #F2F2F2;

        justify-self: center;
        margin-bottom: 84px;

        &__label {
            height: 18px;
            width: 18px;
            background-color: black;
            border-radius: 50%;
        }

This is on line 130ish. Paste that, and when we go back to the browser here you'll see we now kind of have the effect we're looking for, except for that's clearly really weird looking.

Let's try and fix this. I thought that height and width would solve that, but maybe not. Let's try increasing this to 25px, and reload the page. Type something, and then hit generate. So it appears it's still kind of a problem.

What we can do is: let's make this a div. Let's go to our content.js and let's make this a div. I don't think that will fix it, but let's try it out anyway.

It fixed it, but it's appearing on a whole new line which is a problem. Before we fix that, let's make the background color this white, center it, and put the font in for the actual letter you see here. So we need to get these styles.

Let's go to our app, and let's say in main.scss, in the content label, and let's say:

main.scss

    &__content {
        width: 1100px;
        height: 297px;
        background-color: #F2F2F2;

        justify-self: center;
        margin-bottom: 84px;

        font-family: 'Montserrat';

        &__label {
            height: 18px;
            width: 18px;
            background-color: black;
            border-radius: 50%;
            font-size: 18px;
            line-height: 22px;
            text-align: center;
            color: white;
        }

Now when we go back. You'll see that this is white, and it looks good. It looks like it is a little bit too high, so I'm just going to say padding-top: 2px. That pushes it down a bit. Let's say 3px.

What I want to do now is put it on within the line, and we can do that pretty easily by saying:

main.scss

        &__label {
            height: 18px;
            width: 18px;
            background-color: black;
            border-radius: 50%;
            font-size: 18px;
            line-height: 22px;
            text-align: center;
            color: white;
            padding-top: 3px;
            display: inline-block;
        }

By doing this it's going to put the div in the same line. So that looks good. Now it looks like we need some space after this. So what we can do is go into our SCSS and say margin: 4px;. I'm going to comment out this padding, and you'll see that it pushes it around.

The reason I commmented out the padding is because I noticed it was kind of making a weird stretch effect. It's making it look too much like an oval. The way that we can get the text down is not a transform, not using padding, but by getting rid of line-height. You'll see that fixes it up.

main.scss

        &__label {
            height: 18px;
            width: 18px;
            background-color: black;
            border-radius: 50%;
            font-size: 18px;

            text-align: center;
            color: white;
            // padding-top: 3px;
            display: inline-block;
            margin: 4px;
        }

The next thing we need to do is add in the labels for all of these, because clearly, it's only in once. I don't want to do that because that's going to get really messy, really quick if we do it the way we've been doing it.

Let's go in here, and I want to change the the size of this to 18px again, so that this is smaller. That's way too small. So let's just stick to like 23px. That should be good. Maybe that's why the line-height wouldn't work on 18. So let's say 18, and say line-height: 22px. I think that's what it was. That looks a lot better, so let's keep that for now and we'll change it as needed.

Let's think of a different way we can add in all of these divs, because this is clearly too much to write out. That's a long class name and everything. What we can do is: we can cut this. I even got rid of the color. We can make a function right here, let's build a constructor so that we can increment it.

It looks like that's going to be the most efficient method right now, but that way we don't have to type out every one of these divs with the class name. That way we don't have to type out 1 2 3, but I think there's going to be a problem if we don't reset count to zero at some point.

So let's just put these all through here right now throughout our app and then we'll see if there's a problem.

content.js

    constructor() {
        super()
        this.count = 1;
    }

    renderLabel(data) {
        return [
            <div className="card__content__label">{this.count++}</div>,
            <b>{data}</b>
        ]
    }

    render() {
        const data = this.props.data;
        // this.props.data.map((object,index) => {
        //     console.log(index);
        // })
        // <span>{data.indexOf(data.color)}</span>
        return (
            <div className="card__content">
                <p>
                    Ladies and gentlemen, this is {this.renderLabel(data.color)} Barber, your sportscaster, bringing you the last inning of the game between the Cleveland {this.renderLabel(data.pluralNoun)} and the {this.renderLabel(data.adjectiveOne)} Yankees. {this.renderLabel(data.celebOne)} is pitching for the Yankees. Here's the pitch! It's a low {this.renderLabel(data.adjectiveTwo)} ball that just cuts the inside of the {this.renderLabel(data.nounOne)} for a strike. That makes the count {this.renderLabel(data.numberOne)} strikes and {this.renderLabel(data.numberTwo)} balls. Now here's the next pitch. The batter swings and connects. It's a long, high {this.renderLabel(data.nounTwo)} out to {this.renderLabel(data.adjectiveThree)} field. But {this.renderLabel(data.celebTwo)} is coming up fast and has it for the second out. The next batter up is {this.renderLabel(data.celebThree)}, the Cleveland {this.renderLabel(data.adjectiveFour)}-stop. Here's the pitch... and it's hit... a short ground ball to third {this.renderLabel(data.nounThree)}. {this.renderLabel(data.celebFour)} scoops it up and throws it to first base for an out, and the game is over. And the Yankees move into second place in the {this.renderLabel(data.adjectiveFive)} League!  
                </p>
            </div>
        )
    }

You've probably already hustled through this. I'm trying to go at least somewhat slow. Okay, that's all set. Took a couple of months, a couple of years perhaps, to write that all out, but we're good.

Let's write some content in here let's say: blue. Then if you hit tab, since these are inputs, it'll go to the next input, so you don't have to click on these individually. Let's say plural noun: developers, adjective: lit, celebrity: post malone, adjective: dope, noun. Oh, that's cool. If you shift + tab it will go back. So let's say: neat. That's a better one.

That should be good. Let's just do that. Now let's hit generate, and you'll see that we have these all individually named.

Now one problem is our font size is way too big, but you'll see that everything's working. We have: Ladies and gentlemen this is Blue Barber sportscaster, your sportscaster, bringing you the last inning of the game between the Cleveland developers and the lit Yankees. Post Malone as pitching for the Yankees and so on.

Let's go ahead and fix that font size. Let's go to our main.scss, and on the label let's just make the font size 14px. That should make it look better. Okay, that looks good.

You can adjust that how you want to make it look the way you want. I'm going to do 14px and leave it like that. That looks good. Our application looks fairly complete, except for we have one more problem and that's this. So what we'll do is we will complete that in the next guide.

So let's go ahead and commit our code. We didn't commit our code in the last guide, so let's say git status, git add ., and let's say git commit -m "put the content labels".

I'm just going to say what we did in this guide because I forgot what we did in the last guide. I'm going to move on to the next guide right now, and we will finish up by fixing the height of the component.

Resources

• Source Code