Let's set up the success so that these look more like press buttons, selecting the class animal, adding
in width and set the width to one hundred.
Also set a height.
So set the weight to 50 picks.
The text is going to be black, can do text a line.
So central line the text, also adding in a border.
And we're going to also change the display properties to display in line block so that look more like
buttons.
So when we refresh it, you see you've got separate buttons there.
We can also add in some margins.
So there's a little bit of spacing between them shrink down the page.
So we've got a three hundred now going into our elements.
When you click them, they're still outputting that value, surpassing in the value of animal.
So this is whatever value we've got within the HTML is actually what's getting passed in as animal.
So we're going to go ahead and pass that in to our make sound.
And also I want to make them all consistent.
So I'm going to take whatever the value of animal is and we're going to change it to lower case.
So lower animal and taking the value of animal.
We're going to apply JavaScript function, which is to lower case and that will transform the string
and the text values to all lowercase.
So even though we've got some uppercase there so that we don't have to worry about that, and in case
we do have some inconsistencies there, it's still going to work properly.
So we're transferring them all to lowercase and you always need to include the rounded brackets.
So otherwise you're not invoking the actual method, you're just attaching it to that particular object.
So everything is working.
We're sending it over to the lowercase, so we're ready to make use of that within our function.
So let's set that function up and we can just call it make sound.
And then go down here and create a function called make sound, so actually passing in the value of
the animal name and we could just call it name and for now will console log out whatever the value of
name is so we can still see it.
But we've essentially moved over that console message down to the function called make sound.
So we're ready to actually make those sounds.
So selecting our element, we're going to use a switch statement.
This allows us to switch between different parameters depending on what the value of name is.
So essentially looking for a needle and if the case is equal to Leon.
Then we can execute the code below here, so selecting that sound, it we just call it sound one because
new audio, so creating that new audio object linking to our sound folder with the lion.
So MP three.
And then what we want to do is take the sound and simply want to use the play object and then breaking
the different cases using break.
So if it's lying, it should play a lion sound.
Let's try that and refresh and we see that we are in fact playing the lion sound.
So next we need to set it up for a cougar and for a dog.
So if you want to pause the video and add those cases in, you can try that and I'll show you the solution.
So now the solution for updating and adding in the sounds, the other sounds that we want to play so
we can do Kuga, and in this case, we're taking the cougar sound and playing it.
So we're doing sound one or sound two.
We'll do sound two and copy and paste it.
So we've got our last one here.
And this is going to be if it's equal to dog.
Then we're going to play the final four.
I believe it's called bark, so play the bark and we'll update this to be three.
So depending on what sound is pressed, what is going to be the one that gets played?
So go ahead and try this out for yourself.
Have several different empathy's.
And depending on what is selected within the element, you can attach the different sounds to it.
So go ahead and try this out for yourself.
Coming up next, we've got a few other tweaks and adjustments that we're going to make.
Within our application.