In this lesson, I'm going to be showing you how you can light up these squares when they get clicked
and then also have them go back to that half opacity value.
And we saw in the earlier lesson that we can hit start and we can start building out our sequence.
But really, we have no indication of that.
These are being clicked.
So going into our Czech answer, this is where we have all of the functionality of that element that
gets clicked.
First of all, we're grabbing and we're building out that sequence of the user clicks.
Next, we can take that element and apply style to it.
So using style and opacity.
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
here.
So this is going to make it full color.
And then using JavaScript set timeout, which calls a function, executes a set of code after a specified
delay.
So we want to set a timeout.
And within this set timeout function, we've got another function in here and this is the code that's
going to run.
So we're going to update and we're going to take that element, update the style opacity and send it
back to being zero or zero point five.
So equaling it to what it initially was.
And with the time out, we can specify how long of a timeout we want.
So I'm going to set it to five hundred milliseconds.
So we'll see.
Now, what's going to happen is when we refresh it and we start, you'll see that it's going to light
up red, it's going to light up green.
So the user actually is going to know which colors are being selected and being pressed.
And we can also use the same trick when we are building out the sequence that the user has to follow.
And I'll show you how to do that in the upcoming lesson where we're going to build out and create the
sequence that the player has to follow.
So that's still to come in the next lesson.
So go ahead and add this functionality, use the set time out method from JavaScript in order to update
after a certain amount of time and send that element style back to what it initially was.