This lesson, we're going to build some interactive elements and put the words that we scrambled in
the previous lesson and output them to the player to be able to select and interact with.
So we've got everything that's happening within that start function.
And we also need to add in a few other things.
So before we go into the word sorry, I want to select the element game.
So using variable.
So we can set up CONSED game and equal that to document using query selector.
We're going to select the element with a class of game.
So that's the one that we generated earlier.
And then as we loop through, we want to build some elements that have the value of temp, one inside
of those, so let's generate those, we're going to use the document, create element.
And the element that we're going to create is a div.
And then within this dive object that we've just created, we want to add in some interaction, so we're
adding an event listener and the difference between a mouse enter and mouse over is that now on mouse
enter, it gets executed once and on mouse over it gets executed every time the cursor is moved over.
Let's add that in.
And there's two E's in there.
So Mouse enter and we're going to invoke this function that's going to get executed as we enter.
So only one time as we enter into the element, add in a style, update the background color and set
it to red is most so using a set of mouse enter mouse leave reset the background color to be white.
The game.
We're going to append child and the child that we're going to pendas that freshly created div that we
just created.
And we should also add some inner Temel in there so or in our text in this case.
And we just rewrite the word select on top.
Now we've got select and we've got the mouse enter and Mousley functionality.
Let's inspect that.
And you can see that as we're hovering over, we're adding and removing background colors or adding
and updating background colors.
So that's actually the interaction that we want, because as we leave, we want to update that inner
text and we want to do the same thing.
So coming into it, we want to update that inner text so and adding it back to select.
And then as we hover over it, we want to output that inner text to be temp one.
So I'll show you how this works.
So now whenever I hover over these, then you see that we are seeing those scrambled words.
Also, I'm going to add in a class, so I'm going to cheat a little bit and we're going to use class
list and adding a class to it.
And the class that we're going to add in is going to be baulks.
So it's going to give us the ability to set a little bit of styling.
So going out to the style area, adding in the box and we can set some display properties, so display
and inline block so that we can align them, adding in some padding you can do 10 picks, padding,
and I'm going to set a width of one hundred picks and a height of also one hundred picks.
It's quite a bit easier when we go in and add in that particular element.
So now we've got a bunch of boxes there that have that content in it.
Also applying text, text, align center and I don't need this much height actually on it, so I'm going
to shrink the height down to 40.
So that gives us a bunch of elements where we've got these scrambled words that we can see those.
And I'm also going to reverse the white and the red so all of them are going to have red by default
and then white.
So selecting that default color of it, the background color to red.
So try that one more time.
So now we got that unscramble, that scrambled word, so the objective of the game is going to be that
we're going to present a word to the player and then they have to select it from these boxes.
And if they select it properly, then it's going to disappear.
And until all of the elements are gone, then that's when they will.
So we need to add in one more event listener.
And that's going to be a click event because we want the user to be able to click it.
And then we're going to check to see if that selected word is actually matching with the word that we've
got in the output, create that function in the upcoming lesson.
So for now, we'll just put into the console just to make sure that we do have that click event function.
So now we do have that click event functioning.
And there's actually one other thing that I want to add in.
So there's a couple other things that I want to add in.
So first of all, I want to add in the word that it's actually going to be so instead of before we split
it, it's just going to be item so that we know which word it is on the unscrambled part of it.
So refreshing.
And you can see that this is that we've got it hidden in the background.
And that way we can output within the console instead of click.
We can output the value of this so we can see the unscrambled word when we click it.
And that's going to give us the ability to match it with the selected word that the user has defined.
And we can easily do a comparison there to make sure that the player actually selected the right word
before we remove out that element.
So all of that is still yet to come.
Go ahead and build out this interactive elements within your JavaScript.
And then coming up next, we're going to wrap up this this game and add in the additional functionality
that we require.