#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
0:03 to give the user some more feedback
0:04 which letters are used, and if the result was good or bad.
0:08 You will be surprised how easy it actually is to do this.
0:11 Just three lines of code.
0:14 And we're going to do that in the match char method
0:20 after the set state.
0:24 I still have this event target available
0:27 which was passed in as an argument
0:29 and as we have seen in the Javascript lesson
0:32 I can set properties on HTML elements.
0:37 So, first of all, let's disable the button
0:39 so the user cannot click it twice
0:42 and that's actually convenient, because otherwise
0:44 I would have to write code to actually look
0:47 if the letter was guessed, but by just disabling the button
0:51 I already let the UI prevent the user
0:54 from clicking the button again
0:55 so very little code, important step.
0:59 Then let's add some styling
1:01 and as we saw in the Javascript lesson
1:03 I can use the dot style and then CSS property
1:07 to override styles on the fly.
1:11 Now I'm going to update the background color of the button
1:14 and I want to give it green or red
1:16 based on a successful guess.
1:20 And we have this state variable
1:22 asserted letter she used in a ternary statement here
1:26 I'm going to do the same.
1:27 So if asserted letter became true
1:29 and make sure to remember
1:30 when we were looking through the letters of the movie
1:34 when the letter matched, the asserted letter became true
1:37 which means the guess was successful.
1:39 So if the guess was successful, give me a green background
1:44 and if it was unsuccessful, give it a red background.
1:48 Black font on green or red is not that nice
1:53 so that's all right to color to be white.
1:58 And that's all we need.
2:00 If I guess a D, look at that!
2:06 Now it's way more usable, 'cause I can immediately see
2:10 I got one successful guess and two failed guesses.
2:15 Now three, four, five, game over.
2:20 This is, of course, the thing we still need to address.
2:22 When we hit the five wrong guesses
2:24 the game should bail out
2:27 and I should get a button to try again.
2:29 And that will be the topic of the next video.