1
00:00:01,500 --> 00:00:10,380
Let's go back into JavaScript and we're going to actually generate a visual dyce within our HTML, all

2
00:00:10,380 --> 00:00:11,680
using JavaScript.

3
00:00:11,970 --> 00:00:17,310
I've stripped out quite a bit of the functionality from the previous lesson I've kept in the role,

4
00:00:17,460 --> 00:00:22,140
because we want to still keep that creating random number from whatever.

5
00:00:22,140 --> 00:00:28,270
We're rolling all the way up to one all the way through to six and then returning back that number.

6
00:00:28,320 --> 00:00:36,510
I've also kept the button of that Lessner on the button element and I've updated the div to have a class

7
00:00:36,510 --> 00:00:42,120
of output and using the query selector, selecting the element with a class of output.

8
00:00:42,480 --> 00:00:44,870
So we're ready to move on to the next step.

9
00:00:45,000 --> 00:00:47,790
And this is where we're going to build out our role.

10
00:00:48,540 --> 00:00:58,170
So setting up a variable, we can call it roll dice and we've only going to have a Wondai using the

11
00:00:58,170 --> 00:00:59,900
function that we've used earlier.

12
00:01:00,360 --> 00:01:05,940
Returning back six, we're going to console log out whatever the roll of the dice was.

13
00:01:06,450 --> 00:01:08,370
So this is going to give us a numeric value.

14
00:01:08,670 --> 00:01:15,600
So just as before, we can get random generic values all the way from one to six.

15
00:01:15,780 --> 00:01:19,580
And that's what's being returned back from our function that we built out earlier.

16
00:01:20,010 --> 00:01:26,310
So we want to do is we want to build some dice and we're going to create a function in order to build

17
00:01:26,310 --> 00:01:26,820
the dice.

18
00:01:27,030 --> 00:01:33,630
And we want to just pass in this numeric value so we can build out dice, whatever number we want.

19
00:01:33,780 --> 00:01:36,420
We can build out the dice to represent that number.

20
00:01:36,570 --> 00:01:43,630
And that means that adding in the dots that we need in order to represent that number on the dice themselves.

21
00:01:44,370 --> 00:01:49,950
So let's create an element we're just going to call it and building out a function called builder.

22
00:01:50,430 --> 00:01:53,550
And this is going to contain the value of roll dice.

23
00:01:53,730 --> 00:01:58,290
So remember, again, this is a value anywhere from one to six.

24
00:01:59,010 --> 00:02:06,870
Next, adding in the function that builder function, passing in the number value in the argument.

25
00:02:07,980 --> 00:02:12,290
We want to first start out by creating our main container.

26
00:02:13,050 --> 00:02:14,820
So using the document.

27
00:02:16,670 --> 00:02:20,090
Create element method in JavaScript.

28
00:02:21,750 --> 00:02:27,210
Allows us to dynamically create elements, the element that we want to create is going to be a dip.

29
00:02:27,240 --> 00:02:32,010
So for now, we're going to return back that Divx object that we've created and now it's going to be

30
00:02:32,010 --> 00:02:35,630
represented within the variable holder.

31
00:02:35,760 --> 00:02:45,960
And we can use that to output it using append child, which allows you to add in elements to other elements.

32
00:02:46,140 --> 00:02:53,190
So we're selecting that output and we're using append child method to add in that returned object,

33
00:02:53,190 --> 00:02:56,460
which is represented in Holder onto our page.

34
00:02:56,580 --> 00:02:58,610
And we don't see a whole lot happening.

35
00:02:58,620 --> 00:03:04,080
But I when we go into inspect, you're going to see that we generate it with an output.

36
00:03:04,260 --> 00:03:09,390
We've got a brand new div and the more we click it, the more divs we're generating.

37
00:03:09,630 --> 00:03:16,920
And within this div, I want to apply a class to it so we can add that in here where we can do div.

38
00:03:17,250 --> 00:03:23,490
So getting that div object that we just freshly created using set attribute and the attribute that we're

39
00:03:23,490 --> 00:03:28,830
going to set is class and the value that we're going to associate it to it is deicer.

40
00:03:28,840 --> 00:03:33,580
So that's the class that we're going to add in going up into our style.

41
00:03:34,080 --> 00:03:41,130
Let's create a class of deicer and this is the way that the dice are going to be represented visually

42
00:03:41,310 --> 00:03:42,420
within our page.

43
00:03:42,630 --> 00:03:47,940
Set a width so we can have a width of 90 picks and a height of 90 picks as well.

44
00:03:48,240 --> 00:03:54,600
So it's a square and I'm going to add in border radius to make it slightly rounded at the corners.

45
00:03:54,990 --> 00:03:56,130
So let's see what that looks like.

46
00:03:56,490 --> 00:04:00,090
So now when we refresh, go back into the console.

47
00:04:00,540 --> 00:04:04,980
When we hit roll, we see that we're adding in multiple dice.

48
00:04:05,550 --> 00:04:11,280
And what we actually want to do is we want to remove the dice so that we've only got that one element

49
00:04:11,280 --> 00:04:11,550
there.

50
00:04:11,680 --> 00:04:13,960
And I'll show you how to do that in the upcoming lesson.

51
00:04:14,340 --> 00:04:22,050
So for now, build out, create a new brandnew function that's going to create a div, add a class of

52
00:04:22,050 --> 00:04:29,310
dicer to that div, return it back into the element that called it, setting it in that variable and

53
00:04:29,310 --> 00:04:35,610
then adding in that newly created a div to the output element on your page.

54
00:04:35,760 --> 00:04:37,560
So add that functionality in.

55
00:04:37,710 --> 00:04:44,460
When you click the button it's going to add in a new div appended to your output element.