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.

Pseudocode:

    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

Once i had all the steps defined logically, it was just a matter of writing it in javascript. All in all, it was a fun and interesting project.

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.