1
00:00:00,090 --> 00:00:05,880
Hey, I got you to do the hard part, last lesson, so this lesson is the easy part because calculating

2
00:00:05,880 --> 00:00:10,120
where you want to position the element is a little bit more difficult than creating the element.

3
00:00:10,140 --> 00:00:12,090
We've already seen how we can create those elements.

4
00:00:12,340 --> 00:00:16,980
So now all we need is a function and we're going to pass in the coordinates the X and Y coordinates

5
00:00:17,160 --> 00:00:21,480
and pass that in and create the element at that particular spot.

6
00:00:21,570 --> 00:00:26,180
And we're going to create whatever number we've set up within the set up of bricks that we want to create

7
00:00:26,550 --> 00:00:32,400
so we can just call this create brick and we're passing in the value of role, which is the position.

8
00:00:32,400 --> 00:00:38,490
So it's got the X and the Y position within that object and then creating the function that's going

9
00:00:38,490 --> 00:00:40,500
to create the brick and passing in.

10
00:00:40,500 --> 00:00:44,940
So maybe we can call it position because it's got X and Y included within it.

11
00:00:46,720 --> 00:00:48,130
So creating an element.

12
00:00:49,660 --> 00:00:55,060
And this is just a regular d'Hiv, so same thing that we did before, and we did quite a few of these

13
00:00:55,060 --> 00:01:01,840
elements that we've already created, so creating a div dynamically and setting some attributes.

14
00:01:01,840 --> 00:01:03,340
So we didn't do this quite yet.

15
00:01:03,350 --> 00:01:06,040
So there's a number of ways to add a class.

16
00:01:06,220 --> 00:01:11,350
And in this case, we want to add the class of Bryk to that.

17
00:01:12,010 --> 00:01:14,480
And you can also do it as class list.

18
00:01:14,980 --> 00:01:19,660
So either way, and if you actually want to add more than one class, this is a nice and quick and easy

19
00:01:19,660 --> 00:01:19,810
way.

20
00:01:19,810 --> 00:01:23,530
You could just colma separate out all the different classes that you wanted to add in.

21
00:01:23,800 --> 00:01:28,900
So we're adding in that class and this is the one from the very first lesson where we were going through

22
00:01:28,900 --> 00:01:31,620
all the costs were created, that brick class.

23
00:01:31,840 --> 00:01:33,450
So adding that into the brick.

24
00:01:33,460 --> 00:01:36,940
So we've got some automatic styling and making it a little bit easier.

25
00:01:37,240 --> 00:01:41,770
And also we want to pick a random color for the background so that they all look different.

26
00:01:42,100 --> 00:01:49,600
So background, color and using math format, we can create a random color so we can equal this.

27
00:01:49,930 --> 00:01:55,780
And colors are going to start with a hash, of course, and using math random.

28
00:01:55,910 --> 00:02:02,260
I'll show you really quick and easy way to create some random values and then opening this up in the

29
00:02:02,260 --> 00:02:02,770
browser.

30
00:02:02,770 --> 00:02:04,160
So we'll do it in the browser first.

31
00:02:04,360 --> 00:02:10,390
So using math random, we know that math random will return a number.

32
00:02:10,390 --> 00:02:13,150
So zero decimal and a bunch of digits after that.

33
00:02:13,390 --> 00:02:17,530
So we start with math, random and we're going to turn this into string.

34
00:02:17,650 --> 00:02:23,230
And the reason we're converting it into a string is that this gives us the ability to apply string methods.

35
00:02:23,440 --> 00:02:27,930
And once we've converted into string, we can actually convert into a Haxby string.

36
00:02:28,180 --> 00:02:29,890
So that's the base.

37
00:02:30,100 --> 00:02:32,190
So zero to nine.

38
00:02:32,200 --> 00:02:37,240
And then you've got ABCDE, PEF, and if you're familiar with colors, then you're going to know that

39
00:02:37,600 --> 00:02:39,010
the colors are hex based.

40
00:02:39,250 --> 00:02:43,330
So they've got the values all the way up from zero to 255.

41
00:02:43,480 --> 00:02:45,700
But in hex string it's only the two characters.

42
00:02:45,850 --> 00:02:51,840
So it's either a number or ABCDE PEF and that gives us all the values that we need for the colors.

43
00:02:52,150 --> 00:03:00,100
So now that we've got the math random to string, we use another string method which is substring and

44
00:03:00,100 --> 00:03:03,130
subtract out the last six values.

45
00:03:03,340 --> 00:03:08,650
So we're going to take the last six values that are available within the string and use that because

46
00:03:08,650 --> 00:03:11,620
we always need six to be returned back, four color.

47
00:03:11,800 --> 00:03:15,980
So returning that back and that gives us a random color.

48
00:03:16,390 --> 00:03:23,350
So placing that formula here or we can actually even create a function if we want it to random color

49
00:03:23,890 --> 00:03:26,430
and just simply do a return on that.

50
00:03:26,440 --> 00:03:27,930
So that will make it a little bit cleaner.

51
00:03:29,050 --> 00:03:32,550
And also I'm going to include the hash there so we don't have to worry about that.

52
00:03:32,860 --> 00:03:36,310
So this will give us a quick formula for a random color.

53
00:03:36,550 --> 00:03:40,210
And whenever we want a random color, we just add in the function there.

54
00:03:40,840 --> 00:03:47,050
So adding in random color and then within the container will depend on the child so that we can actually

55
00:03:47,050 --> 00:03:52,080
see the element that we just created because that makes it a little bit easier to create those elements.

56
00:03:52,450 --> 00:03:53,650
So let's see what happens.

57
00:03:53,650 --> 00:03:59,700
We're hitting start and you see we've created our first brick, so we want to create a bunch of bricks

58
00:03:59,740 --> 00:04:00,900
and we want to position them.

59
00:04:01,060 --> 00:04:06,160
So if you go to inspect here, you're going to see that we actually did create all the bricks, but

60
00:04:06,160 --> 00:04:08,050
we created the one on top of the other.

61
00:04:08,200 --> 00:04:12,460
So that's why we only see the one, because we need to use the position value.

62
00:04:12,640 --> 00:04:17,920
And of course, that was the difficult part where we needed to position those and we took care of that

63
00:04:17,920 --> 00:04:18,670
the last time.

64
00:04:18,880 --> 00:04:22,390
So now it's just a matter of applying it within the style properties.

65
00:04:22,870 --> 00:04:29,800
So adding that in and let's create the inner H, we can create some inner tech's content as well.

66
00:04:30,190 --> 00:04:34,780
And that's another number that we could pass in into the role object.

67
00:04:35,110 --> 00:04:38,300
So as we update the role, we can update whatever the value.

68
00:04:39,010 --> 00:04:45,880
So now we're getting our role count so position so we can add in and we can count all of the bricks.

69
00:04:46,240 --> 00:04:50,140
And then lastly, of course, to set the style properties so we can actually see them.

70
00:04:50,410 --> 00:04:52,080
So we've got a left position.

71
00:04:52,330 --> 00:04:56,500
So using the position of X and these aren't moving around.

72
00:04:56,500 --> 00:04:57,790
So we just need to position them.

73
00:04:58,510 --> 00:05:04,540
And then top position is going to be the the the horizontal and the don't forget to always to add the

74
00:05:04,540 --> 00:05:05,380
picks to it.

75
00:05:06,550 --> 00:05:07,570
So let's see what happens.

76
00:05:07,600 --> 00:05:12,460
So refresh and once we start it builds out all of our grid.

77
00:05:13,030 --> 00:05:19,480
And actually this should be X the should not this num it's not the total, it's the count incrementing

78
00:05:19,480 --> 00:05:19,780
count.

79
00:05:20,140 --> 00:05:21,610
So start at zero.

80
00:05:21,610 --> 00:05:23,950
One, two, three, four, five, six, seven, eight, nine, twenty seven.

81
00:05:24,220 --> 00:05:27,730
And this in this case we actually ended up with too many bricks.

82
00:05:27,940 --> 00:05:31,090
So once I start the game you can see it's a lot better here.

83
00:05:31,210 --> 00:05:36,910
So maybe I'll bring the amount of bricks that we're creating down and we'll make an adjustment for that

84
00:05:36,910 --> 00:05:42,490
later on so that we can account for it when we're running out of space, so that we can start creating

85
00:05:42,490 --> 00:05:45,010
bricks when we're running out of space on the smaller screens.

86
00:05:45,250 --> 00:05:48,310
So we can take that into consideration later on and.

87
00:05:48,350 --> 00:05:53,930
For this position, I want to add one, because I don't like to start with zero, so let's do a refresh

88
00:05:53,930 --> 00:05:54,740
start game.

89
00:05:54,740 --> 00:05:55,910
So we've got one to 10.

90
00:05:55,910 --> 00:06:01,940
So we created the ten bricks and they're all nice and colorful, random colors using that random color.

91
00:06:02,810 --> 00:06:08,990
So coming up next, will take care of that and we'll tweak and adjusted to make sure that we have a

92
00:06:08,990 --> 00:06:18,350
way to break out of our loop if we're encountering if the exposition or roll exposition has gotten too

93
00:06:18,350 --> 00:06:20,210
large that we want to break out of this.

94
00:06:20,720 --> 00:06:21,750
So I'll show you how to do that.

95
00:06:21,770 --> 00:06:22,520
Coming up next.