So the placeholder and the gray and green number labels. The gray and green number labels are when there's text in here: it will appear green. When there is not: it's going to appear Gray. Like this color gray.

Let's go ahead and fix the placeholder problem. Let's go into our app. Let's go to our input.js, and we have access to a title, state, and name. So what we need to do is simply put the title in there. Let's go ahead and put:

input.js

            <input placeholder={title} name={name} value={state} onChange={onChange}/>
            <label className="input__title">{title}</label>
        </div>
    )

That should fix it. Pretty simple. Probably not even worth writing down the last guide, but we have a placeholder now. The next thing we need to solve is the number labels rendering that color.

We need to say: if there is text or input we will make this have a class that will have this background color, and then if there's not: we'll have a class that has a different background color. Exactly like we did with our generate button and clear buttons.

In our card.js, exactly like what we did here with generating clear.

Let's go into our input.js and do this. Let's say in the input number:

input.js

            <label className={`input__number ${state == '' ? 'gray' : 'green'}`}>{index + 1}</label>
            <input placeholder={title} name={name} value={state} onChange={onChange}/>
            <label className="input__title">{title}</label>
        </div>
    )

Now let's go into our main.scss, let's go all the way to the top, and just put those right here. Let's say:

main.scss

.gray {
    background: #B3B3B3;
}

.green {
    background: #00CB79;
}

Now what I'd like to do is remove the default background color in our component. Let's head down to inputs, and go down to .input. Around line 141, and let's remove the background color on the number.

Let's save that, and let's head to our browser and see if this solves the issue. You'll notice they're, by default, all gray, but when you type in: it fills in the color. That looks really nice. Now hit generate, and we'll see that those are in there.

So what we need to do is end the guide here, and then move on to the next guide where we will fix the next problem. So in our home.js we have these listed out. Let's get rid of these two.

Let's save it. We have content labels, and the generate btn space/card-height. All we have left is this height, and the buttons in here. So let's go ahead and move on to the next guide where we will solve that problem, by putting in these labels. See you then.

Resources

• Source Code