Roblox Senior Frontend Engineer Interview Experience — Phone Screen Piano Keys Coding Challenge

Phone Interview

Coding/design question: Piano Keys

Implement a UI with 6 piano keys (C, D, E, F, G, A) that responds to user input. Must be built with vanilla HTML/CSS/JavaScript only — no frameworks or third-party libraries. When a key is pressed and held, it should show a pressed state (i.e., add the pre-styled .key.active class to the corresponding element); when released, it should immediately return to its original state.

Specific requirements:

1. Mouse interaction: pressing and holding the left mouse button on a key should make that key active; releasing the mouse should remove the active state.
2. Keyboard interaction: pressing and holding the corresponding letter key on the physical keyboard (c, d, e, f, g, a) should make the matching piano key active; releasing the key should remove the active state.
3. Support multiple simultaneous key presses: multiple keys can be active at the same time — for example, holding down both 'c' and 'e' on the keyboard should light up both corresponding piano keys.
4. Filter out invalid input: other keyboard keys outside this range (e.g. 'k', 'Enter', arrow keys, etc.) should be ignored.