#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Matching guess letters and updating the state

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Great! So the user at this point is able
0:03 to interact with the application, making guesses
0:08 which the application is able to retrieve.
0:12 Now, one of the most critical parts of the application.
0:16 When a user guesses a letter
0:19 we have to match it against the movie that was selected.
0:23 So let's set up some variables.
0:29 We have guessed, which is the event target in our HTML
0:36 which was the letter that was shown in our pop-up.
0:43 Let's make it lowercase as well.
0:53 Let's make a state variable
0:55 to see if there's variables in the movie.
1:04 And let's make a new mask.
1:06 Basically, the placeholder's updated
1:09 with the letter that was guessed.
1:14 Next we're going to look over the private movie array
1:17 see if the letter is in there, and if so, update the mask.
1:24 In this case, it's convenient to write a classic style
1:27 for loop to have the index integer available.
1:47 For every letter in the movie
1:49 we're going to see if that lowercase letter
1:55 matches the guessed lowercase letter.
2:04 If you have a match, you push the matching letter
2:07 onto the new mask array.
2:17 And in that case, asserted letter becomes true.
2:22 And I use this state variable in a bit
2:24 to update the bad guesses counter.
2:28 So in this case, if it becomes true
2:31 the user did not spend a guess.
2:34 Beyond increment, the bad guesses count
2:36 if asserted letter never turns true.
2:42 If the guessed letter was not the same
2:44 as the letter in position i
2:48 we update the mask with the original char
2:54 which is the placeholder.
3:00 So this is all preparation work.
3:02 At this point, you're going to set the state
3:07 and update the mask to the new mask
3:12 and update the bad guesses counter
3:15 but only if asserted letter was false.
3:20 So if asserted letter became true
3:22 I'm using a ternary if statement
3:25 then we just bounce the current count back.
3:32 And if asserted letter was false
3:37 we also reference the original bad guesses
3:39 but add one to it.
3:44 At this point, there's one final thing we should do
3:47 because if the mask is fully exposed
3:50 that means that the movie was guessed and the user won.
3:55 On the other hand, if the bad guesses
3:58 becomes greater than five, then it's game over.
4:00 So we're going to use a callback to check win or loss
4:06 and we're going to write that in our next video.
4:09 Let's see this in action.
4:12 Let's check my console in case.
4:16 That's all good. F is not in that title.
4:22 C is.So is H. So is B. So is E. A is not.
4:33 And image updates, it looks like magic, right?
4:36 But that's actually because in the render
4:39 the image that shows is tied to the bad guesses count.
4:43 So this case, bad guesses became two
4:47 and monkey image two shows.
4:49 Now if I do another bad guess, Q
4:52 the count goes to three, and the image updates.
4:56 And by using set state, which is the proper way
4:59 to update the state of the app
5:00 you get this rendering out of the box.
5:02 So after setting the state variables
5:05 this rendering happens again, and the variables
5:08 I reference here are updated, hence show an updated view.
5:17 Now there's one thing to address.
5:18 At this point, it's game over, but there's not a limit here
5:22 to recognize that I have guessed five times
5:25 and updated view to show that I lost the game
5:28 with a button to start over.
5:30 So I can keep guessing, but of course
5:34 I should be stopped at this point.
5:35 We already see that this leads to bugs
5:37 and that's because I went over
5:40 the max count of five attempts.
5:41 Now, before addressing this, in the next video
5:45 I'm first going to give the button some styles
5:49 because it's very hard to see now
5:51 which letters I guessed and which are not.
5:53 So what if we can update the buttons with some CSS
5:56 to make it easy to see which ones I have picked
6:00 and of the ones I picked, which ones are good versus bad.
6:04 So that's what we're going to do in the next video.