drum-machine

Fcc front end libraries project. Building a drum machine using react.

Goals

• Fulfill user stories and pass all the test set by FCC. https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine

  1. Outer container id="drum-machine" that cointains all other elements.
  2. See element id="display"
  3. See 9 clickable drum pad elements, each with a class name of drum-pad, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.
  4. each drum pad should have audio element with src attribute pointing to an audio clip, class clip and an id corresponding to the inner text of its parent.
  5. Clicking drum pad element, child elements audio clip should be triggered.
  6. Pressing key associated with drum pad, elements childs audio clip should be triggered.
  7. Drum pad triggering, will make audio clip description string to be displayed as the inner text of the #display element.

• Figure out way to play multiple audio clips at the same time.