DEV Community

Discussion on: Let's build an actual working Guitar🎸 with JavaScript 💻🤘

Collapse
ashleyo profile image
Ashley Oliver

That's a lot of event handlers. Why not use just one with a simple function on mouse x,y coordinates to resolve the fret?

Collapse
thormeier profile image
Pascal Thormeier Author

You're absolutely right! I wanted to go with the path of least resistance here, since it's basically a prototype and a lot of things still need some improvement.

Working with X/Y coordinates only is always a bit tedious, since some browsers handle some things differently (or even output different values for the same functions). Also, the SVG is scaling with the browser window, which is added complexity to the calculation. Using all these handlers just seemed like a simpler option code-wise to get it working for the time being.

I could imagine a mixture of the two approaches, though: Add the notes of the frets as data attributes (for example: data-note="E4"), add single event listeners for mouseover and click, determine the the fret (via elementFromPoint or similar), read out the note and play it. This would also solve the mobile/touch support mentioned in a another comment by Isitar.

What do you think?