Project Feedback

[finchmar]

@egillespie 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

[egillespie]

Really good job on this project. It functions great, there's one small request I'd like to make of the JavaScript in your HTML. 🥁

Can you remove the onclick="Sound1()" code in your HTML and give each button an ID so you can do something like this:

document.getElementById('boomButton').addEventListener('click', function () {
  Sound1()
})

Putting all of your JavaScript in a separate file (including adding event handlers) means a designer can worry about the HTML without breaking the code, and a developer can change the code without worrying about accidentally changing the appearance or content of the site.

addEventListener is also more flexible than onclick="..." because you can use addEventListener to add multiple event handlers to an element.

---

After you’ve made your changes and pushed them to GitHub and your hosted site, give it a once-over to make sure it looks right, then comment back here and I’ll take another look.

Thanks! :rocket:

[finchmar]

fix it!

[egillespie]

Awesome, thanks! :shipit: