This lesson, we're going to set up an array that's going to contain all of the values of the words
that we're going to be using so that they can be constant and we can just call it my words.
And this is going to be a collection of random words that we're going to use and scramble these words
in order for the user to have something to click on and unscramble.
So I've created six words and now we can use these words.
And this is the main array where we're going to be displaying one of these words and it's going to be
up to the user to find out which one it is.
And we're going to scramble these words within boxes on the page so they have to click the correct box
when the word appears and that's how the game begins.
Let's add an event listener to that start button.
As we're generating it out.
We can add the event listener.
The event listener is going to be a click and if the button gets clicked, then we're going to invoke
the function for start setting up the start function.
So this is where we start the game and we know at this point we want to start the game.
So we want to also update and select that button and hide that element.
So whatever element triggered it, we're going to hide that particular element.
And there's a number of ways that we can now select that freshly created element.
So to start the game can use this, because the element that triggered it is the same one that we want
to hide, selecting the style, applying property of display, none.
So that button will no longer be visible once it gets clicked.
We also want to update some of the messaging for the player.
So selecting that message area and I'm going to build a special function for that.
We can just call it message and then pass in message and we can call that output here.
So all we have to do is send a value of whatever we want to output to a function called message.
And we'll use message.
We'll use query selector, query selector and selecting the element that has a class of message.
So message, we're going to update the entire HTML to equal whatever the value of output is.
So so we're going to do within this one message function.
So now if we want to update any of the messages, we can update that content in the message simply by
calling out to that function and passing in the output.
And here we need to enter in a word that needs to be selected.
So let's start the game.
And we also need to build out that particular game functionality.
So we need to build out all of the boxes that are going to be clickable.
And we also need to scramble these words as well.
And I'll put them on the page and select one of these words randomly that the user has to find.
So it's quite a bit to do in the upcoming lessons.
So for now, create a function to start the game, also create a function that's going to output messages
into your inner HTML.
And coming up next, I'll show you how you can use and make use of these words.
And we're going to scramble those words and output them on the page for the player to find.