تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Styling Keyboard Keys0:27

And you can see at the moment, there's no easy target other than button, which is a little too generic. Okay, let's go to my welcome view, and then I will add a class of key. And then let's put all of these on their own line. Okay, so now I can style it by saying for each key on the keyboard, let's do things like give it a background color, maybe, to start. Maybe force a height. Let's see what that looks like, refresh. Yeah, maybe we should give it a width of 40 pixels. Or really, we have to be careful, yeah, you can see,

Preparing State-Based Styles1:56

we might want to reduce the size of these tiles. And that would give me a lot more room. But for now, just keep in mind, I'm on a super low resolution for the screencast. This is how it would likely look on your machine. Okay, so next, before we write the logic for highlighting each individual key, let's get the styling working. And it should be mostly the same process. So for example, if we scroll up to how we highlighted the tiles, I don't want a text shadow. But yeah, what if I had something like a key that has a class of correct,

Previewing Key Feedback Classes2:55

In that case, let's do a background color of a gray color. And you can see all these colors here in the sidebar. Okay, so again, we don't have any logic for that. But just to show you, if we, for example, added a class of absent here, you can see how we can start to give the User a bit of feedback. Let's add a class of correct, and then maybe on the second row, this will have a class of present. Okay, so we have the basic styling up and running. In the next episode, we need to write the logic that dynamically refreshes the keyboard after the User submits a guess.

In the next episode, we need to write the logic that dynamically refreshes the keyboard after the user submits a guess. Hopefully, we can get that to work.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟