1
00:00:00,090 --> 00:00:06,330
This lesson, we are going to be setting up our Temel for our Rock, Paper Scissors game, and then

2
00:00:06,330 --> 00:00:11,910
coming up, we're going to hook in the JavaScript and make things happen when you're building out an

3
00:00:11,910 --> 00:00:12,740
application.

4
00:00:12,780 --> 00:00:15,240
We usually start with the fundamentals.

5
00:00:15,240 --> 00:00:21,160
So the HTML core structure of the application are going to need a spot to place a score.

6
00:00:21,720 --> 00:00:26,930
So add that in also creating a div and I'm just going to simply create some dips for this.

7
00:00:27,240 --> 00:00:33,660
We need a message area so that we can provide messaging to the player and we're going to need some buttons

8
00:00:33,660 --> 00:00:35,030
to create interaction.

9
00:00:35,400 --> 00:00:41,160
So simply create some buttons and I'm going to give all of these buttons different in HTML.

10
00:00:41,400 --> 00:00:43,130
So we've got a button for rock.

11
00:00:43,170 --> 00:00:47,190
We're going to have a button for papers and we're going to have a button for scissors.

12
00:00:47,730 --> 00:00:55,200
So build out the three buttons, add in the labeling for the buttons or the inner text in our HTML.

13
00:00:55,780 --> 00:00:57,930
We can go out and refresh the page.

14
00:00:58,080 --> 00:01:01,870
And this is our basic structure that we're going to need for the gameplay.

15
00:01:02,130 --> 00:01:07,080
The idea is that the player is going to either pick rock, paper or scissors.

16
00:01:07,290 --> 00:01:10,110
The computer is going to roll a random value.

17
00:01:10,140 --> 00:01:15,840
So either rock, paper, scissors and then depending on which one wins, we're going to update the score

18
00:01:15,840 --> 00:01:22,440
accordingly and also output a message for the player in order to be able to understand what happened.

19
00:01:22,440 --> 00:01:24,660
Results of the gameplay next.

20
00:01:24,660 --> 00:01:31,130
Let's add in our JavaScript, they're going to start by setting up some constant variables.

21
00:01:31,560 --> 00:01:35,040
So the first variable that we're setting up is going to be message.

22
00:01:35,220 --> 00:01:41,120
And we're going to attach this as an object into the element with the class of message.

23
00:01:41,880 --> 00:01:44,570
So we're selecting classes with query selector.

24
00:01:44,850 --> 00:01:47,370
It's the same way as we do with success.

25
00:01:47,610 --> 00:01:50,030
So we do the dot notation for a class.

26
00:01:50,040 --> 00:01:54,150
I can make this a little bit smaller because we don't need as much real estate within the browser,

27
00:01:54,300 --> 00:02:02,190
setting up another object four score and that's document you can use query selector again to select

28
00:02:02,220 --> 00:02:08,130
that particular element with the class of score and then we can add that into our JavaScript and we

29
00:02:08,130 --> 00:02:10,120
also want to select all of our buttons.

30
00:02:10,260 --> 00:02:16,260
So using a document and this time we're using query selector all because we want to grab all of the

31
00:02:16,260 --> 00:02:17,190
available buttons.

32
00:02:17,430 --> 00:02:19,610
And as we know within the page, there's three of them.

33
00:02:19,830 --> 00:02:24,150
So if we were to use query selector, we would simply be selecting the first one.

34
00:02:24,360 --> 00:02:28,650
And we want to actually select all of them because we want to have interactivity on all of them.

35
00:02:29,100 --> 00:02:33,620
And they're all within the same format where they're using the button tag.

36
00:02:34,110 --> 00:02:37,750
And what this is going to do is this is going to build a node list of the buttons.

37
00:02:37,770 --> 00:02:42,720
We're going to have to loop through that node list in order to make them interactive, to add event

38
00:02:42,720 --> 00:02:43,200
listeners.

39
00:02:43,770 --> 00:02:48,450
And as you can see, there's our node list of all of the buttons I'm using Chrome.

40
00:02:48,450 --> 00:02:54,990
So whenever I hover over any of these elements within the node list, you see that it also lights up

41
00:02:54,990 --> 00:02:57,860
here in the top with the associated element.

42
00:02:58,170 --> 00:03:06,600
So go ahead and set this up, build out your HTML and then link to that each HTML as objects in JavaScript

43
00:03:06,750 --> 00:03:08,730
and you can be ready to move on to the next step.

44
00:03:09,000 --> 00:03:14,730
We're going to build building out some interaction and adding event listeners to the objects within

45
00:03:14,730 --> 00:03:15,170
the page.

46
00:03:15,180 --> 00:03:15,990
So it's still to come.