4.5 Some More Styling
Now that we are adding more components and functionality to our app, it's time to dive back into styling. This time, we're going to focus on styling the
ButtonPad component, making it a little easier to read and click on.
1.Introduction2 lessons, 03:04
2.Getting Started3 lessons, 15:16
3.Building React Components4 lessons, 24:57
4.Working With State6 lessons, 40:38
5.Winning and Losing3 lessons, 17:14
6.Refactoring and Final Changes3 lessons, 16:55
7.Conclusion1 lesson, 01:40
4.5 Some More Styling
So we've come pretty far with our Hangman Clone. And I wanna spend a couple more minutes doing a little bit of styling for our buttons, because it's looking a little drab. And I wanna be able to add in some of that functionality that we've talked about, where if I click a button that contains a letter that exists within my target word, I want it to light up green, and if it doesn't, I want it to be red. So those are some of the things that I wanna add in, and that's typically, just gonna be some styling and some CSS. So let's go ahead and hop right in, and do that. So really all I'm gonna do, is I'm basically going to start with the same process, as I did for the letters here. So let's go ahead and copy that. And we'll drop this down here, and we're gonna make this a letter button. And then from here, I'm really not gonna worry about the border of the background. I'm gonna leave that stuff out. And I really don't want any outlining when I'm doing this. So I'm going to set the outline here to None, and then from there, we're pretty good. We'll be able to apply that style but now, I also want to add in two styles that I've already talked about. I wanna take care of found, and I wanna take care of missed. So let's go into our CSS here, and let's add those two in. So I'm gonna add a found class. And I'm going to add a missed class. Now in these, we're gonna keep things fairly simple. We're only going to adjust the color. So well, for the found, I'm gonna say color is going to be green, coz we want that to pop a little bit and say, hey, good job, you picked the right one. And for missed, I'm gonna make the color red. So red is basically gonna say, that was the wrong color, you picked the wrong one. So now we wanna take this new style, this letter button, and I wanna use it in our code, so we can see it actually working. So I'm gonna head back over to my render button function. In my button pad, and then I'm gonna come down here, and I'm going to apply that letter button style in here, and that placeholder that we already used. So now, just by applying this, the rest of the logic should be fine, since we are using that CLS in our class name for our button JSX. So now, if I simply save that, we should re-render our game. And our buttons are already gonna look a little bit different, so we've got a little bit of a gray button here which makes it stand out a little bit differently from our target word up here. And now, I can come down here, and I can start to click on these letters. I can say, is there a D there? And we still have that alert there, I can take that out, but as you can see now, it shows that it is red, because there was no D. And if I were to click on T, it's going to say green because there is a T. So we're getting a little bit closer anyway, we do have a few more changes to make, as far as the application goes, we're gonna get rid of that alert. And we obviously don't want to show the target word here, when we first start the application, we're gonna wanna hide those. And then only when we click on a button that the letter actually exists, we can go ahead and show it in our target word. So we have a few changes to make, a little bit of styling changes to make, to have these letters pop on their own, other old lines again in those rows. So, we've got a few changes here and there to make, but we're coming along nicely. So, let's start to add in some more functionality.