1
00:00:00,210 --> 00:00:05,460
Hey, welcome to our quick mini project, and the objective of this project or the challenge for this

2
00:00:05,460 --> 00:00:09,810
project is to create some, many days that there's a button and it rolls.

3
00:00:09,810 --> 00:00:14,550
The dice and the dice are actually created all using a JavaScript.

4
00:00:14,650 --> 00:00:19,070
Hey, I'm going to give you a quick preview of what we're going to be creating in the upcoming lesson.

5
00:00:19,380 --> 00:00:23,010
So this is going to be a dice roll where we've got a button.

6
00:00:23,280 --> 00:00:30,150
And when you press the button, it's going to create dice where we've got the squares for three and

7
00:00:30,180 --> 00:00:30,580
one.

8
00:00:30,840 --> 00:00:33,570
So in this case, the rule was a three and a one.

9
00:00:33,760 --> 00:00:37,620
So we've got the pattern up here for the array pattern of where the dots go.

10
00:00:37,860 --> 00:00:40,110
Roll the dice again, a one and a five.

11
00:00:40,290 --> 00:00:45,780
So we got that output here within the console and as well as we've got the visuals for the users that

12
00:00:45,780 --> 00:00:46,960
are rolling the dice.

13
00:00:47,010 --> 00:00:49,950
So this is all created just using and JavaScript.

14
00:00:49,960 --> 00:00:52,000
So there's nothing else but JavaScript.

15
00:00:52,290 --> 00:00:57,450
So when we create all of the HTML, this is all created using a JavaScript.

16
00:00:57,460 --> 00:01:04,380
So we're creating the button as well as we're creating the HTML and applying all of the staling all

17
00:01:04,380 --> 00:01:05,760
done via JavaScript.

18
00:01:05,790 --> 00:01:07,130
So this is all dynamic.

19
00:01:07,350 --> 00:01:14,160
So every time we roll it, it updates and visually represents the days that have been rolled.

20
00:01:14,280 --> 00:01:20,790
So we've got two days here and we can actually with our code, it's fairly dynamic where we can create

21
00:01:20,790 --> 00:01:21,740
multiple days.

22
00:01:21,930 --> 00:01:27,430
So it's simply generating the days for the various areas that we've already created within the JavaScript.

23
00:01:27,720 --> 00:01:30,280
So let's get started and create this from scratch.

24
00:01:31,320 --> 00:01:37,840
And as you can see, there's no HTML here that when the page loads, it's all done with just JavaScript.

25
00:01:38,250 --> 00:01:39,660
So let's get to it.

26
00:01:39,670 --> 00:01:46,530
And we want to have to it to piece two days or two die showing up on the screen and also one button

27
00:01:46,530 --> 00:01:53,280
that we can click and the JavaScript has to generate the dice and not using any staling, only just

28
00:01:53,280 --> 00:01:54,060
JavaScript.

29
00:01:54,090 --> 00:01:54,930
So let's get to it.

30
00:01:54,960 --> 00:01:58,380
So first of all, let's create our first object and that's going to be a button.

31
00:01:58,680 --> 00:02:04,050
So document create element and the element that we're creating as a button.

32
00:02:04,300 --> 00:02:08,100
So we're going to make this clickable and we'll apply some styling to that as well.

33
00:02:08,730 --> 00:02:15,600
So the button text content is going to just say roll, roll, dice

34
00:02:18,300 --> 00:02:21,060
and let's create a mean container.

35
00:02:22,410 --> 00:02:23,730
I'll call it play area.

36
00:02:24,240 --> 00:02:27,690
And that document so create elements.

37
00:02:27,690 --> 00:02:30,780
And the element that we're creating is going to be a div.

38
00:02:31,230 --> 00:02:32,090
So we create that.

39
00:02:32,460 --> 00:02:36,740
And now let's add the play area to our screen.

40
00:02:36,870 --> 00:02:40,110
So let's create the play area and add it to the screen.

41
00:02:41,750 --> 00:02:50,300
So document body, so body already exists as an object, that's what I'm able to add and append the

42
00:02:50,300 --> 00:02:51,100
play area.

43
00:02:53,410 --> 00:03:01,180
And I'm actually if I want it to move it above the JavaScript, I can use prepend, so that will actually

44
00:03:01,180 --> 00:03:02,180
place it above.

45
00:03:03,190 --> 00:03:04,600
So just to show you what I mean.

46
00:03:05,600 --> 00:03:11,540
So we wanted to have the d'Hiv sitting above the script tags, so prepend prepared, if we use appended

47
00:03:11,540 --> 00:03:12,770
or place that afterwards.

48
00:03:13,700 --> 00:03:22,280
And we also want to add in to the play area, we want to append and add in the button object.

49
00:03:22,670 --> 00:03:26,710
So that will show a button on the page, which just shows up.

50
00:03:26,720 --> 00:03:28,320
It doesn't do anything quite yet.

51
00:03:28,820 --> 00:03:34,910
So going back into the code, so we need a way to generate some dice and we know what this we want to

52
00:03:34,910 --> 00:03:37,010
make it visually so that we see the dice.

53
00:03:37,550 --> 00:03:43,400
So we're going to have to generate this and using our JavaScript code in order to do that.

54
00:03:43,700 --> 00:03:46,990
So first of all, we need to have two container areas for the dice.

55
00:03:47,630 --> 00:03:52,870
So let's construct those two areas and we're just going to create them separately.

56
00:03:53,660 --> 00:04:02,060
We'll have area one and document create elements and the element is going to be a div.

57
00:04:05,630 --> 00:04:16,310
And then we're going to do the same thing for Area two and also a div and then also using the play or

58
00:04:16,430 --> 00:04:19,220
the play area we're going to spend.

59
00:04:21,810 --> 00:04:30,720
Both of the dice, so we have an option here to add in a mean container for this element and we can

60
00:04:30,720 --> 00:04:32,260
do that or we don't have to.

61
00:04:32,280 --> 00:04:34,440
So it's up to it's up to us how we do that.

62
00:04:34,620 --> 00:04:38,850
We just have them both floating beneath or we can have the main container area.

63
00:04:39,510 --> 00:04:48,570
So if you do want to add a container, we just need to create another element and another device so

64
00:04:48,570 --> 00:04:57,180
that we can contain this content that we're going to be applying the styling so clear area append container

65
00:04:58,290 --> 00:05:00,060
and then within the container.

66
00:05:01,230 --> 00:05:14,670
We need to append area one and container of hand, area to and we don't have any content in them yet.

67
00:05:14,670 --> 00:05:16,920
So let's add in some content.

68
00:05:17,190 --> 00:05:20,760
So area one text content.

69
00:05:22,970 --> 00:05:32,200
First dice, and we're going to be updating this visually, and that can be for the second days.

70
00:05:32,840 --> 00:05:35,270
So this is just so that we see what it looks like.

71
00:05:35,570 --> 00:05:38,600
I want to add in some borders around those elements.

72
00:05:39,200 --> 00:05:42,680
So let's create a function to add borders.

73
00:05:44,690 --> 00:05:49,180
So call it function at borders, because we do have two elements.

74
00:05:49,190 --> 00:05:55,190
So whatever element we want to add a border to, we're going to select the element that gets passed

75
00:05:55,190 --> 00:05:56,750
in style.

76
00:05:58,690 --> 00:06:06,430
Border and one thick solid, I will just do a black border, we could also make it more dynamic.

77
00:06:06,430 --> 00:06:12,600
We could pass in a few other options style and we'll also add in some padding to it.

78
00:06:12,610 --> 00:06:14,530
So 10 packs of padding.

79
00:06:16,090 --> 00:06:18,970
So let's add borders to each one of those elements.

80
00:06:28,240 --> 00:06:33,060
And add in boarders and then we can also do more complex styling if needed.

81
00:06:33,760 --> 00:06:44,290
But also let's update the font size so style font size and set the font size to a one point five.

82
00:06:45,580 --> 00:06:48,570
So this is just expecting a string value to be returned.

83
00:06:49,030 --> 00:06:53,380
So we refresh it and we've got the two font areas.

84
00:06:53,560 --> 00:07:00,610
So I also want to set some more styling where I want to set the width of each one of these and I want

85
00:07:00,610 --> 00:07:04,690
to equal that width to be 50 percent.

86
00:07:06,530 --> 00:07:13,370
And we already are going to have a problem because we do have a border, so we can just update it to

87
00:07:13,370 --> 00:07:14,270
40 percent.

88
00:07:16,260 --> 00:07:27,810
And also, let's take the elements and style float and what's left floated, so that way they're going

89
00:07:27,810 --> 00:07:29,130
to be in line with each other.

90
00:07:30,090 --> 00:07:32,530
So we've got our first base, our second base.

91
00:07:33,030 --> 00:07:35,280
Let's set up an element.

92
00:07:36,660 --> 00:07:45,900
Style, height, and let's equal rights to be able to do 300 pics.

93
00:07:50,980 --> 00:07:56,140
So maybe that's a little bit too big and actually, instead of guessing, we're going to just calculate

94
00:07:56,140 --> 00:08:02,230
whatever the witness because we've already said it to 40 percent so we can take that element and use

95
00:08:02,230 --> 00:08:04,860
its offset with value.

96
00:08:05,080 --> 00:08:08,100
So it's going to return back the offset with of the element.

97
00:08:08,380 --> 00:08:12,310
So when we resize, we see we get a height of one hundred and seventy.

98
00:08:12,550 --> 00:08:15,460
If we resize again, we get two or nine.

99
00:08:15,470 --> 00:08:17,590
So because it's slightly bigger, so.

100
00:08:18,710 --> 00:08:23,150
The size of it is now based on how wide of the screen we have it.

101
00:08:25,690 --> 00:08:31,720
So let's go back in, and that's setting up the two dicey areas, so now we have to populate it with

102
00:08:31,720 --> 00:08:32,650
some data.

103
00:08:32,920 --> 00:08:39,400
And what we want to do is we want to calculate out what values we need for having.

104
00:08:41,610 --> 00:08:45,550
The different dice, and we also want to add in the ability to roll.

105
00:08:45,900 --> 00:08:49,520
So let's first set up the event listener for Button.

106
00:08:50,220 --> 00:08:52,890
So let's go down here and take button.

107
00:08:53,730 --> 00:08:58,110
We're adding an event listener and the event is going to listen for a click.

108
00:08:58,500 --> 00:09:03,200
And whenever it gets clicked, then we are going to be rolling the dice.

109
00:09:03,930 --> 00:09:06,460
So we want to happen when we roll the dice.

110
00:09:06,900 --> 00:09:14,730
So what we want to do is we want to add content into text area one and area two, and we also want to

111
00:09:14,730 --> 00:09:17,090
roll random values for those.

112
00:09:17,760 --> 00:09:30,330
So let's take the we create a function that's going to roll value and it's going to roll a value into

113
00:09:30,330 --> 00:09:31,190
each one of those.

114
00:09:31,530 --> 00:09:34,050
So we've got area one and area two.

115
00:09:34,830 --> 00:09:39,590
So we're going to just add in values into those and we're going to run this function.

116
00:09:39,600 --> 00:09:41,030
So it's going to roll of value.

117
00:09:41,040 --> 00:09:43,710
So it's going to assign a new value to each one of those.

118
00:09:44,340 --> 00:09:50,310
And then we can use the console log and use area one.

119
00:09:51,750 --> 00:09:55,040
And I just put whatever value is going to be.

120
00:09:55,470 --> 00:10:00,510
So we're going to update the area objects with vowels, with values.

121
00:10:00,510 --> 00:10:01,740
And so we're going to do over here.

122
00:10:02,520 --> 00:10:13,110
So let's select area one because it's a global object and use the math random and order we want to do

123
00:10:13,110 --> 00:10:13,890
with math.

124
00:10:13,890 --> 00:10:16,320
Random Wanniassa, use the math for.

125
00:10:17,580 --> 00:10:24,470
Actually did the math floor, so actually we're getting the math random and the math or just needs to

126
00:10:24,470 --> 00:10:25,240
be reversed there.

127
00:10:25,520 --> 00:10:29,570
So it's in here is a math random because the math random itself.

128
00:10:29,930 --> 00:10:35,180
You can see in the console what their math random does is when we go into the console, type in math

129
00:10:35,180 --> 00:10:38,020
random, it's going to turn back a random number.

130
00:10:38,570 --> 00:10:44,450
So if we want to multiply it by six, because we've got six days, so it's going to turn back a random

131
00:10:44,450 --> 00:10:48,670
number from zero to five point nine nine nine.

132
00:10:48,890 --> 00:10:56,030
And that means that we also need to time that by six and then we need to add one to it.

133
00:10:56,600 --> 00:11:00,310
So we also need to round this down to the nearest value.

134
00:11:00,680 --> 00:11:03,720
So that's what math floor is going to do, or it's going to round it down.

135
00:11:03,980 --> 00:11:07,430
So multiply it by six and we're going to add one.

136
00:11:10,610 --> 00:11:16,840
And we can do this exact same thing for Area two, so it's a sign values to those.

137
00:11:17,510 --> 00:11:19,010
So let's see what happens.

138
00:11:19,130 --> 00:11:23,700
We roll the dice and now we're getting the random values being shown in there.

139
00:11:24,110 --> 00:11:32,060
We can also right now, we can update what is contained within the text content area for these elements.

140
00:11:32,060 --> 00:11:37,580
And of course, we are going to be generating out what it's going to look like, dice, and that's going

141
00:11:37,580 --> 00:11:38,810
to be all using JavaScript.

142
00:11:39,440 --> 00:11:47,030
So we can really simply just kind of do this where we've got the area one and the area two and getting

143
00:11:47,030 --> 00:11:48,040
the area to value.

144
00:11:48,530 --> 00:11:52,220
So the VAL is just going to be part of that element object.

145
00:11:52,220 --> 00:11:58,580
So it's not already a predefined value like we do have for tax content, but this is one that we've

146
00:11:58,580 --> 00:11:59,180
just created.

147
00:11:59,190 --> 00:12:03,710
So it's going to sit within these objects and it's kind of hidden away so we're not able to see it.

148
00:12:04,280 --> 00:12:08,660
So now whenever we roll, we're going to get the values of the roles being shown there.

149
00:12:09,050 --> 00:12:12,470
So we want to actually generate out what's going to look like dice.

150
00:12:13,040 --> 00:12:14,840
So it's going to be a little bit more complex.

151
00:12:14,840 --> 00:12:18,860
And for that, we're going to have to update the entire HTML.

152
00:12:19,130 --> 00:12:22,340
So let me update these to update the entire HTML.

153
00:12:23,180 --> 00:12:30,350
And we're going to create a function that is going to generate what's going to look like a value on

154
00:12:30,650 --> 00:12:38,750
the elements and creating the value Jen Dice.

155
00:12:39,590 --> 00:12:42,710
And it's going to need a value coming in.

156
00:12:46,590 --> 00:12:50,880
And so it's going to return back the HTML content for it.

157
00:12:51,870 --> 00:12:54,930
So using the generating that those values.

158
00:13:00,350 --> 00:13:06,880
And for here, we're going to return back some HTML content and for out we're just going to return back

159
00:13:06,880 --> 00:13:07,940
to the value of the day's.

160
00:13:09,520 --> 00:13:15,220
So it's still returning back those value, so now we want to generate some HTML for this.

161
00:13:17,440 --> 00:13:21,370
So next, let's create what the dice are going to look like.

162
00:13:21,400 --> 00:13:31,420
So depending on the dots, so for the dice, if you will create a multidimensional array and then within

163
00:13:31,420 --> 00:13:35,090
here we'll have what we want the dice to look like.

164
00:13:36,950 --> 00:13:38,450
So you need to create six of those.

165
00:13:39,580 --> 00:13:45,490
So when we think of how this is going to look, if we think of it in a grid like format where we've

166
00:13:45,490 --> 00:13:54,130
got one, two, three, four, five, six, seven, eight, nine across the grid, we want to what values

167
00:13:54,130 --> 00:13:57,380
do we want to color in, depending on what this looks like?

168
00:13:57,670 --> 00:14:01,390
So let's do five for one and four.

169
00:14:01,420 --> 00:14:04,120
Number two, we want to color in one and nine.

170
00:14:04,750 --> 00:14:08,620
For number three, we want to do one, five and nine.

171
00:14:09,010 --> 00:14:12,130
For number four, we want to do one three.

172
00:14:13,690 --> 00:14:23,810
Seven and nine, and that's four, so five is also going to have the center dot colored in.

173
00:14:24,390 --> 00:14:28,720
So one, two, three, four, five and I've got one extra array here.

174
00:14:29,050 --> 00:14:35,620
And for six, we're going to color in everything so all of the spots on the dice are going to get colored

175
00:14:35,620 --> 00:14:35,900
in.

176
00:14:36,310 --> 00:14:44,170
So that means that four and six and seven, eight, seven and nine are going to get colored in as well.

177
00:14:46,150 --> 00:14:49,760
So let's add these and coloring these in.

178
00:14:50,110 --> 00:14:58,330
So now we've got returned value for the array and we need to associate the array value with whatever

179
00:14:58,330 --> 00:15:00,310
value is being passed in here.

180
00:15:00,670 --> 00:15:06,010
So let's make a quick adjustment to here and we're not going to add the plus one because arrays are

181
00:15:06,010 --> 00:15:11,330
zero based so that whenever we're generating these values, we've got the winner.

182
00:15:11,350 --> 00:15:13,870
And of course, we can add in the plus one.

183
00:15:16,940 --> 00:15:21,140
If we need to of so right now we're just generating these.

184
00:15:23,030 --> 00:15:24,410
Random values.

185
00:15:27,550 --> 00:15:33,850
And then we're using these to make sure we've got what looks like dice being put put, so let's loop

186
00:15:33,850 --> 00:15:34,210
through.

187
00:15:36,790 --> 00:15:48,880
That X equals zero, and while X is less than nine, X equals X plus one, and this is where we're going

188
00:15:48,880 --> 00:15:55,720
to construct the HTML that we're returning, and that's going to be the estimate that we're going to

189
00:15:55,720 --> 00:15:56,090
return.

190
00:15:57,220 --> 00:16:02,470
And then just below, we're going to do HTML plus HTML and close off the div.

191
00:16:03,430 --> 00:16:07,540
So let's construct the what we want the elements to look like.

192
00:16:07,780 --> 00:16:12,260
So we want to have a series of span's there and they got to be 33 across.

193
00:16:12,940 --> 00:16:17,370
We also can select which pattern we want from the base view.

194
00:16:17,710 --> 00:16:23,680
So let's do that first or take the dice view and check to see what pattern we have.

195
00:16:24,250 --> 00:16:32,410
So just call this temp array and associate that to Docx view and we'll pull back whatever value we have.

196
00:16:33,750 --> 00:16:39,840
And right now, I can add that to the HTML just so that we can see what's being output or what.

197
00:16:39,850 --> 00:16:41,800
Actually, we'll just put it into the console.

198
00:16:42,610 --> 00:16:47,720
So console log and have the temporary array.

199
00:16:48,070 --> 00:16:51,520
So this is the array for whatever dice value we've got.

200
00:16:51,730 --> 00:16:52,690
So roll the dice.

201
00:16:53,290 --> 00:16:57,250
So we've got a four and a six and these are the patterns that we want to output.

202
00:16:57,370 --> 00:17:04,720
And of course these numbers are one less because these are going to be corresponding to the value without

203
00:17:04,720 --> 00:17:06,240
the plus one that we just removed.

204
00:17:06,550 --> 00:17:09,780
So we know what we've got, what we want the pattern to look like.

205
00:17:10,060 --> 00:17:17,950
So we want to check to see if value is included in the array and as we loop through and add in the span's.

206
00:17:18,250 --> 00:17:26,470
So let's do that or we've got HTML equals HTML plus spane and close off the span.

207
00:17:27,760 --> 00:17:30,120
So we roll the dice and we get these spans.

208
00:17:32,080 --> 00:17:35,860
So I want to also apply some style to the spam.

209
00:17:37,370 --> 00:17:49,760
With 33 percent and update the display in Line Block, we could also create a class for this and that's

210
00:17:49,760 --> 00:17:53,690
probably going to be a better option for us to just create a class for these.

211
00:17:54,290 --> 00:17:57,860
So right now, we're just adding in the axis and then we'll update and we'll create a class and we can

212
00:17:57,860 --> 00:17:58,550
apply the class.

213
00:17:58,880 --> 00:18:03,110
So what we want is X to show on the ones that we want it to show on.

214
00:18:03,500 --> 00:18:11,570
And the way that we do that is we can check to see if it's in the array.

215
00:18:11,570 --> 00:18:14,360
And if it is, then we add that value in.

216
00:18:14,630 --> 00:18:20,540
So let's tamp array includes.

217
00:18:22,860 --> 00:18:26,670
And the value that it includes is going to be X and we're actually.

218
00:18:27,770 --> 00:18:33,200
Have these numbered so we don't have starting at zero, so let's update this and it should be one to

219
00:18:33,200 --> 00:18:33,530
10.

220
00:18:34,310 --> 00:18:41,300
So if it includes X, then we're going to add this value.

221
00:18:42,410 --> 00:18:47,450
And if it doesn't include X, then the HMO value is not going to have anything.

222
00:18:47,450 --> 00:18:48,840
They're just going to have a blank space.

223
00:18:49,880 --> 00:18:51,080
So see what that looks like.

224
00:18:51,380 --> 00:18:52,140
So we roll.

225
00:18:52,670 --> 00:18:54,320
So the first value.

226
00:18:55,820 --> 00:18:59,180
Is going to be a one, and the second value is a four.

227
00:19:03,090 --> 00:19:09,480
So let's create a style, and I know I said we want to strictly do it with HTML, so, of course we

228
00:19:09,480 --> 00:19:13,710
can add in the additional style properties where we could have a height.

229
00:19:14,810 --> 00:19:22,580
So but we said up to 100 pics, so we have predefined widths and heights could be a little bit easier.

230
00:19:23,160 --> 00:19:24,650
So 100 picks.

231
00:19:25,080 --> 00:19:27,480
And also let's do one other update as well.

232
00:19:27,500 --> 00:19:31,190
So I'm going to pull all of this out so I don't have to keep updating them.

233
00:19:31,370 --> 00:19:37,130
And I'm going to do it just outside where I'm going to update the HTML with whatever value we've got.

234
00:19:37,130 --> 00:19:45,110
And I'm going to set that using the template literals and whatever the value is that we're creating.

235
00:19:45,320 --> 00:19:51,590
So let's create a temporary value and just set it to be blank and so that we can use this temporary

236
00:19:51,590 --> 00:19:54,620
value and add that into the code.

237
00:19:57,720 --> 00:20:00,130
So it's going to add that into the HTML.

238
00:20:00,350 --> 00:20:05,510
So this way we only have to reset the temporary value and just leave it as a space.

239
00:20:05,780 --> 00:20:12,230
So only if the temporary value includes, then we'll update it as an X.

240
00:20:12,260 --> 00:20:13,580
So let's see what that looks like.

241
00:20:14,540 --> 00:20:16,850
The Senate looks like we've got a syntax error.

242
00:20:16,850 --> 00:20:20,330
So in that unexpected token line 44.

243
00:20:22,630 --> 00:20:29,950
And that's because of brackets, it automatically closes that sort added in the extra Bartik.

244
00:20:30,670 --> 00:20:32,590
So let's see what's happening here.

245
00:20:37,560 --> 00:20:43,770
So these are supposed to be in position one and nine, so right now it's let's see what's happening

246
00:20:43,770 --> 00:20:44,040
here.

247
00:20:44,280 --> 00:20:51,930
And it's and that's because our main container should be set to 300 pics, so we shouldn't be creating

248
00:20:51,930 --> 00:20:52,770
it dynamically.

249
00:20:53,280 --> 00:20:54,630
So let's update that as well.

250
00:20:54,640 --> 00:21:05,700
So instead of this and this is going to sit with to be 300 pics, and that's why that is not fitting

251
00:21:05,700 --> 00:21:07,100
properly inside of there.

252
00:21:07,470 --> 00:21:10,470
And then we can also set the height to 300 pics.

253
00:21:11,830 --> 00:21:14,590
I'll leave the calculation in there for your reference.

254
00:21:14,590 --> 00:21:18,710
So if you ever do want to calculate the value dynamically, you can do that as well.

255
00:21:20,160 --> 00:21:25,950
And L style, let's update the background color.

256
00:21:29,930 --> 00:21:35,850
And I said it to Hex Colors or DDD let's see what that looks like.

257
00:21:36,230 --> 00:21:42,440
And so now we're quite a bit bigger and I do have the screen zoomed and that's why it's coming in so

258
00:21:42,440 --> 00:21:42,770
big.

259
00:21:43,940 --> 00:21:45,500
So let's try to roll the dice.

260
00:21:47,570 --> 00:21:53,960
So we got a two and then we got a nine, so they took up a little bit more space than I was expecting.

261
00:21:54,050 --> 00:21:59,540
Let's make the final adjustments and instead of outputting a value, this is going to be the background

262
00:21:59,540 --> 00:21:59,840
color.

263
00:21:59,850 --> 00:22:08,000
So instead of having an X there, we're just going to keep that empty and just have just a blank span

264
00:22:08,180 --> 00:22:11,310
and we're going to resize the width and the height of it.

265
00:22:11,870 --> 00:22:16,570
So, again, we're not going to need an X, but how about we include a color for the background color?

266
00:22:16,970 --> 00:22:20,340
So let's set the width and we've got 300 picks to play with.

267
00:22:20,360 --> 00:22:22,350
So let's do 90 and 90.

268
00:22:22,550 --> 00:22:24,740
So give us an option to do some margins.

269
00:22:25,440 --> 00:22:27,880
Let's also add in some other parameters.

270
00:22:27,890 --> 00:22:29,060
We've got the border

271
00:22:31,610 --> 00:22:34,510
radius, so that will turn it slightly rounded.

272
00:22:34,850 --> 00:22:36,500
But we did 20 picks for that.

273
00:22:36,830 --> 00:22:40,970
And then let's lastly the background color.

274
00:22:40,970 --> 00:22:46,300
And now this is going to be whatever the value of the temp file was.

275
00:22:46,820 --> 00:22:49,070
So we've got temp Vall there.

276
00:22:50,420 --> 00:22:54,290
And also, one other thing, let's go ahead and add in a margin.

277
00:22:56,240 --> 00:22:59,630
So two margin sounds just about right.

278
00:23:00,230 --> 00:23:06,860
So now let's go back out and we'll try it since we were old ones were older one and a five, a six and

279
00:23:06,860 --> 00:23:09,110
a three and a two and a one.

280
00:23:09,410 --> 00:23:10,520
A three and a five.

281
00:23:10,700 --> 00:23:12,320
We can see that in that output there.

282
00:23:13,040 --> 00:23:13,490
So that's it.

283
00:23:13,520 --> 00:23:19,310
So we were able to complete the dice in the rolling of the dice, all using JavaScript.

284
00:23:19,550 --> 00:23:25,720
And also this probably looks better as white, so make sure that it also matches the background.

285
00:23:25,850 --> 00:23:28,870
So let's update this background to be white as well.

286
00:23:29,630 --> 00:23:30,470
So refresh.

287
00:23:32,310 --> 00:23:33,210
So there's our dose.

288
00:23:35,610 --> 00:23:45,160
And also, if you want to make the border slightly and style, and these are just some finishing touches

289
00:23:45,210 --> 00:23:50,810
of border radius, Stu picks for the border radius.

290
00:23:51,150 --> 00:23:55,230
So then the entire dice are going to have border radius around it.

291
00:23:58,320 --> 00:24:01,770
And we might also even want to do a little tweak on the size.

292
00:24:03,720 --> 00:24:11,200
And you can make whatever adjustments you want, so making it fully dynamic and sizes, quite a bit

293
00:24:11,200 --> 00:24:14,440
of a challenge, so it's a little bit easier just to do it this way.

294
00:24:16,030 --> 00:24:23,980
And also, let's create some margins so that they're not right next to each other, so creating Tepic

295
00:24:24,010 --> 00:24:28,660
margin, so that will give us some spacing between each one of the days.

296
00:24:29,740 --> 00:24:30,300
So there we go.

297
00:24:31,000 --> 00:24:33,820
We've completed creating the dates, all using JavaScript.

298
00:24:35,050 --> 00:24:35,890
Now it's up to you.

299
00:24:36,010 --> 00:24:39,460
Have some fun with it, customize it and make it your own.