Challenge began today. Got to play with some CSS transitions and DOM manipulations through JS. At the beginning, it seemed hard to do, however as I began to layout out the program, it became simple.
The exercise was to make a page that has a range of keyboard keys displayed and when a keyboard key was pressed, a sound was to be played and a visual effect was to take place to notify which key was pressed. The name of the sound played also had to be written underneath each displayed keyboard key.
For my version, i used piano sounds so the displayed keyboard keys also correspondend to the name of the piano note played and it saved me some extra writting.
if keyboard key is pressed initialize audio variable to audio element from html with same keycode as pressed key on keyboard initialize key variable to div element from html with same keycode as pressed key on keyboard initialize keys variable to all div elements from html that have class of 'key' if variable 'audio' doesn't contain an html audio element stop the program reset audio element's time to 0 to allow successive audio play when same keyboard key is pressed repeatedly play audio change background color of page to any random color add class of 'playing' to div element contained in variable 'key' for CSS transition(animation) of that element for each value in array of div elements contained in variable 'keys' add an event listener to remove transition class of 'playing' when transition ends add an event listener to browser window to execute the above steps when a keyboard key is pressed
There’s room for expansion on the project so feel free to contact me on twitter if you’d like to contribute or just to chat. You can find the code here.