#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Adding CSS styles to the buttons upon guessing
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Let's give the buttons some styling to give the user some more feedback which letters are used, and if the result was good or bad.
0:09
You will be surprised how easy it actually is to do this. Just three lines of code. And we're going to do that in the match char method
0:21
after the set state. I still have this event target available which was passed in as an argument and as we have seen in the Javascript lesson
0:33
I can set properties on HTML elements. So, first of all, let's disable the button so the user cannot click it twice
0:43
and that's actually convenient, because otherwise I would have to write code to actually look
0:48
if the letter was guessed, but by just disabling the button I already let the UI prevent the user from clicking the button again
0:56
so very little code, important step. Then let's add some styling and as we saw in the Javascript lesson I can use the dot style and then CSS property
1:08
to override styles on the fly. Now I'm going to update the background color of the button and I want to give it green or red
1:17
based on a successful guess. And we have this state variable asserted letter she used in a ternary statement here I'm going to do the same.
1:28
So if asserted letter became true and make sure to remember when we were looking through the letters of the movie
1:35
when the letter matched, the asserted letter became true which means the guess was successful.
1:40
So if the guess was successful, give me a green background and if it was unsuccessful, give it a red background.
1:49
Black font on green or red is not that nice so that's all right to color to be white. And that's all we need. If I guess a D, look at that!
2:07
Now it's way more usable, 'cause I can immediately see I got one successful guess and two failed guesses. Now three, four, five, game over.
2:21
This is, of course, the thing we still need to address. When we hit the five wrong guesses the game should bail out
2:28
and I should get a button to try again. And that will be the topic of the next video.