In this guide, we're going to add styles to our input data labels here and we will make it look similar to the design here with the one, two, three and so on, and we will also be giving our data a nice bold text look there. After this is complete we're going to add in the rest of our inputs here. So the eight other inputs that we haven't yet added into our application and once we've implemented this we're going to make it so when we don't have text inside of our inputs we are going to style this as a gray circle instead of a green circle to indicate that it has not yet been filled out. So let's go ahead and get started. The first thing we want to do is close out all of our files and then open up our madlib_content.js and for the first one, the color let's go ahead and wrap this in a label so label class names equal to put black label clothes that off and then just toss this into our, well let's actually just leave this here if we toss this in here it's going to be in our label. So we want to put this directly after our label in between this let's just put a one and go ahead and save that.

Then let's give this a little bit of style so in our style let's go into our madlib_component.scss and in here let's add our black label

and then basically you'll notice that this green button is very similar to what we want to see down here or a content component. So if we go ahead and go to our madlib_form.scss and we copy that over our green label styles

we can modify those to get a similar effect. And the first thing we want to do is make it black instead of green. So #0000 make that black for border-radius we still want it to be circles so 100 pixels will work. We don't want it to be as big so 18 pixels should do the job and for font size let's just leave that, well lets actually make a little bit smaller 12 pixels should work and that should be good.
Go ahead and save that and check it out and see if it's working. So reload the page hit generate and you'll notice that we have a little tag there or little label and it's working. So but you'll notice that it's making this big gap here and it's way too close and it just does not look that nice. So let's go ahead and fix that by giving it a margin of five pixels. This will give it a margin around the entire label of five pixels which should fix the problem. So that's looking pretty nice with our margin here.

Now let's go back into our application code. We don't really want to copy this a whole bunch of time. So instead of doing this let's just write a basic functional component. Let's make this functional component within our class so we can still reference this and I'll tell you why we're doing that in a second. So go ahead and type out this function let's call it

renderLabel = function() {
       return (
              <span>
                      <label className="blcak-label">1</label><b>{data.color}</b>
              </span>
            )
       }      

So and let's actually return the entire thing so we can give you that but that and then in brackets here we can call it. So this .render label and let's bind to this function while we're here

now if we go back into our app it should be working. Let's go ahead and check it out and so it's not working and let's see why. Looks like it says data is not defined. And the reason that is happening is that we're trying we're trying to get data.color but data in here doesn't exist so the approach we could take if we could just copy this and do that and that would work. This would work but that brings us to another problem which is we don't want it to be color every single time.

So go ahead and go into the code and what we're going to do is pass in and state within this function that we can throw into our render label function. So go ahead and call this state and in here we'll just say state. So now if we call this we need to pass this or data.color.

That should give us what we're looking for just to double check once copy this and replace it with a plural noun and passing plural noun and I'll do it with adjectiveOneand we'll see if that's all working.

If it is then we'll do it to the rest of our pieces of state and we should be good. So I'm gonna put Blue, Broskis and neat to generate and it looks like we're getting all of our labels.

That's awesome so let's go ahead and replace all of our pieces of state with this function,

Ladies and gentlemen, this is {this.renderInput(data.color)} Barber, your sportscaster, bringing you the last inning of the game between the Cleveland {this.renderInput(data.pluralNoun)} and the {this.renderInput(data.adjectiveOne)} Yankees. {this.renderInput(data.celebOne)} is pitching for the Yankees. Here's the pitch! It's a low {this.renderInput(data.adjectiveTwo)} ball that just cuts inside of the {this.renderInput(data.nounOne)} for a strike. That makes the count {this.renderInput(data.numberOne)} strikes and {this.renderInput(data.numberTwo)} balls. Now here's the next pitch. The batter swings and connects. It's a long, high {this.renderInput(data.nounTwo)} out to {this.renderInput(data.adjectiveThree)} field. But {this.renderInput(data.celebTwo)} is coming up fast and has it for the second out. The next batter up is {this.renderInput(data.celebThree)}, the Cleveland{this.renderInput(data.adjectiveFour)}-stop. Here's the pitch... and it's hit... a short ground ball to third {this.renderInput(data.nounThree)}. {this.renderInput(data.celebFour)} scoops it up and throws it to first base for an out, and the game is over. The Yankees move into second place in the {this.renderInput(data.adjectiveFive)}

All right once you got all those filled out let's go ahead and check our browser and see if those are mapping over directly generate looks like we got all of our labels. The next thing you'll notice is that they are all number one and we definitely don't want that going on. So the way we can fix this is by first declaring a setting this.count = to 1 in our render function, that way every time render function runs it's still going to be 1. Then within here, we're just going to call it {this.count++}.

What's happening here is every time a render function is running which is every time we type into the input it's going to set count equal the one and then it's going to say this.count++that will increment it up one each time that it reaches. So it's going to be one and then it's going to be two three four and so on and that will label our inputs appropriately. So if you generate it will all be labeled correctly and it will be looking really nice.

Let's type in some values and it looks like I've accidentally put one over here. So I'm going to go fix that real quick, copy that and put this over here.

Not sure why that was over there but this should fix it. So I'm going to type in some more data here. Blue, Developers, Lit, Big Sean and I am going to hit generate. So it looks like we can see all these the next thing we need to do is add in this bold effect here.
So let's go ahead and out in that bold effect so we can see those better and the way we're going to do this is by giving our bold effect a class name of bold textand then back in our content let's give it a color: $clearBlue;but you can give this color whatever you want.

I'm going to do clear blue and it will give us this blue effect here this blue color in our text. All right so that's going to finish it up for that.

Let's go ahead and add in our additional input so we can have everything filled out correctly and complete. So I'm going to go back to our code and I'm going to go to our main component and then I'm just going to go into our madlib form component so I'm doing this by holding down command and then I'm going to click on the instance of the component that will pop me into the form component and in here I'm just going to fill out the rest of my state pieces of state and then I'm going to do that here as well and then I'm going to fill out our data a little bit more. So the first thing I'm going to do is actually just copy this

and paste it right here.

Then I'm going to close this by halfway and then I'm going to close our application about halfway I am gonna go to the design and I'm going to copy it from here.

All right so I got those all replaced and there this will also be available in the guide below if you had a hard time copying that over. The next thing you're going to do is add those up here.

All right so I got all those in there and now I'm going to copy this entire thing and paste it up in here.

All right so that should be it for our inputs. I'm going to go ahead and look in our app and see if they're all in there. All right. Awesome. So looks like we're getting our input still mobile responsive. Everything's looking great. Someone expands out a little bit and then I'm going to type in something for each of these. All right now that I've got this filled out let's generate Madlib and you'll see that all of our pieces of state are mapping correctly over into our content. You might notice that there's a couple errors in places where we need some spaces. Just go through and add those shouldn't be too hard.

All right so that completes our application. Let's go ahead and commit our code and push it up to GitHub. We're going to have one more video where we're going to fix up some styles a little bit. We're going to optimize a couple of things and we'll be done after that video. So in our terminal, let's type

git status
git add .
git commit -m "added label styles to content component"
git push origin master

That should be all for this video and I will see you in the next guide.

Resources

source code