All right, let's play a game and let's put in a guess of three that's too high. I have to double click the value to change it. Submit double click to change submit. And two is correct. And that was rather annoying. And when it comes to graphical applications, this is something that we have to think about. What is the user's experience with our application? And in this particular case, it's not very good. In fact, there's a lot of things that aren't good about this.

And in this particular case, it's not very good. In fact, there's a lot of things that aren't good about this because even though the game is now over, I don't necessarily know that it's over 'cause I can change the value here. Submit and then too high. What? What? What the heck? Oh and well that makes sense. But now that I've reached the attempts limit, we can see that too is undefined. If I play the game again,

we can see that too is undefined. If I play the game again, you know there's nothing that's reset. Everything is still what it was before. So there's a lot that really needs to be done here. But the first thing I want to tackle is our history. I want to show the history of guesses and we can do that very easily. So after we show feedback, we could say that we will call updateHistory.

So after we show feedback, we could say that we will call updateHistory. And you know, I guess we could just pass in the same thing, which makes me think, uh, as far as the show feedback is concerned, maybe we should do something else. I don't know, we'll leave it as is. But we need to implement this updateHistory method. So let's go all the way up to the top. And I'm gonna put this after showFeedback

So let's go all the way up to the top. And I'm gonna put this after showFeedback because when it comes to defining methods and properties on an object or a class, I like to keep things in alphabetical order. That's just me being me. You can do whatever you want. And so we will have our results that we want to do and then we just need to update our history. Now if we look at the markup, we see we have this ul element

and then we just need to update our history. Now if we look at the markup, we see we have this <ul> element with an ID of guestHistory. So that's our history element. So let's go ahead and let's retrieve that element. We'll just call it historyElement. And we will use our trusty getById function so that we can get that element by its ID. And this is all we are going to do here. We are going to set its inner HTML to

And this is all we are going to do here. We are going to set its inner HTML to whatever is in the inner HTML plus a new LI element. And then we will just output the result there. So we will close the LI element. That way we are just updating this element. But of course if we need to reset the ui, we will need to clear the history. So we can either add that functionality to the updateHistory method.

So we can either add that functionality to the updateHistory method or we can write a clearHistory method. And I think clear or reset, uh, let's go with reset. I think that's gonna work better. So let's add resetHistory. And here we will simply just set the history element, enter our HTML to an empty string. So let's do this since we have this method and let's go all the way back.

So let's do this since we have this method and let's go all the way back. Now where is our submit event listener? Let's collapse these. I thought I had these collapsed, but I guess not. Alright, so here we have our submit event listener. We need to essentially clear the history both whenever we start a new game. So we'll do that right here. And then we also need to do that.

So we'll do that right here. And then we also need to do that whenever we explicitly clear it. So we will have reset history there. And I never removed this code that takes out the BG gray background color. So let's do that so that we have some contrast. We no longer need to clear the console. And so now let's test this out. We will play the game and maybe what we need is a method

And so now let's test this out. We will play the game and maybe what we need is a method to just reset the ui. I think that will probably serve us a lot better, but we can see that our history is updating. If I click play game or clear, that should clear the history it does. So now we just need to focus on this functionality here. Whenever we submit a guest, we want to clear the value of the guest text box and focus this.

Whenever we submit a guest, we want to clear the value of the guest text box and focus this. And we will do that here after we update the history. So we'll call ui, we can call this reset. Guess that kind of falls in line with the idea of resetting things. So we'll need to do this both here. But if we're going to have the reset ui, then maybe we just have a method called reset. So we're gonna do two things as we scroll all the way up.

then maybe we just have a method called reset. So we're gonna do two things as we scroll all the way up. So we're gonna have a reset method, which is going to call resetHistory. It's going to call resetGuess which is what I'm going to implement now. And then eventually we will reset a bunch of other things too. But here to reset the guess, the first thing we need is the inputGuess elements.

But here to reset the guess, the first thing we need is the input guess elements. We want to set the value property to an empty string, but then we want to focus that element and we do that very easily with the focus method so that now that we have this reset method, let's scroll down to our submit event listener. So that instead of just calling resetHistory, we call reset. And then we will update the reset method as we need to.

of just calling reset history, we call reset. And then we will update the reset method as we need to to reset all of the things that we need. So now whenever we play the game, we can see our guessBox is automatically focused. I'll type in a value, we will submit. I can immediately type in a new guess submit and it looks like our value is gonna be won. Now of course, we don't know when the game is over yet, which is something that we will definitely need to address.

Now of course, we don't know when the game is over yet, which is something that we will definitely need to address. But if I click on Clear and Play game, it resets everything except the feedback. Now we don't need a resetFeedback method because our showFeedback just accepts a result and we show that result. So inside of the reset method, we could just say this->showFeedback(pass in an empty string) and that will reset the feedback.

we could just say this showFeedback pass in an empty string and that will reset the feedback. So let's play this one more time. Let's try 8, 7, 6 is correct by clicking on playGame. Again, that should reset the UI so that we can start playing without any must or fuss. But we do need to do something when we reach this point, which is easy enough to do because we have a method now that will do that for us so that if the guess is not valid, we show our feedback,

because we have a method now that will do that for us so that if the guess is not valid, we show our feedback, we then reset the guess and then return because there's nothing else to do. So this is probably the most important thing about writing graphical applications and that is considering the user experience. And it's very important for us to go through the process of using our software. But it's also very important to get, you know,

of using our software. But it's also very important to get, you know, actual user feedback. Because we are developers, we think differently. We can develop our applications and we can think, yes, this is how this application should be used only to get it into the hands of the people who will actually use it and then get a lot of feedback. Of course, it's useful feedback, they tell us how they want

who will actually use it and then get a lot of feedback. Of course, it's useful feedback, they tell us how they want to use it, how's they think something should work. And then we need to consider that because after all, unless if we are using that software too, I mean we, we write it for them. So as you start getting to the point of actually implementing your software, implementing your ideas, consider the user's experience.

implementing your ideas, consider the User's experience.