This is going to be a fun lesson as we get to generate some elements on our page using JavaScript.
So right now we start we get check combo.
We've updated the inner Temel and we also need to run the ability to generate our gameplay area.
So we're going to create a new function, call it, make her go down here where we've got a little bit
more space.
So a function and this is going to generate our inputs.
So using JavaScript, we're going to use documents, create element, and that's how you can create
elements dynamically need to specify what type of element you're trying to create.
So it's going to be an input all console logout that element information first so you can see what it
looks like in the console.
So we're generating an input and we can also attach it to our elements.
And we selected that element with the class of game into an object called game area.
So using append child, we can attend to it that input.
Let's try that out.
So Head Start and there is our input.
I also want to attach some attributes to this input as well, because this is going to be a type numeric.
Where are we going to set an attribute?
The attribute that we're setting is type and the type that we're going to use is a no.
Let's try that out.
So refresh start and we've created an input that's a number.
And you can see that's being reflected up here as well.
We also take that element and set up a max value for it.
So the max value for it is going to be nine.
The main value for it is going to be zero.
So let's try that out and just make sure that that's being added into our element as we're building
it out.
We can also have hidden values into it as well.
So L and we can set this order to be equal to zero.
And I'll show you what we're going to use that for later on as we need to have several options here
for combinations at size here as well.
So within inputs, we can also specify a size and we'll set the size to two.
As you can see, we generated with the size of two and we actually only want to set the size to one.
So let's do that, let's update it and we can update it with the style so it's a little bit easier to
see.
So we've got a value of six.
Let's use that elements and attach a style to it.
And the style that we're going to use is width.
So this is where we can set a pixel width for that particular element.
Let's set it to thirty picks and this is string value that's expecting.
So now it's at thirty six.
We can make it much wider for one or two as well.
So you can see that's quite a bit wider there.
So bring it back down to thirty picks or actually we probably need a little bit more.
So let's do 40 picks.
So there's our elements with the ability to move up and down.
Also let's create a default value for it and set the value at zero.
So our default value of it is zero, so you can see here within the console the element that we've built
out.
So it's got a number of attributes, got a number, Max Min size style, and also a value that's being
added in there all dynamically using JavaScript.
So the next thing that we want to do is we actually want to build out four of these.
Let's take this, indent it and let's create a for loop.
So setting up a for loop, we'll use X and what X is less than four and we'll take that order number
and will replace the zero with X.
So now when we start, we get four options there for adding in those combinations.
And we can also apply a style to that as well.
Using the elements you can use class list or set attribute.
Either one will work right now because we don't have any classes you want to add in a class.
So I'm going to use set class list and I'm going to add in a class and I'll just call it NUM and then
we'll go into our stylesheet and will generate the class for that.
We can do it directly within the page.
We don't need to link out to a stylesheet and here we can set a font size and see what that looks like.
So hit start.
So there's our numbers there and we might need a little bit more with a..
Well, in addition, we could set the width using our JavaScript as well.
So there's our numbers.
We can move them up and down.
The player can also go in there and select them and write them, type them.
And we also need to check to make sure that we've got a maximum.
So when we do the check combo, we're going to make sure that the value that's been entered in here
is numeric and as well that it's one digit long.
So all of that is still yet to come.
So for now, try it out for yourself, build out your own input values dynamically using JavaScript,
and you could even set even more if you wanted to.
So we could have four, we could have five.
So it doesn't actually matter.
We're going to make this application fully dynamic.
So build this out.
And coming up next, I'm going to show you how you can attach the randomness and we can check to make
sure that these values are correct.
And that's all coming up in the next lessons.