Write the HTML and CSS to display a keyboard on the page based on this wireframe:
Use a JavaScript MVC framework (such as React) so that when you click on a white key the key is highlighted and the corresponding letter is appended to an element below the keyboard that acts as a log.
Add a text field and play button below the log element. When a comma delimited string of letters is entered into the text field and the play button is clicked it should highlight the appropriate keys in order for one second at a time. Code should be stored in online accessible version control (such as GitHub). Note that code quality is important: readability, consistent formatting etc.
The code should work in the latest version of Chrome/Firefox/Safari.
Bonus points for: • Using CSS to add more complexity - the “design” above is just a wireframe • Allowing for more than one piano to be on the page at the same time without breaking • Error handling and tests • Version control history showing how the code was written over time