Project Feedback

[levinsonmm]

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

• [x] At least 3 button elements are included in your page
• [x] 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
• [x] Each button is well-labeled, corresponding to the sound it will play
• [x] All audio elements are invisible (no controls attribute), so that they can only be played with the buttons
• [x] All of your JavaScript is in a separate file ending with .js

[chrisvfritz]

Very nice! 🌟 I try hard to find some room for improvement, but you're making it pretty difficult this time. 😅 There are some tiny style improvements that could be made, but you'll learn about that in the next lesson. 🎉 :shipit:

Instead, I'll give you a taste of the real power of functions. 😄 Across the code to set up each button, you've maintained a very consistent strategy, so the only real difference between each is the name of the sound. That means we could actually simplify your code to:

var attachSound = function (soundName) {
  var sound = document.getElementById(soundName + 'Sound')
  var button = document.getElementById(soundName)

  var playSound = function () {
    sound.play()
  }

  button.addEventListener('click', playSound)
  button.addEventListener('mouseenter', playSound)
}

attachSound('clap')
attachSound('hihat')
attachSound('kick')

The attachSound function is provided the name of the sound, then we use that name to:

1. Get the appropriate sound and button from the page
2. Create a function to play that sound
3. Set up the button to play the sound on click and mouseenter

If you have any questions/comments/etc about this or anything else, please don't hesitate to let me know! 😸 🎈

[levinsonmm]

Thanks for the feedback! Being more efficient is definitely important to me, so thank you for pointing out a better way to do this. 😄