Roblox | Senior Frontend | Phone
Summary
I had a phone interview for a Senior Frontend role where I was asked to build a piano‑key interaction using vanilla HTML, CSS, and JavaScript.
Full Experience
Front-End Coding Exercise — "Piano Keys"
Stack: Vanilla HTML / CSS / JavaScript. No frameworks, no libraries
The Problem
You're given a row of six piano keys — C, D, E, F, G, A. Make them respond to input.
A key should appear pressed the entire time it is being held down, and return to normal the instant it's released. "Pressed" means the element has the CSS class active — the styling for .key.active is already written for you
The keys must respond to both input methods:
- Mouse — press and hold the mouse button on a key.
- Physical keyboard — press and hold the matching letter key (
c,d,e,f,g,a).
Requirements
- Holding the mouse down on a key adds
activeto that key; releasing removes it. - Holding the corresponding letter on the physical keyboard adds
activeto that key; releasing removes it. - Multiple keys can be active at once. Holding
candetogether should light up both - Keys not in the set (e.g.
k,Enter, arrow keys) are ignored.
Interview Questions (1)
Piano Keys Interaction
Implement a front‑end component with six piano keys (C, D, E, F, G, A) that respond to user input. A key should have the CSS class active while it is being pressed and lose it when released. The component must support:
- Mouse interaction – pressing and holding the mouse button on a key adds
active; releasing removes it. - Physical keyboard interaction – pressing and holding the corresponding letter key (
c,d,e,f,g,a) addsactive; releasing removes it.
Multiple keys can be active simultaneously, and any other keys (e.g., k, Enter, arrow keys) should be ignored.
The solution should be built with vanilla HTML, CSS, and JavaScript without any frameworks or libraries.