All language subtitles for 172 Adding Animation to Websites.en_US

Now wouldn't it be nice to see the buttons flash when we click it or press the key that corresponds

to it? That way the user will know that they pressed the right key and they're getting the right sounds.

Now given that we want this animation to happen both when the button gets pressed as well as when a

keyboard key gets pressed then we probably would want to create a function,

right?

So let's create this new function called buttonAnimation, and we're going to need a parameter to be passed

in which is the current key and we can call this function in both places where we call makeSound.

So in this case we've added an event listener to all eight drum buttons and then when one of them gets

clicked then it carries out this function.

And inside this function not only do we want to make sound using the current key but we also want to

generate the button animation.

So let's call our method up here.

And it's of course called buttonAnimation, and we're going to pass in the key of the button that was triggered.

So that's going to be the same as our buttonInnerHTML.

So it's going to be exactly the same as before.

So we're just going to add buttonInnerHTML.

Now in the case of our keyboard key press we're also going to call that method buttonAnimation, and

in this case we're going to pass in the event.key.

So now in both cases we're passing in exactly the same parameter and that is going to be a single character

corresponding to the key or the button that was pressed.

So now that we have that value inside here, we can use it to generate the animation.

So remember that in our index.html, we have seven buttons which all have these classes assigned to

them and all seven of them have the class drum but they each have a different class depending on what's

the letter inside the button.

So we can use this in order to query our document for that selector. So we can say querySelector say

.w.

So that's going to be the element that has a class of w.

Then we get back our w drum, this one here.

And we can do the same thing with any of the other ones,

say k, then we get the k drum over here.

Now notice that when we use querySelector, we have to say dot and then the name of the class.

It's just the same as in our CSS. So over here, if we want to query our document that has the class

of the current key then we have to write document.querySelector,

and we can add the current key, but the current key is just a single character and we need to concatenate

a full stop

in addition to the current key, so that we get the same format as we've got here, .w or .k.

So now that we found the button that has the current key let's assign this to a variable called

activeButton.

Now this is the button that we're going to change it's style and the style that we want to apply has

already been defined in our style.css.

So in the here I've already created a class called pressed, and pressed basically applies a shadow and

also a transparency to whatever element that we add this class to.

So I want you to try and think back to the lessons where we spoke about how we can add a class to an element

using Javascript. And you might have to think back a few lessons but try and see if you can complete

this challenge by adding the pressed class to the activeButton.

So as always it's good to test out your code inside the console.

So let's just select the h1 by saying document.querySelector("h1"), and we're going to tap into

its class list.

And remember this is the list of classes that it has applied to it which currently is nil.

Now once we've gotten the class list we can add new classes,

for example this pressed class.

And if I hit enter now you can see that shadow and that transparency gets applied to our

h1.

Now this is exactly what we want to happen,

but to the button that got pressed. So we know the element that we want to apply it to, the activeButton,

and all we have to do is just tap into its class list and add the class of pressed.

So now let's refresh our page and you can see that when I click on any of the buttons that transparency

and the shadow gets applied to the button.

Now there's just one problem.

This doesn't come back.

We kind of want it to have this depressed mode and then come back to the original,

so it looks like it's an animation.

But in this case I can't generate that effect ever again

if I clicked on one button.

So how can we do that?

Well, in order to do this, we need this line of code to be run,

and then after a delay of, say, I don't know, 0.1 second, we want this class to be removed again,

so we get back to the original look.

So how can we do this using Javascript?

Well let's see what we can find online.

So we're looking for a timeout function in Javascript, and the first result we get back is from W3 Schools,

and it's a method called setTimeout.

And you can see that in their demo code that when you run this line of code that it will wait three seconds

and then it'll generate an alert that says "Hello".

So this is exactly what we want.

So let's look at how this method is structured.

You can see that this is the syntax and the first parameter is the function.

So this is the function that will be executed after a certain amount of time.

And the second parameter is how much time to wait before running this function.

So let's try it out in our code.

So we're going to write setTimeout, and the first parameter is going to be the function that we want

to be executed.

So we're going to use an anonymous function just as we have done before and we're going to specify what

we want to happen.

So in this case we want our activeButton's classList to remove that pressed class so that it goes back

to the original state, and the second parameter is the amount of time that we're going to wait before

we run this function.

So I think, through some testing, it seems like 0.1 second seems to work best.

So now we've got our active button that is found based on the current key that got pressed, and then we

add the pressed class to give it that style of the shadow and the transparency,

and then finally after a wait of about 0.1 seconds then we remove that class from the class

list.

So let's see what this looks like in action.

Pretty neat, right? And if all goes well, it should also work for our key press event, because when the key press

is detected then this function gets called and we can tap into the event that triggered the key press

by using event.key, which then gets passed into a method called buttonAnimation, and it will do exactly

the same thing as it did for the button. That looks pretty cool, right?

So I hope you had fun in this module building your very own drum kit web site, and in the process learning

more about the Document Object Model and some of the more advanced parts of Javascript.

Now in the next module we're going to jump even deeper and we're going to learn about a popular Javascript

framework called jQuery.

So for all of that and more fun projects, I'll see you on the next module.