I want to start transitioning our application to use the web page for the UI, instead of using prompts and the console. It just makes it a whole lot easier to play a game if it's right there inside of the browser. So this means we need to add some markup, and I want to start off by creating a div element that's going to serve as the container for the rest of the UI. Let's make this w-full, we'll add some padding, and the text is going to be white. And the first thing I want to do is provide some information about the game, such as the title of the game, so that the user knows if it's going to be an easy game or a hard game or something like that. But I'm going to have some boilerplate content, just game title. Let's have another heading, and that is going to be for our rules, because we're going to have a list of all of our rules. I want users to be able to know, you know, what the range is, how many attempts that they have. It might even be good to have an indicator for the amount of attempts remaining.

I want users to be able to know, you know, what the range is, how many attempts that they have. It might even be good to have an indicator for the amount of attempts remaining. That's something that we could look at. But for right now, we are just going to have that unordered list. We'll have the list-disk class, as well as list inside. Let's add a couple of li elements here, just so that we can see what it looks like in the browser. Of course, these will be dynamically populated. But, okay, that could look better, but that's going to be okay. So now that we have some HTML here, we want to use JavaScript to, first of all, find these elements so that we can manipulate them.

So now that we have some HTML here, we want to use JavaScript to, first of all, find these elements so that we can manipulate them. We can change their content. If we need to change their styling, we could do that as well. So the way that we do this is through the document object. Instead of our JavaScript, let's just get rid of practically everything. We'll keep the easy game object, because we need a game. But we need to be able to find that h2 element for the game title. And so the first thing that we need is to access the document, which we use the document object for.

And so the first thing that we need is to access the document, which we use the document object for. And this represents the document that is loaded into the page. Now, we are going to use the API called the Document Object Model. It's an API. It's also a specification. But basically, it defines, well, it defines a lot. It defines a ton of different types of objects that represent different objects within the page. For example, the base object that we have inside of the document is called a node. And practically everything is a node.

For example, the base object that we have inside of the document is called a node. And practically everything is a node. Elements, attributes, the content, text, things like that are all nodes within the document. But I typically don't think in terms of nodes. I think in terms of elements or attributes or content, you know, things like that. And just as we have a type of object to represent an individual element, and it's just called element, we also have elements that represent HTML elements, HTML div elements. I mean, think of any kind of element. There is a type of object that represents that element. And most of these have all the same properties and methods.

There is a type of object that represents that element. And most of these have all the same properties and methods. But of course, different types of objects could have different types of properties and methods, which is something that we will definitely see when we start working with forms. So for right now, we want to access this h2 element. The first thing that we need to do is actually find it within the document. And there are many ways that we can do that. We could actually walk through the document node by node to find this element. No, we're not going to do that because that's boring. Instead, the easiest thing that we can do is get an element by its ID.

No, we're not going to do that because that's boring. Instead, the easiest thing that we can do is get an element by its ID. So all we have to do is just slap an ID on here. We can call it gameTitle. And then we could use that ID to find the element with that ID. This is going to give us the div element object. So let's call this gameTitleElement. Did I say div? No, this is an h2. So this would be an HTML heading element object.

No, this is an h2. So this would be an HTML heading element object. And then once we have that element object, we can, well, we can't do everything with it, but there's a lot of things we can do. We can change its content. We can change the style of it. We can even remove it completely from the document. For what I want to do, I want to change the text that we have here, gameTitle. So the easiest way that we can do that is to use a property called innerHTML. This is going to essentially replace all of the content inside of this element.

So the easiest way that we can do that is to use a property called innerHTML. This is going to essentially replace all of the content inside of this element. So of course, our content is just some text, game title. But whatever we assign this innerHTML is going to replace all of that content. So here, this is going to be an easy game. So that inside of the browser, whenever we refresh, we see easy game. Now, before we move on, it's important to know where your code is going to execute. Or I should say when it's going to execute. Because in order to find an element in the document, that element has to actually be in the document.

Because in order to find an element in the document, that element has to actually be in the document. So if we take a look at my HTML, we can see that I have the script as the very last thing in the page. So as the browser is loading everything within the page, it's going to load everything else, and then it's going to load my JavaScript. This way, I don't have to worry about really anything. If I need to access an element, I already know that it is loaded inside of the page. And therefore, I can use JavaScript to get it. Because if we try to get this element with an ID of gameTitle

And therefore, I can use JavaScript to get it. Because if we try to get this element with an ID of gameTitle before it exists within the document, well, we're going to get an error because, well, it doesn't exist. Whenever we tried to get the element by ID, it was not in the document. So therefore, we can see that gameTitle element is null. So if you attempt to retrieve an element from the DOM that does not exist, it is going to return null. So be mindful where your code executes. Because if you do need to interact with elements,

So be mindful where your code executes. Because if you do need to interact with elements, those elements need to be in the document before you try to get them. Otherwise, you get an error. Okay, so we have retrieved the game title. But now I want to retrieve the <ul> element that contains our list. Now, we're not going to populate, well, I guess we can populate our rule list. But we will look at different ways of doing that in the next episode. For right now, though, we need to retrieve this <ul> element. And once again, we could slap an ID on this element, call it a day, and

For right now, though, we need to retrieve this ul element. And once again, we could slap an ID on this element, call it a day, and that's fine. But a lot of times, that's not feasible. Sometimes we don't want or need to have an ID for a particular element. In which case, there's plenty of other ways that we can find an element. So let's create a constant, we'll call this rulesListElement. Once again, we need to use the document object that is our gateway to everything about the document. And we're gonna use a method called querySelector.

about the document. And we're gonna use a method called querySelector. This is going to allow us to pass a CSS selector. And it's going to try to find an element that matches this CSS selector. It's going to return the first one that it finds. So we only have one ul element within this document. So by calling querySelector, specifying ul, that's going to return the only ul element within the page, that's fine. That's not a very good example, though, is it? Let's use this entire class list.

That's not a very good example, though, is it? Let's use this entire class list. So we want a ul element that has a class of list-disk and a class of list inside, so that we could then change its contents. We can use the innerHTML property here. It's just that we need to build these individual li elements, which is gonna be fine. So we can say easy game, and then we can have the minRange. But we need to tell the user what this is. So we can say that the min is our minRange.

But we need to tell the user what this is. So we can say that the min is our min range. We will close out that li element. We will create another one, and we can put this on multiple lines. So let's go ahead and do that just to make this a little bit easier. Then we will have max to where we will say easy game max range. We will close out that li element, and then it would be good to have the maxAttempts. So we'll have maxAttempts, and we will use easy game. Do we have max?

So we'll have maxAttempts, and we will use easyGame. Do we have max? Yeah, we have that property. I can't remember if we implemented that or not. All right, so we are going to then change the inner HTML of our rulesList element. So if we go back to the browser and we refresh, we have our easyGame title. The rules, the min is 1, the max is 10, and the maxAttempts are 10. Let's do this. Let's have a maxAttempts of 5. That is, of course, going to change our rules here, but

Let's have a max attempts of 5. That is, of course, going to change our rules here, but we are at least providing useful information. And we did so by finding those elements in the DOM and then changing their content with innerHTML. Now, there's one other way that we can retrieve elements. Actually, that's a lie. There's others, but the other primary way is to retrieve multiple elements. We would call this a NodeList. A NodeList is a collection of nodes.

We would call this a nodeList. A nodeList is a collection of nodes. It's a lot like an array, but it is not an array, but we can still iterate over it. So we, once again, use the document object, but we call a method called querySelectorAll. So we have getElementById, which returns a single element based upon that ID. That is the fastest way of finding an element. Then we have document.querySelector, which we pass in a CSS selector, and it will select that element, if it finds it, I should say. And then we have querySelectorAll,

and it will select that element, if it finds it, I should say. And then we have querySelectorAll, which is going to return all of the elements that match the query selector. I want to select all of the heading elements that we have. And we currently have an h2 element and an h3 element. So by passing the CSS selector to select those elements, we are going to end up with a node list in this headingElements. And we're not gonna do anything with this, but we could take a look at this inside of the browser. If I hit the right key, we can access headingElements.

we could take a look at this inside of the browser. If I hit the right key, we can access heading elements. And that's not defined because we need to refresh. But here we can see that we get a node list. And it's going to tell us what those nodes are. So the first item in that node list is the h2 element. The second is this h3 element. So that's three primary ways of finding elements within the document. The easiest and the quickest is to just retrieve an element by its ID. But sometimes you can't do that.

The easiest and the quickest is to just retrieve an element by its ID. But sometimes you can't do that. So you can use the querySelector method to select an element based upon its CSS selector. Or if you need multiple elements, then you can use the querySelectorAll method.