1
00:00:00,770 --> 00:00:07,400
In the previous lesson, we saw how we can generate this cube with the different color blocks within

2
00:00:07,400 --> 00:00:07,550
it.

3
00:00:08,630 --> 00:00:14,540
And now we want to make these elements that we've created using JavaScript to be interactive.

4
00:00:15,080 --> 00:00:22,250
Now, of course, you could build these elements and then loop through them from the DOM and then add

5
00:00:22,250 --> 00:00:23,750
event listeners that way.

6
00:00:23,910 --> 00:00:30,170
But there is a much easier way where we can add the event listener as we're building out those elements.

7
00:00:30,530 --> 00:00:36,140
So we've got an object called d'Hiv that we're creating an element out of, and we can add an event

8
00:00:36,140 --> 00:00:39,710
listener directly in that element as we're creating it.

9
00:00:40,400 --> 00:00:42,820
And I'm going to just simply check answer.

10
00:00:42,830 --> 00:00:45,420
So run a function called check answer.

11
00:00:46,340 --> 00:00:48,220
So we need to create that function as well.

12
00:00:49,160 --> 00:00:55,100
Usually whenever I create a function, I like to always have the corresponding function already ready

13
00:00:55,100 --> 00:00:55,510
to go.

14
00:00:55,820 --> 00:01:01,140
So that usually avoids the errors of wondering what happened to that function that I've created.

15
00:01:01,550 --> 00:01:08,270
There's a few other things that we need to add in, and I also want to set the opacity style of these

16
00:01:08,270 --> 00:01:11,690
elements because I want it to go a little bit lighter.

17
00:01:11,700 --> 00:01:14,450
I don't want it to be a full color opacity.

18
00:01:14,750 --> 00:01:17,270
So this is where we're selecting the style.

19
00:01:17,450 --> 00:01:24,710
And just as we updated the background, we can update the opacity of the style and opacity, five point

20
00:01:25,220 --> 00:01:25,730
zero.

21
00:01:26,800 --> 00:01:34,210
Sounds like a good number and obesity can be anywhere from zero, which would be completely not visible

22
00:01:34,210 --> 00:01:34,930
to one.

23
00:01:35,470 --> 00:01:42,490
And I also want to add in a hidden value where we're just going to add into the object the divx that

24
00:01:42,490 --> 00:01:49,840
we're creating and add in whatever the value of game colors is, because we probably will need this

25
00:01:50,110 --> 00:01:54,820
as we check the answer that we want to return back, whatever that color is.

26
00:01:55,420 --> 00:01:56,650
And I'll show you how that works.

27
00:01:56,680 --> 00:01:58,480
So now within the console.

28
00:02:00,100 --> 00:02:08,650
We can pick up we can pick up the element that's being used to create a brand new function, call it

29
00:02:08,650 --> 00:02:15,300
element, so we're getting E target and that accesses the element that invoked the click.

30
00:02:15,790 --> 00:02:21,820
So we're getting all of that E target information, sending it in as element and a first show you what's

31
00:02:21,820 --> 00:02:22,930
being contained within there.

32
00:02:23,110 --> 00:02:29,320
So now when I click any of these, we get all of that element information and you notice that my color

33
00:02:29,320 --> 00:02:30,950
is not listed anywhere.

34
00:02:31,120 --> 00:02:36,090
That's because that's hidden and we actually can access it using JavaScript.

35
00:02:36,610 --> 00:02:38,490
So it's kind of hidden in the background there.

36
00:02:38,500 --> 00:02:43,090
And now when I select my color, I know which color was clicked.

37
00:02:43,090 --> 00:02:48,850
So I can see yellow got clicked, blue got clicked, red got clicked and green got clicked.

38
00:02:49,480 --> 00:02:57,700
So go ahead and add these updates into your own project where when you're generating the div, add in

39
00:02:57,700 --> 00:03:06,010
the event listener, as well as adding that hidden value within that element object and then pick up

40
00:03:06,010 --> 00:03:12,480
that information using the Czech answer function the same way that I've done that within the code.

41
00:03:12,880 --> 00:03:16,030
So add that in, try it out, make sure it's working.

42
00:03:16,180 --> 00:03:21,490
When you click these boxes that you're seeing what the color is that you've clicked.

43
00:03:22,880 --> 00:03:26,660
And coming up next, we're going to continue to build out this game application.