Project Feedback

[amanuel1995]

@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

• I tested it on live-server and everything works. But Github won't find my script.js file. Site hosted here http://virtualdrum.surge.sh/

[egillespie]

The reason the sounds aren't playing is because you have absolute paths (e.g. /drum-sounds/boom.wav). If you get rid of the leading / then they should start playing.

But wait! There are a couple of criteria that you missed, too:

a unique sound effect plays from an audio element

Instead of using JavaScript to create new Audio() objects, we want you to define the sounds in audio elements in your HTML. The audio element allows a separate web designer to change the content of your site while a web developer changes the functionality. The audio element also has better capabilities when it comes to unsupported browsers, accessibility, etc.

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

You're off to a good start, but you still have JavaScript in your HTML. Replace each onclick="Boom()" onmouseover="Boom()" with document.getElementById(...), element.addEventListener('click'), and element.addEventListener('mouseenter'). The instructions for doing this are in the lesson. :wink:

When you're done

After you’ve made your changes and pushed them to GitHub and your hosted site, comment back here and I’ll take another look.

Thanks! :rocket:

[amanuel1995]

@egillespie ,Thank you for the elaborate feedback. It was very helpful. I think I have completed it. Let me know what more I could do. (If there is any )

[egillespie]

It looks and works great! :shipit:

I do have a couple of tips, but nothing you need to change for this lesson:

1. We talk about linting JavaScript in another lesson and the exceptions where semicolons are needed, but for the most part you don't need to put them at the ends of statements or functions.
2. You can tighten up your code by removing the variables. You can chain a lot of your code. For example:

   document.getElementById('first').addEventListener('click', Boom)

[amanuel1995]

Thanks for the tips @egillespie! It's always nice to have a cleaner code. 👍 💯