I want to start fleshing out the UI for our game, so I want a button that we can click on to initiate, you know, playing the game. So let's add a div element that's going to... it will contain other things, but for right now it's going to have a button. And let's go ahead and style that. The color will be indigo-500. Let's also set a hover, so that's when the user hovers over it, it will change color. And we can change that to blue-700. The text will be white, font will be bold. Let's give it some vertical padding as well as some horizontal padding. And then the text we could just say play game. So let's take a look in the browser and yeah that's that's gonna work just fine. So the idea is that we will click on the button and the game will start. That means that we need to handle the

and yeah that's that's gonna work just fine. So the Idea is that we will click on the button and the game will start. That means that we need to handle the click event for that button. And there are many different ways that we can handle events. The most primitive way is to use what are called DOM level 0 events. These are just HTML attributes that all begin with on. So they start with on and then the name of the event. So we're gonna handle the click event so the attribute is onClick. If we wanted to handle the mouse move or the mouse over, meaning that the user will move their mouse pointer over that element, it would be onMouseOver. So that's the general idea. In this episode we're just going to focus purely on the click event. And the value for this attribute just

would be on mouse over. So that's the general idea. In this episode we're just going to focus purely on the click event. And the value for this attribute just has to be a valid JavaScript expression. So we're going to alert a message whenever we click on the button and voila there we go. Now there are a couple of things to at least take into account with DOM level 0 events. For one they are in our HTML, which makes them a little more difficult to maintain. We're saying that modern JavaScript frameworks use this kind of pattern, but it's on a much smaller scale. So things like Vue and React, even Alpine, everything is on a component level. So it's a little bit easier to maintain and manage. That being said, there are some people that think that this is purely fine and that's okay.

component level. So it's a little bit easier to maintain and manage. That being said, there are some people that think that this is purely fine and that's okay. But also, you know, one thing to consider is that as the browser is loading the content and it's going to load this button, and if the user clicks on the button before the rest of the document has been loaded, then there's going to be a problem. Because at that point in time when the user clicks on the button, you know, whatever code that you have here isn't going to work. Like we're going to use easygame.play. So easygame.play, at the time that the browser is loading this button element, it doesn't exist. Because that is defined down here inside of the script. So there are some page loading issues there as well. We can

loading this button element, it doesn't exist. Because that is defined down here inside of the script. So there are some page loading issues there as well. We can have a lot more control and a lot more flexibility if we just set up these event handlers inside of our JavaScript. And that's what we are going to really do in this episode. So let's get rid of that. But in order to set up an event handler using JavaScript, we need to be able to access this button. Which we can easily do because there's only one button. But let's slap an ID on this. We'll say playGameButton. And so inside of our JavaScript, we need to access that button. And let's do this. Let's get rid of all of this. We're going to add other things here. But for right now, we just want to focus on our events. So we want

button. And let's do this. Let's get rid of all of this. We're going to add other things here. But for right now, we just want to focus on our events. So we want to call the play method whenever we click on the button. So the first thing we need to do is get access to that button element. The ID was play_game_button. And then we want to call the addEventListener. But we need to supply two things. The first argument is the name of the event that we want to listen for. So this is the click event that we want to listen for on the button that has an ID of play_game_button. Then we need to pass in the function that is going to execute whenever we click on that button. So here, if we wanted to say hello, just like we did before, then we would just do that inside of this function. So that's now we

whenever we click on that button. So here, if we wanted to say hello, just like we did before, then we would just do that inside of this function. So that's now we have defined that event handler in JavaScript. And there we go. We have the same functionality. But now we have a lot more control and a lot more flexibility as to how we set up that event handler. Because now that we're doing this in our JavaScript, we can do this at any time, whenever we want. Like, for example, we have a window object, which is something that we haven't really talked about inside of the browser. You know, we've talked about global functions, global variables, things like that. Well, we have a global object in the browser. It's called the window object. And technically, every global function, every global variable is

things like that. Well, we have a global object in the browser. It's called the window object. And technically, every global function, every global variable is a property on the window object. So just keep that in mind. We're not going to really spend a whole lot of time talking about that. But just know that we have this window object. But we can set up an event listener for the load event. This is an event that is going to fire whenever the entire document is loaded. So if we wanted to wait till the very end when the entire document is loaded, we could do that, and then set up the click event listener on the button. I don't see a need to do that. But I just wanted to show you one of the things that we could do, if that is what we indeed wanted to do. But since we're doing it in

need to do that. But I just wanted to show you one of the things that we could do, if that is what we indeed wanted to do. But since we're doing it in JavaScript, we have this flexibility to do it whenever we want. We have complete control over it. So that now, really what we want to do is create our easyGame object, so that then we can call easyGame.play(), which of course, whenever we click on the play game button, our game is going to play. We can start guessing things. But of course, if we wanted to exit, now we can click on cancel. Or can we? Did we do that? We didn't do that. Because, nevermind. Let's do this. So I want to exit the game whenever we click on cancel. So whenever we get the input, if cancel is clicked, input is going to be null. So we'll just

do this. So I want to exit the game whenever we click on cancel. So whenever we get the input, if cancel is clicked, input is going to be null. So we'll just break out. That way we can start a game and we can exit it at any time. There we go. So that's gonna work. A little bit inside baseball. It takes me a lot of takes. That sounds weird. I have to do a lot of takes to do these videos. In a prior take, in several prior takes, I'd gotten to the point to where I had written the code to, you know, exit the game. I thought we had done that in this take. No, it's the problem with not writing scripts or following scripts or whatever. Just inside. Anyway, so we now have our click event handler set up on our button. We are creating the game object so that we can play the game.

whatever. Just inside. Anyway, so we now have our click event handler set up on our button. We are creating the game object so that we can play the game object. And there we go. We are now handling an event to fire that all off. Now, there's a couple of things to note here. The function that we use is going to execute within the context of whatever object that we are setting up the event listener on. So that means that this function will execute within the context of our button. And we can see that very easily by just writing it out to the console. We'll pass this to the console so that inside of the browser, let's pull the developer tools. We'll refresh. We'll click play. And we can see right there. This is the button object. So, you know, that can cause problems,

let's pull the developer tools. We'll refresh. We'll click play. And we can see right there. This is the button object. So, you know, that can cause problems, especially if you wanted to do something like this. Use the easy game.play function as the callback function. That is an okay thing to do. There's plenty of code to where I've done this. Many other people have done this. But the play function is going to execute within the context of the element object or whatever object is listening for the event. So in this case, you would want to use that bind method so that you could bind it to a particular object so that it would execute the way that you would expect. Just wanted to point that out. In most cases, the pattern that we use is to just pass in an anonymous function, and then we do

that you would expect. Just wanted to point that out. In most cases, the pattern that we use is to just pass in an anonymous function, and then we do whatever we need to inside of that anonymous function. So there's that, the context that the function executes. The next thing is that there is what's called an event object. Anytime that there is an event, there is an object that contains information about that event. And this event object is automatically passed to the event listener as the first argument. So I'm just going to write this out. We're not going to spend a whole lot of time with this in this episode because we will definitely look at it in more detail later on. But we can see that this is an object for the click event. We can see other options. Was the Alt key pressed.

we will definitely look at it in more detail later on. But we can see that this is an object for the click event. We can see other options. Was the Alt key pressed whenever the button was clicked? What were the mouse coordinates when the button was clicked? Was the Control key held down whenever I clicked the button? So every event has an object that contains a lot of useful information. A lot of times you won't need that information, but there are some times you will, which we definitely will. So in this episode, I wanted to just cover the absolute basics for events. I wanted to introduce you to DOM level zero events because if you go into React and Vue, that's the kind of pattern that you're going to be using. But if not, I wanted to present the addEventListener method because that's the primary way.

View, that's the kind of pattern that you're going to be using. But if not, I wanted to present the addEventListener method because that's the primary way that we set up event handlers. We can use that method on almost any DOM object, primarily elements, the document, or the window. But we pass in the name of the event, followed by the function that we want to execute, and then voila, we have an event handler. And as I've said, we're going to be using events extensively. They are the lifeblood of graphical applications, so we have plenty of opportunity to talk about them.