I've added in some H.T. Amelle into our game object, and I'm going to be actually erasing all of this
H.
Timal and we're gonna be doing this all with JavaScript and that's going to be coming up within this
lesson.
And the next lessons we're going to construct, all of these elements, ply the various styling, adding
in content, adding in classes, and then setting various attributes of those elements as we build them
with JavaScript.
So at the end of the day and at the end of the project, we're gonna remove out all of this excess H.
Timal, and of course, we want to focus on JavaScript.
So so we're going doing in the upcoming lessons.
And before we do that, we're gonna setup some variables that we're gonna use within the code in order
to construct game.
So going into the script file and just before we're initiating, let's set up some variables that we're
gonna use within the game.
This variable called a game is we're gonna howse some of the game information as well as the elements
that we're going to be creating and mimicking what we see within the HDMI out.
And in order to do that, let's take a look at some documentation first.
So some of the JavaScript methods that we're going to be making use of in this lesson is query selector.
So what query selector does is it allows us to select from the document object using query selector
and applying a selector value.
Finding the matching element on the page.
So it founds the first one that matches the specific selection.
And if there's no matches, then it's just going to return back null.
Also, we're going to be using create element.
So this allows us to create elements using JavaScript lezzies to create elements dynamically and we
can apply some properties to those elements.
So specify the different type of elements that we want to create.
In this example, they're creating a div.
So you're just using document dot create element creates a div adding in some text.
So creating some text node content and then using append child to append that content into the main
container.
So it's grabbing a main container and then appending content into it and outputting it here within the
page.
Once you have an element object, either you've created it or you've selected it.
You can apply various styling.
So inline styling.
So these are all the typical styles that you would have with CSX.
And this is going to be what's going to allow us to apply the various style properties that we see on
the page.
So it's not just completely just regular H.T. mail.
We do have some heart, some larger font sizes and so on, so we can apply all that styling as well
as colors, and we can also set attributes to the elements.
So once we've got the element selected or created, we can set attributes, we specify the attribute
name and then the attribute value that we're setting to it.
There's two different ways that we can append content.
So there's append child.
And this is a method that adds a node to the end of the list of child.
So basically you get the parent element and then you can append a child to it and that's gonna add it
onto the page.
And as we saw here, when they create an element, then they do use the append child to add it to the
new div.
So the new div gets appended, the new content and then we get.
Getting element by I.D., so it's selecting the div on the page, which is this one.
And we're adding in.
So it's adding and there's also options here where you can insert before and so on says a number of
different ways to append content to the element.
And here they're just selecting the document body.
And they're inserting content there.
We've also got the append as well.
So this is another way to insert and set content into the node.
And there are some differences from append child.
So pen Lao's you to append Domme string objects and append child only accepts node objects.
There are also some differences that there's no return value on append or is append child returns.
The appended node object.
And if you're not going to be using that, then you can just go ahead and use a pen.
So we are going to be using append as opposed to a pen child because we don't need to return the object
as we're gonna be building out the same object.
And with a pen to swell, you can append several nodes and strings.
Whereas with append to child, we've only got one that we're able to append.
So this will also allow us to minimize some of the code that we're writing.
So let's get back into the project and we're gonna do all of this within the iron eyeteeth.
So the objective, again, is to build out the exact same thing that we see here on the page, except
and then we'll remove out that main part.
So what I'll do is I'll create a separate div and get rid of the game idea on this one.
And we're going to use this with JavaScript to construct all of this content.
So let's use the game object that we created earlier.
So this is our main container for all of the elements and we can call this the main container.
And then using documents and query selector selecting that element that has the idea of game.
So just like you would with styling, you specify the hash for I.D., the dot for classes, and then
nothing for the tag names.
And if I console logout the value of game, we're going to see that particular element is now contained
within the game object.
So this is gonna give us access to that element.
And at this point, we can select and we can update content contained within there.
So if we want to do game main and to text contents, we can write.
Hello World.
And that will apply the tax content into that main object of hello world.
So how about we create some elements?
So we see the first one here has some content dealer versus player.
So this is a scoreboard content where we're gonna be outputting the score to the player.
So let's create a name for it.
And I'm going to call it game dot scoreboard.
And then using documents, create elements.
An element that we're creating is gonna be a div.
So we're mimicking exactly what we've got contained here.
And then we can set the text content of the game scoreboard and set the text content and whatever we
want the text content to equal to.
So let's add in the text content there and then we also need to appended.
So we've got the game main object.
And then we can use append to append game scoreboard object into their.
So as assume you've got the game scoreboard object and I can get rid of the text there because we're
not going to need that.
And one last thing before we conclude this lesson is going to be a game scoreboard and updating the
style and setting the style we need to update the font size.
So this is going to be font size and giving it a value of two AM to match what we have in the below
element.
Now, when you open the H.T. Amelle page and you go to inspect and we look at the contents that we've
got within the game object, this is actually already matching with what we have here below.
So the first element now has been created and now we've got a bunch more to create.
And I know this is going to be more time consuming than just using the HD here, Mel, but we do want
to get lots of practice in to writing the JavaScript code with the elements as well as once we're setting
them within the game object.
We have access to them within the game so we can rewrite the content of the score and we can make updates
to the various elements as needed.
So it's gonna be a crucial part to making the gameplay work well before the next lesson.
If you want, you can go through the H.
Timal and build it with JavaScript.
And the next lesson I would be walking you through, how we're going to construct the exact same content
here using JavaScript.
So it's coming up in the next lesson.