1
00:00:00,590 --> 00:00:06,050
This is going to be a fun lesson as we get to generate some elements on our page using JavaScript.

2
00:00:06,320 --> 00:00:09,180
So right now we start we get check combo.

3
00:00:09,200 --> 00:00:16,000
We've updated the inner Temel and we also need to run the ability to generate our gameplay area.

4
00:00:16,280 --> 00:00:20,960
So we're going to create a new function, call it, make her go down here where we've got a little bit

5
00:00:20,960 --> 00:00:21,620
more space.

6
00:00:21,620 --> 00:00:25,530
So a function and this is going to generate our inputs.

7
00:00:26,150 --> 00:00:32,180
So using JavaScript, we're going to use documents, create element, and that's how you can create

8
00:00:32,180 --> 00:00:36,270
elements dynamically need to specify what type of element you're trying to create.

9
00:00:36,560 --> 00:00:43,100
So it's going to be an input all console logout that element information first so you can see what it

10
00:00:43,100 --> 00:00:44,090
looks like in the console.

11
00:00:44,360 --> 00:00:49,160
So we're generating an input and we can also attach it to our elements.

12
00:00:49,400 --> 00:00:55,680
And we selected that element with the class of game into an object called game area.

13
00:00:56,330 --> 00:01:01,340
So using append child, we can attend to it that input.

14
00:01:01,640 --> 00:01:02,420
Let's try that out.

15
00:01:02,600 --> 00:01:05,490
So Head Start and there is our input.

16
00:01:05,720 --> 00:01:12,560
I also want to attach some attributes to this input as well, because this is going to be a type numeric.

17
00:01:12,560 --> 00:01:15,200
Where are we going to set an attribute?

18
00:01:15,410 --> 00:01:20,300
The attribute that we're setting is type and the type that we're going to use is a no.

19
00:01:21,320 --> 00:01:22,150
Let's try that out.

20
00:01:22,280 --> 00:01:26,450
So refresh start and we've created an input that's a number.

21
00:01:26,690 --> 00:01:29,210
And you can see that's being reflected up here as well.

22
00:01:29,820 --> 00:01:33,680
We also take that element and set up a max value for it.

23
00:01:34,040 --> 00:01:36,080
So the max value for it is going to be nine.

24
00:01:36,380 --> 00:01:39,340
The main value for it is going to be zero.

25
00:01:40,010 --> 00:01:44,930
So let's try that out and just make sure that that's being added into our element as we're building

26
00:01:44,930 --> 00:01:45,260
it out.

27
00:01:45,830 --> 00:01:49,040
We can also have hidden values into it as well.

28
00:01:49,280 --> 00:01:56,120
So L and we can set this order to be equal to zero.

29
00:01:56,870 --> 00:02:01,550
And I'll show you what we're going to use that for later on as we need to have several options here

30
00:02:01,550 --> 00:02:04,570
for combinations at size here as well.

31
00:02:04,850 --> 00:02:09,520
So within inputs, we can also specify a size and we'll set the size to two.

32
00:02:09,800 --> 00:02:15,610
As you can see, we generated with the size of two and we actually only want to set the size to one.

33
00:02:15,800 --> 00:02:20,390
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

34
00:02:20,390 --> 00:02:20,680
see.

35
00:02:20,960 --> 00:02:22,490
So we've got a value of six.

36
00:02:22,970 --> 00:02:25,970
Let's use that elements and attach a style to it.

37
00:02:26,660 --> 00:02:28,640
And the style that we're going to use is width.

38
00:02:28,880 --> 00:02:32,080
So this is where we can set a pixel width for that particular element.

39
00:02:32,570 --> 00:02:36,970
Let's set it to thirty picks and this is string value that's expecting.

40
00:02:37,490 --> 00:02:38,900
So now it's at thirty six.

41
00:02:39,290 --> 00:02:41,690
We can make it much wider for one or two as well.

42
00:02:42,450 --> 00:02:44,890
So you can see that's quite a bit wider there.

43
00:02:45,620 --> 00:02:50,200
So bring it back down to thirty picks or actually we probably need a little bit more.

44
00:02:50,210 --> 00:02:51,230
So let's do 40 picks.

45
00:02:51,470 --> 00:02:55,490
So there's our elements with the ability to move up and down.

46
00:02:55,760 --> 00:03:01,430
Also let's create a default value for it and set the value at zero.

47
00:03:02,340 --> 00:03:09,240
So our default value of it is zero, so you can see here within the console the element that we've built

48
00:03:09,240 --> 00:03:09,450
out.

49
00:03:09,600 --> 00:03:17,400
So it's got a number of attributes, got a number, Max Min size style, and also a value that's being

50
00:03:17,400 --> 00:03:20,530
added in there all dynamically using JavaScript.

51
00:03:20,880 --> 00:03:24,660
So the next thing that we want to do is we actually want to build out four of these.

52
00:03:24,750 --> 00:03:27,920
Let's take this, indent it and let's create a for loop.

53
00:03:28,530 --> 00:03:35,100
So setting up a for loop, we'll use X and what X is less than four and we'll take that order number

54
00:03:35,100 --> 00:03:37,240
and will replace the zero with X.

55
00:03:37,260 --> 00:03:43,530
So now when we start, we get four options there for adding in those combinations.

56
00:03:44,010 --> 00:03:46,830
And we can also apply a style to that as well.

57
00:03:46,830 --> 00:03:50,820
Using the elements you can use class list or set attribute.

58
00:03:51,330 --> 00:03:56,040
Either one will work right now because we don't have any classes you want to add in a class.

59
00:03:56,170 --> 00:04:02,160
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

60
00:04:02,160 --> 00:04:04,980
we'll go into our stylesheet and will generate the class for that.

61
00:04:05,100 --> 00:04:07,130
We can do it directly within the page.

62
00:04:07,140 --> 00:04:11,910
We don't need to link out to a stylesheet and here we can set a font size and see what that looks like.

63
00:04:11,940 --> 00:04:12,630
So hit start.

64
00:04:12,800 --> 00:04:15,990
So there's our numbers there and we might need a little bit more with a..

65
00:04:15,990 --> 00:04:20,000
Well, in addition, we could set the width using our JavaScript as well.

66
00:04:20,010 --> 00:04:21,720
So there's our numbers.

67
00:04:21,720 --> 00:04:23,160
We can move them up and down.

68
00:04:23,310 --> 00:04:27,060
The player can also go in there and select them and write them, type them.

69
00:04:27,070 --> 00:04:30,580
And we also need to check to make sure that we've got a maximum.

70
00:04:30,750 --> 00:04:35,520
So when we do the check combo, we're going to make sure that the value that's been entered in here

71
00:04:35,520 --> 00:04:39,330
is numeric and as well that it's one digit long.

72
00:04:39,360 --> 00:04:41,130
So all of that is still yet to come.

73
00:04:41,280 --> 00:04:47,880
So for now, try it out for yourself, build out your own input values dynamically using JavaScript,

74
00:04:47,910 --> 00:04:50,090
and you could even set even more if you wanted to.

75
00:04:50,100 --> 00:04:51,770
So we could have four, we could have five.

76
00:04:51,930 --> 00:04:53,150
So it doesn't actually matter.

77
00:04:53,190 --> 00:04:55,380
We're going to make this application fully dynamic.

78
00:04:55,380 --> 00:04:56,220
So build this out.

79
00:04:56,370 --> 00:05:01,800
And coming up next, I'm going to show you how you can attach the randomness and we can check to make

80
00:05:01,800 --> 00:05:03,960
sure that these values are correct.

81
00:05:03,960 --> 00:05:05,640
And that's all coming up in the next lessons.