We're to the point to where we need to start implementing the rest of our UI. We have our settings UI, but whenever we play the game, I don't want to pop up the alert box. Instead, I want to show a UI inside of the browser so that the UI just flows better. So it will have a button so that the user can input their guests, they can click on a submit button, they can quit.

that the user can input their guests, they can click on a submit button, they can quit by clicking on another button. So everything will be there in the browser. We don't have to worry about the console or anything else. And because we have more UI, that means we have more markup, which I'm just going to paste in now. There's quite a bit here and we'll go over that over the next few episodes. But for right now, I just want

and we'll go over that over the next few episodes. But for right now, I just want to focus on this one right here with the ID of gameArea. This is the element that contains really the rest of the UI and I want to change it so that we essentially override this hidden class because since it's hidden, it's well, it's hidden by default. Whenever we click on the playGame button, I want to show this UI.

Whenever we click on the play game button, I want to show this ui. Now this is a class and we know that we can work with the classes applied to an element by manipulating the className property. I'm gonna comment out the game because I don't want to play the game, I just want to work with this element. So we'll have gameAreaElement, we'll call the getById function, and we want the element with the gameArea ID.

So we'll have gameArea element, we'll call the getBy function, and we want the element with the gameAreaID so that we can use the class name property. And whenever we did this before, we just set this to an empty string and that's gonna work. But notice that all of the other styling goes away. If we take a look at that, we'll see why. Here we have that div with an idea of gameArea, but notice that all of the classes are gone.

Here we have that div with an Idea of game area, but notice that all of the classes are gone. Well, that's because we told it to do that. The class name property directly links to the class attribute and we set the class name property to an empty string. So we stripped it of all of the CSS classes. Therefore we get these results. So this really isn't an option here, but you know, the obvious thing to do would be to take all

So this really isn't an option here, but you know, the obvious thing to do would be to take all of the classes except the hidden and then we could set that as the class name, in which case, yeah, that's, that's gonna work. But that's not really a solution in my opinion, because if we make any changes to the classes in the HTML, that means that we have to go to the JavaScript and make those necessary changes. And I don't wanna do that.

and make those necessary changes. And I don't wanna do that. That's a lot of extra work that I don't wanna do. And thankfully there are better ways of doing that. So the class name property isn't an option. However, one option would be to use the style property. This is a property that maps directly to the style attribute on the Element. So it would be just like we were using the style attribute except that we're doing it through JavaScript,

So it would be just like we were using the style attribute except that we're doing it through JavaScript, in which case we could set the display property to block because the hidden class and Tailwind sets the display property to none. So by using the display property here on the style property, that's actually going to override the hidden class applied to the Element because it has a higher precedence. So let's take a look at the resulting HTML. Here's that div element. gameArea is still the id.

So let's take a look at the resulting HTML. Here's that div element. gameArea is still the id. Of course we didn't change that, but look at the classes. All of the classes are there, including the hidden class. And then we have our style. So by using the style property, we have directly manipulated the style attribute. So whenever we hide this, we of course want to change the value of the display property on the style object.

to change the value of the display property on the style object. Uh, so we need to move our constant up here so that we can use it down here where we clear out the game. So that's, we'll have gameArea. element.style.display is an empty string that is essentially removing the display property from the style attributes. So here we have that div element. It is hidden. Whenever I click on playGame, it is shown inside.

So here we have that diviv element. It is hidden. Whenever I click on play game, it is shown inside of the browser because the display is set to block. But whenever I click on Clear, the style attribute is still there, but the display property is gone. That's because we reset it to its original value, which at least as far as the style attribute is concerned, it wasn't there. It was non-existent.

concerned, it wasn't there. It was non-existent. So it removed it from the style attribute. And we can change whatever CSS property that we want using the style objects. So we can come in here and we can say that we want the background color to be white. And that's simple enough to do notice though that this is in camelCase, it, it doesn't use the dash like we would in normal CSS.

that this is in Camel case, it, it doesn't use the dash like we would in normal CSS because that's not a valid JavaScript operator. So if you are wanting to manipulate a CSS property that has a dash, take out the dashes, squish it all together in CamelCase it, and there you go. So we're setting the backgroundColor to white so that now inside of the browser we play the game, our UI shows up, but the background is white and we can do this for any CSS property.

but the background is white and we can do this for any CSS property. However, one thing to remember is that we want to limit the amount of changes that we make to the document because any change that we make, the browser has to at the very least, redraw the element that we are working with. So if we look at this, we are making two changes. We are changing it to block, then we are changing the background color to white.

We are changing it to block, then we are changing the background color to white. So the browser had to redraw that two times. Then that's not very efficient. If we went to make multiple changes, well at least as far as style, if we want to change multiple stylings applied to an element simultaneously, then our best bet is to use a class, which kind of takes us back to using the class name, but, but not really. Uh, let's get rid of the background color of white there.

to using the class name, but, but not really. Uh, let's get rid of the background color of white there because we have a property called classList. And this gives us the ability to manipulate all of the classes that are applied to an element. So if we wanted to remove the hidden class, all we have to do is say remove the hidden class and that's it. It removes that class and, and we're good to go there. So that if we wanted to add it back in order to reh it,

It removes that class and, and we're good to go there. So that if we wanted to add it back in order to reh it, all we have to do is call the add method and that will add that class back to the elements. So inside of the browser, whenever we click on playGame, our UI shows up. If we click on clear, it goes away. But in this particular case, all we are really doing is toggling this class. In which case, instead of calling add

toggling this class. In which case, instead of calling Add and Remove, we could just call Toggle and that will toggle the class on and off. So at least as far as our purpose, this is going to give us the same results. We click on Play Game. It toggles the hidden class. We click on Clear, it toggles the hidden class. But one of the drawbacks of the toggle method is that it can only work with one class at a time.

But one of the drawbacks of the toggle method is that it can only work with one class at a time. So if you needed to work with multiple classes, like for example, let's say that's uh, we wanted to also add and remove the bg-gray class so that whenever we show our UI, we not only remove the hidden class, but we remove the gray class. Well, we can do that. All we have to do is just pass in another argument.

Well, we can do that. All we have to do is just pass in another argument with the class that we want to remove. And the same goes for adding that class. We can pass in as many CSS classes that we want, therefore making as many changes to an element style that we need. I just wish we could do that with the toggle class, but I guess we just can't have everything. But now, whenever I click on playGame, it shows the ui,

but I guess we just can't have everything. But now, whenever I click on playGame, it shows the ui, but the background is missing. And I guess let's do this. Let's inspect this so that we can see the classes that are applied to this element change. So there we go. Whenever I click on Clear, we see Hidden, and then the BGGray class added back. So when it comes to working with an Element's style, there are really three options.

So when it comes to working with an Elements style, there are really three options. The first is to use the className property. That way we directly manipulate the class attribute on the element, which can be useful in many cases. We can also use the style object in order to manipulate individual CSS properties for an element. Or we can use the classList property, which gives us the ability to manipulate the CSS classes that are applied to an element.

which gives us the ability to manipulate the CSS classes that are applied to an element.