1 00:00:01,080 --> 00:00:08,940 Let's set up the success so that these look more like press buttons, selecting the class animal, adding 2 00:00:08,940 --> 00:00:12,060 in width and set the width to one hundred. 3 00:00:12,390 --> 00:00:13,770 Also set a height. 4 00:00:13,800 --> 00:00:15,990 So set the weight to 50 picks. 5 00:00:16,290 --> 00:00:19,620 The text is going to be black, can do text a line. 6 00:00:19,620 --> 00:00:23,400 So central line the text, also adding in a border. 7 00:00:23,670 --> 00:00:30,420 And we're going to also change the display properties to display in line block so that look more like 8 00:00:30,420 --> 00:00:30,870 buttons. 9 00:00:30,870 --> 00:00:34,260 So when we refresh it, you see you've got separate buttons there. 10 00:00:34,680 --> 00:00:37,410 We can also add in some margins. 11 00:00:37,980 --> 00:00:41,720 So there's a little bit of spacing between them shrink down the page. 12 00:00:41,730 --> 00:00:45,370 So we've got a three hundred now going into our elements. 13 00:00:45,390 --> 00:00:50,050 When you click them, they're still outputting that value, surpassing in the value of animal. 14 00:00:50,370 --> 00:00:56,270 So this is whatever value we've got within the HTML is actually what's getting passed in as animal. 15 00:00:56,580 --> 00:01:01,970 So we're going to go ahead and pass that in to our make sound. 16 00:01:02,310 --> 00:01:04,650 And also I want to make them all consistent. 17 00:01:04,980 --> 00:01:10,170 So I'm going to take whatever the value of animal is and we're going to change it to lower case. 18 00:01:10,740 --> 00:01:15,120 So lower animal and taking the value of animal. 19 00:01:15,570 --> 00:01:23,790 We're going to apply JavaScript function, which is to lower case and that will transform the string 20 00:01:23,790 --> 00:01:26,570 and the text values to all lowercase. 21 00:01:26,820 --> 00:01:31,260 So even though we've got some uppercase there so that we don't have to worry about that, and in case 22 00:01:31,260 --> 00:01:35,070 we do have some inconsistencies there, it's still going to work properly. 23 00:01:35,250 --> 00:01:40,440 So we're transferring them all to lowercase and you always need to include the rounded brackets. 24 00:01:40,860 --> 00:01:46,140 So otherwise you're not invoking the actual method, you're just attaching it to that particular object. 25 00:01:46,440 --> 00:01:47,700 So everything is working. 26 00:01:47,700 --> 00:01:53,890 We're sending it over to the lowercase, so we're ready to make use of that within our function. 27 00:01:54,180 --> 00:01:58,920 So let's set that function up and we can just call it make sound. 28 00:02:00,390 --> 00:02:07,830 And then go down here and create a function called make sound, so actually passing in the value of 29 00:02:07,880 --> 00:02:14,520 the animal name and we could just call it name and for now will console log out whatever the value of 30 00:02:14,520 --> 00:02:16,560 name is so we can still see it. 31 00:02:16,680 --> 00:02:22,290 But we've essentially moved over that console message down to the function called make sound. 32 00:02:22,560 --> 00:02:25,350 So we're ready to actually make those sounds. 33 00:02:25,980 --> 00:02:30,270 So selecting our element, we're going to use a switch statement. 34 00:02:30,540 --> 00:02:38,640 This allows us to switch between different parameters depending on what the value of name is. 35 00:02:38,670 --> 00:02:43,800 So essentially looking for a needle and if the case is equal to Leon. 36 00:02:44,750 --> 00:02:53,570 Then we can execute the code below here, so selecting that sound, it we just call it sound one because 37 00:02:53,570 --> 00:03:01,970 new audio, so creating that new audio object linking to our sound folder with the lion. 38 00:03:01,970 --> 00:03:02,810 So MP three. 39 00:03:06,380 --> 00:03:13,370 And then what we want to do is take the sound and simply want to use the play object and then breaking 40 00:03:13,580 --> 00:03:16,160 the different cases using break. 41 00:03:18,610 --> 00:03:21,430 So if it's lying, it should play a lion sound. 42 00:03:21,460 --> 00:03:26,910 Let's try that and refresh and we see that we are in fact playing the lion sound. 43 00:03:27,130 --> 00:03:30,610 So next we need to set it up for a cougar and for a dog. 44 00:03:30,870 --> 00:03:36,970 So if you want to pause the video and add those cases in, you can try that and I'll show you the solution. 45 00:03:38,980 --> 00:03:45,130 So now the solution for updating and adding in the sounds, the other sounds that we want to play so 46 00:03:45,130 --> 00:03:51,100 we can do Kuga, and in this case, we're taking the cougar sound and playing it. 47 00:03:51,100 --> 00:03:53,950 So we're doing sound one or sound two. 48 00:03:54,280 --> 00:03:59,830 We'll do sound two and copy and paste it. 49 00:04:00,130 --> 00:04:02,110 So we've got our last one here. 50 00:04:02,290 --> 00:04:05,320 And this is going to be if it's equal to dog. 51 00:04:06,320 --> 00:04:09,080 Then we're going to play the final four. 52 00:04:09,260 --> 00:04:14,890 I believe it's called bark, so play the bark and we'll update this to be three. 53 00:04:15,530 --> 00:04:22,280 So depending on what sound is pressed, what is going to be the one that gets played? 54 00:04:23,090 --> 00:04:24,970 So go ahead and try this out for yourself. 55 00:04:25,250 --> 00:04:27,230 Have several different empathy's. 56 00:04:27,410 --> 00:04:33,090 And depending on what is selected within the element, you can attach the different sounds to it. 57 00:04:33,320 --> 00:04:35,140 So go ahead and try this out for yourself. 58 00:04:35,510 --> 00:04:39,200 Coming up next, we've got a few other tweaks and adjustments that we're going to make. 59 00:04:40,190 --> 00:04:41,750 Within our application.