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:

1. Mouse — press and hold the mouse button on a key.
2. Physical keyboard — press and hold the matching letter key (c, d, e, f, g, a).

Requirements

1. Holding the mouse down on a key adds active to that key; releasing removes it.
2. Holding the corresponding letter on the physical keyboard adds active to that key; releasing removes it.
3. Multiple keys can be active at once. Holding c and e together should light up both
4. Keys not in the set (e.g. k, Enter, arrow keys) are ignored.