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