Beat Simulation

Build a web page that can serve as a digital metronome.

• The page will take in BPM (beats per minute) from the text field.
• There is a start button that will trigger the metronome to get going.
• Get the BPM value in the field, and pass it through a function that will convert it to milliseconds per beat. (60000 / bpm)
• The boxes will light up as active using the interval you set up using the bpm.
• Start by setting the class of the first div as "beat active". After the prescribed amount of time has passed, switch this back to "beat inactive" and set the next item to be "beat active". Continue in this manner until you get to the end of the beats, then set the first one active again.

Hints

• Use setInterval to do something on an interval.
• Figure out a way to know which one to do next using modulus or check if you've reached 4 and reset to 1.

Implementation Details

This is just one way to approach this problem but it can be done in many different ways. Please use your own method if you can.

• Set up variables:
  • Create a global variable to track current beat. Set the variable currentBeat to 1.
• Set up click listener for button.
  • First get the run-button element by ID and save that into a variable.
  • Add a click event listener for this button. When button is clicked, call a function called doBeats
• Set up Function doBeats - This function will do all the work.
  • Get the value of the number in the bpm field using document.getElementById(bpm).value. Save this in a variable called bpmValue.
  • Parse this value as an int using parseInt(bpmValue) and pass this value to a function convertBpm that calculates the milliseconds
  • Function convertBpm - Converts number into milliseconds.
  • This function will take in a number as a parameter
  • Divide 60000 by the bpm value to get the ms you need for your interval
  • Return this value from this function so that you have it to use in the calling function.
  • Save the return value from the convertBpm function in a variable called bpm
  • Use the setInterval function to execute your beats per the interval you have set up (bpm). This interval will call a function called nextBeat() every bpm milliseconds, where bpm is the value you calculated in previous step
  • Example: setInterval(function() { your statements go here }, bpm);
  • Within setInterval do all of the following -
  • Make sure all beats are inactive (loop from 1..4, setting class to 'beat inactive')
  • Set the current beat to have active class (use the current beat variable). To set the class of the current beat to "beat active" use something like: document.getElementById('beat-' + currentBeat).setAttribute('class', 'beat active');
  • call a function called nextBeat() which increments the current beat variable.
  • Function nextBeat()
  • Bump the current beat up by 1 (using ++)
  • If current beat is greater than or eq to 4, reset it back to 1