WEBVTT 0 00:00.930 --> 00:08.130 Now wouldn't it be nice to see the buttons flash when we click it or press the key that corresponds 1 00:08.130 --> 00:14.150 to it? That way the user will know that they pressed the right key and they're getting the right sounds. 2 00:14.160 --> 00:20.370 Now given that we want this animation to happen both when the button gets pressed as well as when a 3 00:20.370 --> 00:25.230 keyboard key gets pressed then we probably would want to create a function, 4 00:25.350 --> 00:25.950 right? 5 00:26.310 --> 00:33.390 So let's create this new function called buttonAnimation, and we're going to need a parameter to be passed 6 00:33.390 --> 00:40.770 in which is the current key and we can call this function in both places where we call makeSound. 7 00:40.770 --> 00:47.550 So in this case we've added an event listener to all eight drum buttons and then when one of them gets 8 00:47.550 --> 00:51.360 clicked then it carries out this function. 9 00:51.360 --> 00:59.100 And inside this function not only do we want to make sound using the current key but we also want to 10 00:59.100 --> 01:01.130 generate the button animation. 11 01:01.140 --> 01:03.330 So let's call our method up here. 12 01:03.480 --> 01:09.630 And it's of course called buttonAnimation, and we're going to pass in the key of the button that was triggered. 13 01:09.660 --> 01:13.070 So that's going to be the same as our buttonInnerHTML. 14 01:13.170 --> 01:15.810 So it's going to be exactly the same as before. 15 01:15.810 --> 01:18.650 So we're just going to add buttonInnerHTML. 16 01:18.870 --> 01:24.720 Now in the case of our keyboard key press we're also going to call that method buttonAnimation, and 17 01:24.720 --> 01:28.300 in this case we're going to pass in the event.key. 18 01:28.560 --> 01:35.550 So now in both cases we're passing in exactly the same parameter and that is going to be a single character 19 01:35.820 --> 01:39.530 corresponding to the key or the button that was pressed. 20 01:39.570 --> 01:45.630 So now that we have that value inside here, we can use it to generate the animation. 21 01:45.630 --> 01:52.800 So remember that in our index.html, we have seven buttons which all have these classes assigned to 22 01:52.800 --> 01:59.400 them and all seven of them have the class drum but they each have a different class depending on what's 23 01:59.460 --> 02:01.770 the letter inside the button. 24 02:01.770 --> 02:08.790 So we can use this in order to query our document for that selector. So we can say querySelector say 25 02:09.120 --> 02:10.690 .w. 26 02:10.890 --> 02:14.770 So that's going to be the element that has a class of w. 27 02:15.030 --> 02:17.930 Then we get back our w drum, this one here. 28 02:18.420 --> 02:21.660 And we can do the same thing with any of the other ones, 29 02:21.710 --> 02:25.110 say k, then we get the k drum over here. 30 02:25.110 --> 02:30.820 Now notice that when we use querySelector, we have to say dot and then the name of the class. 31 02:30.900 --> 02:39.420 It's just the same as in our CSS. So over here, if we want to query our document that has the class 32 02:39.510 --> 02:44.090 of the current key then we have to write document.querySelector, 33 02:44.370 --> 02:52.680 and we can add the current key, but the current key is just a single character and we need to concatenate 34 02:52.980 --> 02:54.350 a full stop 35 02:54.390 --> 03:00.830 in addition to the current key, so that we get the same format as we've got here, .w or .k. 36 03:01.020 --> 03:09.180 So now that we found the button that has the current key let's assign this to a variable called 37 03:09.780 --> 03:10.670 activeButton. 38 03:10.680 --> 03:17.520 Now this is the button that we're going to change it's style and the style that we want to apply has 39 03:17.520 --> 03:20.750 already been defined in our style.css. 40 03:20.850 --> 03:27.930 So in the here I've already created a class called pressed, and pressed basically applies a shadow and 41 03:27.930 --> 03:33.860 also a transparency to whatever element that we add this class to. 42 03:33.870 --> 03:41.430 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 43 03:41.580 --> 03:47.160 using Javascript. And you might have to think back a few lessons but try and see if you can complete 44 03:47.160 --> 03:52.340 this challenge by adding the pressed class to the activeButton. 45 03:55.700 --> 03:59.760 So as always it's good to test out your code inside the console. 46 03:59.900 --> 04:08.990 So let's just select the h1 by saying document.querySelector("h1"), and we're going to tap into 47 04:08.990 --> 04:10.920 its class list. 48 04:11.300 --> 04:17.590 And remember this is the list of classes that it has applied to it which currently is nil. 49 04:17.790 --> 04:22.620 Now once we've gotten the class list we can add new classes, 50 04:22.790 --> 04:24.910 for example this pressed class. 51 04:25.150 --> 04:31.920 And if I hit enter now you can see that shadow and that transparency gets applied to our 52 04:31.950 --> 04:32.860 h1. 53 04:32.870 --> 04:35.190 Now this is exactly what we want to happen, 54 04:35.300 --> 04:41.120 but to the button that got pressed. So we know the element that we want to apply it to, the activeButton, 55 04:41.690 --> 04:50.260 and all we have to do is just tap into its class list and add the class of pressed. 56 04:50.280 --> 04:57.540 So now let's refresh our page and you can see that when I click on any of the buttons that transparency 57 04:57.630 --> 05:01.540 and the shadow gets applied to the button. 58 05:01.620 --> 05:03.390 Now there's just one problem. 59 05:03.660 --> 05:05.490 This doesn't come back. 60 05:05.490 --> 05:10.630 We kind of want it to have this depressed mode and then come back to the original, 61 05:10.650 --> 05:13.340 so it looks like it's an animation. 62 05:13.680 --> 05:17.330 But in this case I can't generate that effect ever again 63 05:17.340 --> 05:19.390 if I clicked on one button. 64 05:19.470 --> 05:21.040 So how can we do that? 65 05:21.360 --> 05:25.130 Well, in order to do this, we need this line of code to be run, 66 05:25.350 --> 05:32.940 and then after a delay of, say, I don't know, 0.1 second, we want this class to be removed again, 67 05:33.030 --> 05:35.410 so we get back to the original look. 68 05:35.430 --> 05:38.730 So how can we do this using Javascript? 69 05:38.730 --> 05:41.180 Well let's see what we can find online. 70 05:41.370 --> 05:50.450 So we're looking for a timeout function in Javascript, and the first result we get back is from W3 Schools, 71 05:51.000 --> 05:53.920 and it's a method called setTimeout. 72 05:54.420 --> 06:00.510 And you can see that in their demo code that when you run this line of code that it will wait three seconds 73 06:00.900 --> 06:04.040 and then it'll generate an alert that says "Hello". 74 06:04.380 --> 06:06.590 So this is exactly what we want. 75 06:06.600 --> 06:09.030 So let's look at how this method is structured. 76 06:09.060 --> 06:14.370 You can see that this is the syntax and the first parameter is the function. 77 06:14.370 --> 06:19.330 So this is the function that will be executed after a certain amount of time. 78 06:19.410 --> 06:24.740 And the second parameter is how much time to wait before running this function. 79 06:24.900 --> 06:26.870 So let's try it out in our code. 80 06:26.970 --> 06:31.770 So we're going to write setTimeout, and the first parameter is going to be the function that we want 81 06:31.770 --> 06:33.040 to be executed. 82 06:33.240 --> 06:39.000 So we're going to use an anonymous function just as we have done before and we're going to specify what 83 06:39.000 --> 06:40.970 we want to happen. 84 06:40.980 --> 06:52.050 So in this case we want our activeButton's classList to remove that pressed class so that it goes back 85 06:52.050 --> 06:59.160 to the original state, and the second parameter is the amount of time that we're going to wait before 86 06:59.160 --> 07:01.110 we run this function. 87 07:01.110 --> 07:08.550 So I think, through some testing, it seems like 0.1 second seems to work best. 88 07:08.610 --> 07:15.390 So now we've got our active button that is found based on the current key that got pressed, and then we 89 07:15.510 --> 07:21.510 add the pressed class to give it that style of the shadow and the transparency, 90 07:21.510 --> 07:28.110 and then finally after a wait of about 0.1 seconds then we remove that class from the class 91 07:28.110 --> 07:29.100 list. 92 07:29.130 --> 07:32.210 So let's see what this looks like in action. 93 07:37.750 --> 07:44.970 Pretty neat, right? And if all goes well, it should also work for our key press event, because when the key press 94 07:45.110 --> 07:52.280 is detected then this function gets called and we can tap into the event that triggered the key press 95 07:52.630 --> 08:00.130 by using event.key, which then gets passed into a method called buttonAnimation, and it will do exactly 96 08:00.130 --> 08:06.160 the same thing as it did for the button. That looks pretty cool, right? 97 08:06.160 --> 08:12.340 So I hope you had fun in this module building your very own drum kit web site, and in the process learning 98 08:12.340 --> 08:17.640 more about the Document Object Model and some of the more advanced parts of Javascript. 99 08:17.690 --> 08:23.680 Now in the next module we're going to jump even deeper and we're going to learn about a popular Javascript 100 08:23.680 --> 08:25.920 framework called jQuery. 101 08:25.930 --> 08:30.040 So for all of that and more fun projects, I'll see you on the next module.