1
00:00:01,280 --> 00:00:06,020
In this lesson, I'm going to be showing you how you can light up these squares when they get clicked

2
00:00:06,110 --> 00:00:10,510
and then also have them go back to that half opacity value.

3
00:00:10,970 --> 00:00:16,460
And we saw in the earlier lesson that we can hit start and we can start building out our sequence.

4
00:00:16,670 --> 00:00:19,550
But really, we have no indication of that.

5
00:00:19,550 --> 00:00:20,680
These are being clicked.

6
00:00:20,990 --> 00:00:26,600
So going into our Czech answer, this is where we have all of the functionality of that element that

7
00:00:26,600 --> 00:00:27,200
gets clicked.

8
00:00:27,470 --> 00:00:32,360
First of all, we're grabbing and we're building out that sequence of the user clicks.

9
00:00:32,750 --> 00:00:37,900
Next, we can take that element and apply style to it.

10
00:00:38,360 --> 00:00:41,240
So using style and opacity.

11
00:00:41,600 --> 00:00:50,030
So just as we set it to zero point five up here, we can take that value and we can set it to one down

12
00:00:50,030 --> 00:00:50,330
here.

13
00:00:50,630 --> 00:00:52,640
So this is going to make it full color.

14
00:00:53,180 --> 00:01:01,370
And then using JavaScript set timeout, which calls a function, executes a set of code after a specified

15
00:01:01,370 --> 00:01:01,770
delay.

16
00:01:02,120 --> 00:01:04,130
So we want to set a timeout.

17
00:01:04,520 --> 00:01:10,460
And within this set timeout function, we've got another function in here and this is the code that's

18
00:01:10,460 --> 00:01:10,990
going to run.

19
00:01:11,240 --> 00:01:19,370
So we're going to update and we're going to take that element, update the style opacity and send it

20
00:01:19,370 --> 00:01:23,200
back to being zero or zero point five.

21
00:01:23,870 --> 00:01:26,630
So equaling it to what it initially was.

22
00:01:27,290 --> 00:01:31,870
And with the time out, we can specify how long of a timeout we want.

23
00:01:31,910 --> 00:01:34,790
So I'm going to set it to five hundred milliseconds.

24
00:01:35,180 --> 00:01:35,870
So we'll see.

25
00:01:35,870 --> 00:01:43,130
Now, what's going to happen is when we refresh it and we start, you'll see that it's going to light

26
00:01:43,130 --> 00:01:45,050
up red, it's going to light up green.

27
00:01:45,170 --> 00:01:51,290
So the user actually is going to know which colors are being selected and being pressed.

28
00:01:51,500 --> 00:01:57,730
And we can also use the same trick when we are building out the sequence that the user has to follow.

29
00:01:58,040 --> 00:02:02,720
And I'll show you how to do that in the upcoming lesson where we're going to build out and create the

30
00:02:02,720 --> 00:02:04,820
sequence that the player has to follow.

31
00:02:04,850 --> 00:02:06,410
So that's still to come in the next lesson.

32
00:02:06,590 --> 00:02:14,780
So go ahead and add this functionality, use the set time out method from JavaScript in order to update

33
00:02:15,290 --> 00:02:22,160
after a certain amount of time and send that element style back to what it initially was.