This lesson, we're going to be using JavaScript to create our game board dynamically with code.
We're going to need a listing of colors, so that's going to be an array that's going to contain all
of the colors of the elements that we want it to create.
So we've got red and there's no particular order to this green and yellow.
And we're also going to use these values as setting the color backgrounds as well.
Adding in one more event, listener, so we've got the document object and what the window object.
So that's what also contains the document objects also built within the browser.
You can add event listeners to that as well.
And the listener that we're going to listen for is when it loads.
So when the window object loads, we're going to invoke the function of setup.
So this will be just a named function and let's set up that function now.
So function and for now, console log page loaded.
So we're ready to go with all of the functionality.
We're ready to build out the gameboard.
So we see that the page has loaded.
So at this point we can build up and set up the game board.
So once the page is loaded, set up the game board and starting out with a loop, we're going to build
out four different boxes.
So four different containers that the player can click on, creating an element.
So calling it div or whatever you want to call it, build a function that creates elements on the fly.
So we'll call it Element Factory.
And all we're looking for is the type of element that we want to build.
So we're going to build out for diffs, setting up a function that we've got for Element Factory and
it's passing in the element type.
So it's only to set one parameter and we're creating the elements on the fly using the document create
element method in JavaScript.
And this is where we specify the type of element that we're creating and we're going to return back
that element.
So it's going to give us a more dynamic way to build out the elements so that all we have to do is call
to the function that we've just created and specify the type of element that we want to generate.
And then as we build this out, we've got our main game area object.
So that's represented within this variable representing the element with the class game area.
So we're adding in all of those elements that we're creating, all of those ideas that we're creating
within the game area.
So going back into game area, we're going to use JavaScript method, append child to append that element
to the game area.
So let's see what happens.
And if we go to inspect, I'll make this a little bit bigger.
We can see that within the game area we generated four different diffs.
So the next step is to apply some content into that div in the first one that we want to do.
And probably the most visible one is we're going to update the style adding background color to that
style.
And we've got our array of game colors that we can use, whatever the value of Xs.
So as we loop through the four and we can also update this to be game colors length as well, because
this is an array.
So it will be the same thing and it'll still be a value of four.
So we see that each one of these now has a background.
So we've got a background of red, blue, green and yellow and we can't see them yet because we need
to apply a class to it and we do have that class box that we want to apply.
So this will make it visible because this box has a height and a width.
So we will be able to actually see these elements that we're creating.
So adding it into div, we need to add to the class list.
So we've got our class list for that particular element and we're going to use the method add and then
we just need to specify the class that we wanted to add to the class list.
So now when we refresh it, we have a class of box and we've got all of the background colors in style.
And you can see that when you open up your inspector, you can see each one of these elements now has
been generated using JavaScript and we were able to create all of these background colors as well as
apply the class.
So coming up next, I'm going to show you how you can make these interactive, so go ahead, use JavaScript,
create all of these elements on the fly dynamically using JavaScript, apply the colors coming from
the array where we've got the colors listed and we're going to use these as well later on to detect
the pattern that's being created.
So go ahead and set this up for yourself within your own project.