Project Feedback

[jessicalam]

@stuartpearman Can you take a look at this? It's hosted here and meets the following criteria:

• At least 3 button elements are included in your page
• When each of the buttons are hovered over (mouseenter event) or clicked on (click event), a unique sound effect plays from an audio element (try the .play() method) -- you may use these drum kit sounds, create ones from this sound effects generator, or use any other sounds that won't hurt/irritate the people who listen to them
• Each button is well-labeled, corresponding to the sound it will play
• All audio elements are invisible (no controls attribute), so that they can only be played with the buttons
• All of your JavaScript is in a separate file ending with .js

[stuartpearman]

Hey Jessica, re-read criteria 5:

All of your JavaScript is in a separate file ending with .js

So this means instead of using the onclick attribute, you'll need to use event listeners. This slide from the lesson talks about event listeners.

Second, the sounds should also trigger when the user clicks or hovers over the button. So make sure the sound plays in both cases.

[jessicalam]

Should be fixed now.... I may have done it correctly this time....

sample js code

var buttonElement = document.getElementById('hihat')
buttonElement.addEventListener('click', function () {
  console.log('I was clicked!')
  var audio = new Audio('drum-sounds/hihat.wav');
  audio.play()
})

would this be the proper way of finding and putting it in?
setting another variable "audio" and then playing that variable?

[stuartpearman]

Yep, you seem to have it down, but there are a few more things we should change here.

We also want the sound to play when you hover the mouse over the button. You can do this with the 'mouseenter' event. You can make an event listener for it, just like you did with the 'click' event.

Another thing I would change here is how you define your audio variables. Instead of creating your variables in your event listener, you can put all of your audio variables at the top, and name them based on the sound you'll be using. Then you'll be able to reuse them when you make your 'mouseenter' event too.

And I would give all your button variables unique names too, depending on which sound they'll trigger.

Here's an example:

var hihat = new Audio('drum-sounds/hihat.wav');
hihatButton.addEventListener('click', function () { ... })

I know that's a lot of information, let me know if you need some help making sense of it all.

[jessicalam]

I might have gotten it this time...... but I could be wrong.

[stuartpearman]

Yeah, you did get the hover working! Technically we wanted both hover and click to trigger the sound, but you've done plenty on this assignment, and I think you understand the material well enough to tackle something new 🙂

[jessicalam]

So, if I wanted to make it clickable, do I put the 'click' next to the 'mousenter'?

Like button.addeventlistener('click','mouseenter' ,function())
Or would I need to put in a seperate line
Like button.addeventlistener('click',function())
Button.addeventlistener('Mouseenter',function())

I'm typing this on mobile but do you understand what I mean?