0 1 00:00:00,930 --> 00: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 2 00:00:08,130 --> 00: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 3 00:00:14,160 --> 00:00:20,370 Now given that we want this animation to happen both when the button gets pressed as well as when a 3 4 00:00:20,370 --> 00:00:25,230 keyboard key gets pressed then we probably would want to create a function, 4 5 00:00:25,350 --> 00:00:25,950 right? 5 6 00:00:26,310 --> 00:00:33,390 So let's create this new function called buttonAnimation, and we're going to need a parameter to be passed 6 7 00:00:33,390 --> 00:00:40,770 in which is the current key and we can call this function in both places where we call makeSound. 7 8 00:00:40,770 --> 00: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 9 00:00:47,550 --> 00:00:51,360 clicked then it carries out this function. 9 10 00:00:51,360 --> 00: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 11 00:00:59,100 --> 00:01:01,130 generate the button animation. 11 12 00:01:01,140 --> 00:01:03,330 So let's call our method up here. 12 13 00:01:03,480 --> 00: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 14 00:01:09,660 --> 00:01:13,070 So that's going to be the same as our buttonInnerHTML. 14 15 00:01:13,170 --> 00:01:15,810 So it's going to be exactly the same as before. 15 16 00:01:15,810 --> 00:01:18,650 So we're just going to add buttonInnerHTML. 16 17 00:01:18,870 --> 00:01:24,720 Now in the case of our keyboard key press we're also going to call that method buttonAnimation, and 17 18 00:01:24,720 --> 00:01:28,300 in this case we're going to pass in the event.key. 18 19 00:01:28,560 --> 00: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 20 00:01:35,820 --> 00:01:39,530 corresponding to the key or the button that was pressed. 20 21 00:01:39,570 --> 00:01:45,630 So now that we have that value inside here, we can use it to generate the animation. 21 22 00:01:45,630 --> 00:01:52,800 So remember that in our index.html, we have seven buttons which all have these classes assigned to 22 23 00:01:52,800 --> 00: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 24 00:01:59,460 --> 00:02:01,770 the letter inside the button. 24 25 00:02:01,770 --> 00:02:08,790 So we can use this in order to query our document for that selector. So we can say querySelector say 25 26 00:02:09,120 --> 00:02:10,690 .w. 26 27 00:02:10,890 --> 00:02:14,770 So that's going to be the element that has a class of w. 27 28 00:02:15,030 --> 00:02:17,930 Then we get back our w drum, this one here. 28 29 00:02:18,420 --> 00:02:21,660 And we can do the same thing with any of the other ones, 29 30 00:02:21,710 --> 00:02:25,110 say k, then we get the k drum over here. 30 31 00:02:25,110 --> 00:02:30,820 Now notice that when we use querySelector, we have to say dot and then the name of the class. 31 32 00:02:30,900 --> 00: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 33 00:02:39,510 --> 00:02:44,090 of the current key then we have to write document.querySelector, 33 34 00:02:44,370 --> 00: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 35 00:02:52,980 --> 00:02:54,350 a full stop 35 36 00:02:54,390 --> 00: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 37 00:03:01,020 --> 00:03:09,180 So now that we found the button that has the current key let's assign this to a variable called 37 38 00:03:09,780 --> 00:03:10,670 activeButton. 38 39 00:03:10,680 --> 00: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 40 00:03:17,520 --> 00:03:20,750 already been defined in our style.css. 40 41 00:03:20,850 --> 00:03:27,930 So in the here I've already created a class called pressed, and pressed basically applies a shadow and 41 42 00:03:27,930 --> 00:03:33,860 also a transparency to whatever element that we add this class to. 42 43 00:03:33,870 --> 00: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 44 00:03:41,580 --> 00:03:47,160 using Javascript. And you might have to think back a few lessons but try and see if you can complete 44 45 00:03:47,160 --> 00:03:52,340 this challenge by adding the pressed class to the activeButton. 45 46 00:03:55,700 --> 00:03:59,760 So as always it's good to test out your code inside the console. 46 47 00:03:59,900 --> 00:04:08,990 So let's just select the h1 by saying document.querySelector("h1"), and we're going to tap into 47 48 00:04:08,990 --> 00:04:10,920 its class list. 48 49 00:04:11,300 --> 00:04:17,590 And remember this is the list of classes that it has applied to it which currently is nil. 49 50 00:04:17,790 --> 00:04:22,620 Now once we've gotten the class list we can add new classes, 50 51 00:04:22,790 --> 00:04:24,910 for example this pressed class. 51 52 00:04:25,150 --> 00:04:31,920 And if I hit enter now you can see that shadow and that transparency gets applied to our 52 53 00:04:31,950 --> 00:04:32,860 h1. 53 54 00:04:32,870 --> 00:04:35,190 Now this is exactly what we want to happen, 54 55 00:04:35,300 --> 00: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 56 00:04:41,690 --> 00:04:50,260 and all we have to do is just tap into its class list and add the class of pressed. 56 57 00:04:50,280 --> 00: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 58 00:04:57,630 --> 00:05:01,540 and the shadow gets applied to the button. 58 59 00:05:01,620 --> 00:05:03,390 Now there's just one problem. 59 60 00:05:03,660 --> 00:05:05,490 This doesn't come back. 60 61 00:05:05,490 --> 00:05:10,630 We kind of want it to have this depressed mode and then come back to the original, 61 62 00:05:10,650 --> 00:05:13,340 so it looks like it's an animation. 62 63 00:05:13,680 --> 00:05:17,330 But in this case I can't generate that effect ever again 63 64 00:05:17,340 --> 00:05:19,390 if I clicked on one button. 64 65 00:05:19,470 --> 00:05:21,040 So how can we do that? 65 66 00:05:21,360 --> 00:05:25,130 Well, in order to do this, we need this line of code to be run, 66 67 00:05:25,350 --> 00: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 68 00:05:33,030 --> 00:05:35,410 so we get back to the original look. 68 69 00:05:35,430 --> 00:05:38,730 So how can we do this using Javascript? 69 70 00:05:38,730 --> 00:05:41,180 Well let's see what we can find online. 70 71 00:05:41,370 --> 00: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 72 00:05:51,000 --> 00:05:53,920 and it's a method called setTimeout. 72 73 00:05:54,420 --> 00: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 74 00:06:00,900 --> 00:06:04,040 and then it'll generate an alert that says "Hello". 74 75 00:06:04,380 --> 00:06:06,590 So this is exactly what we want. 75 76 00:06:06,600 --> 00:06:09,030 So let's look at how this method is structured. 76 77 00:06:09,060 --> 00:06:14,370 You can see that this is the syntax and the first parameter is the function. 77 78 00:06:14,370 --> 00:06:19,330 So this is the function that will be executed after a certain amount of time. 78 79 00:06:19,410 --> 00:06:24,740 And the second parameter is how much time to wait before running this function. 79 80 00:06:24,900 --> 00:06:26,870 So let's try it out in our code. 80 81 00:06:26,970 --> 00:06:31,770 So we're going to write setTimeout, and the first parameter is going to be the function that we want 81 82 00:06:31,770 --> 00:06:33,040 to be executed. 82 83 00:06:33,240 --> 00: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 84 00:06:39,000 --> 00:06:40,970 we want to happen. 84 85 00:06:40,980 --> 00:06:52,050 So in this case we want our activeButton's classList to remove that pressed class so that it goes back 85 86 00:06:52,050 --> 00:06:59,160 to the original state, and the second parameter is the amount of time that we're going to wait before 86 87 00:06:59,160 --> 00:07:01,110 we run this function. 87 88 00:07:01,110 --> 00:07:08,550 So I think, through some testing, it seems like 0.1 second seems to work best. 88 89 00:07:08,610 --> 00: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 90 00:07:15,510 --> 00:07:21,510 add the pressed class to give it that style of the shadow and the transparency, 90 91 00:07:21,510 --> 00:07:28,110 and then finally after a wait of about 0.1 seconds then we remove that class from the class 91 92 00:07:28,110 --> 00:07:29,100 list. 92 93 00:07:29,130 --> 00:07:32,210 So let's see what this looks like in action. 93 94 00:07:37,750 --> 00: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 95 00:07:45,110 --> 00:07:52,280 is detected then this function gets called and we can tap into the event that triggered the key press 95 96 00:07:52,630 --> 00:08:00,130 by using event.key, which then gets passed into a method called buttonAnimation, and it will do exactly 96 97 00:08:00,130 --> 00:08:06,160 the same thing as it did for the button. That looks pretty cool, right? 97 98 00:08:06,160 --> 00: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 99 00:08:12,340 --> 00:08:17,640 more about the Document Object Model and some of the more advanced parts of Javascript. 99 100 00:08:17,690 --> 00: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 101 00:08:23,680 --> 00:08:25,920 framework called jQuery. 101 102 00:08:25,930 --> 00:08:30,040 So for all of that and more fun projects, I'll see you on the next module.