Clients! Servers! Music! Three great tastes that taste great together!

Your mission is to write a client program that presents the user with a text box. When the user enters the name of a note in the text box and presses the 'Enter' key, that note is sent to our server and the server plays it!

Random Circles

First thing to do!

Navigate to your Desktop, open the jsday3 folder, open the folder called musicCannon. Open index.html and musicCannon.js in Notepad++. Also open index.html in Google chrome

Now create a text box

Create a text input box on the client's web page. You will add this in index.html

To create an input box in HTML, use input tag: an example follows. The placeholder attribute sets the text that appears inside the box before the user enters anything; it is optional.

<input type="text" placeholder="Enter some text in this box!">

Now write a callback

Now, in the musicCannon.js file, write a function that takes one parameter. Inside that function, let's do a push to our server using the parameter passed into this function.

The code to do a push has the following format:

$.post( "http://A COOL URL", { A KEY: VALUE TO USE } );

A COOL URL, A KEY, and VALUE TO USE are not real program values; they represent what we have to replace to make this code work in our specific program.

Now, in this program, our url is

http://music-cannon.meteor.com/music
, our key is note, and our value is passed into the function as a parameter.

Now hook up the callback to your text box!

Now that we can push to the server, we need to hook up our text box to the function we just created so that when the text box entry changes, the function we wrote is called so that the data is passed to the server! We can do this with an event listener, much like we did with random circles. We just need to add the following to our input tag, where this.value is used to retrieve the current text inside the text box and pass it to the function

<input type="text" onchange="NAME_OF_FUNCTION_THAT_PUSHES(this.value)">

Make sure to put the right function name into the above code

Now test your code! Try putting a lowercase note that is in the A blues scale into the text box, and listen carefully...