1
00:00:00,420 --> 00:00:05,490
Welcome in this lesson, we are going to be setting up our dice roller game, so there are a few things

2
00:00:05,490 --> 00:00:11,840
that we need to set up before we begin with the JavaScript, and that's the CSF as well as the HTML.

3
00:00:12,090 --> 00:00:18,120
So creating our basic HTML structure, we're going to start with a main div that's going to contain

4
00:00:18,120 --> 00:00:25,380
all of our game area so we can call that game area and we can have all of the gameplay occurring within

5
00:00:25,380 --> 00:00:26,160
the game area.

6
00:00:26,430 --> 00:00:29,480
Next, set up a div, we can give it an ID.

7
00:00:29,520 --> 00:00:33,650
So how about we use IDs and we can give it an idea of output.

8
00:00:33,900 --> 00:00:40,320
So this is where we can provide messaging to the players as to what the dice roll was and who is the

9
00:00:40,320 --> 00:00:41,340
winner and so on.

10
00:00:41,640 --> 00:00:47,670
Next, we need a container area for player one and this can be added as well.

11
00:00:47,820 --> 00:00:49,860
And we also need one for player two.

12
00:00:50,070 --> 00:00:55,560
So the player one is the player on the computer and the player two is going to be actually the computer.

13
00:00:55,800 --> 00:01:02,220
And we also need a button in order to initiate the rolling of the dice.

14
00:01:02,580 --> 00:01:08,370
So we'll set up a button, give it some HTML, enter text there of roll.

15
00:01:08,670 --> 00:01:10,140
So that's that setup.

16
00:01:10,390 --> 00:01:13,950
Also, we need to add in a little bit of success.

17
00:01:14,250 --> 00:01:16,710
So we've got player one and player two.

18
00:01:17,430 --> 00:01:24,960
So both of those and we can do inline block setting up a default width at a border so that we can see

19
00:01:24,960 --> 00:01:29,090
it add some padding as well and make this really big.

20
00:01:29,340 --> 00:01:36,030
So seven m also want to add some styling to the output area and of course you can customize the styling

21
00:01:36,030 --> 00:01:36,720
as needed.

22
00:01:36,940 --> 00:01:42,900
Then lastly, let's add some styling to the button and set a width for the button to be the same as

23
00:01:43,170 --> 00:01:44,390
the player area.

24
00:01:45,180 --> 00:01:47,130
So let's try that out and refresh it.

25
00:01:48,120 --> 00:01:49,530
I'll make this a little bit smaller.

26
00:01:50,250 --> 00:01:51,780
So that also shows up on one page.

27
00:01:52,050 --> 00:01:54,990
So there we have our basic structure and setup.

28
00:01:55,200 --> 00:01:56,820
We want the button to be clickable.

29
00:01:56,940 --> 00:02:02,160
When the button gets clicked, then we're going to output some information for the player and determine

30
00:02:02,160 --> 00:02:04,020
who wins within the state game.

31
00:02:04,200 --> 00:02:05,580
So go ahead and set this up.

32
00:02:05,580 --> 00:02:08,250
You don't have to do the styling exactly as I've done.

33
00:02:08,490 --> 00:02:13,320
This was only for demonstration purposes so that we have a nice layout to build out the game.

34
00:02:13,320 --> 00:02:18,330
And coming up next, it's going to be JavaScript, all JavaScript, building out all of the gameplay

35
00:02:18,330 --> 00:02:22,920
and what gets displayed to the player and all the interaction and dynamic content.

36
00:02:23,070 --> 00:02:25,290
So that is all still yet to come.