Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

In Javascript please Build a web page that can serve as a digital metronome. The page will take in BPM (beats per minute) from the

In Javascript please

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

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Beginning ASP.NET 4.5 Databases

Authors: Sandeep Chanda, Damien Foggon

3rd Edition

1430243805, 978-1430243809

More Books

Students also viewed these Databases questions