Please do not answe it yet. Allow me to edit it first to write out the question.

Please show required code and and output to show it runs on screen.

QESTION

Node.js/Javascript based Single Page App

In this assignment you are going build a small web app that is based on just the native capabilties of Node.js and javascript. Specifically you will build an app that allows a user to open a chord pro (chords and lyrics) file hosted by the server and then within their browser drag the words and chord symbols around. When finished they should be able to upload the revised data back to the server which will then store an updated version of the file.

The components are:

Server: build with just Node.js and its build in modules (e.g. http, path, fs, url) and whatever javascript you want to write. (We are not allowing extra npm modules yet in this assignment. Only what is built into node.js by default.)

Client: browser which is provided with a web page from the server consisting of html, css, javascript and jquery. (You can use which ever of these your want.)

Assignment restrictions:

Because each layer of node.js/javascipt-based technologies, like npm modules or the express.js framework, solves many problem you encounter, in this assignment we will not allow their use yet.

Application Requirements

Background

In T2 you will have done an exercise with node.js to open and read a chord pro text file as shown below and display it on the console with the chord symbols displayed above the lyrics (instead of imbedded within them). Below is an example of the chord pro text file and the console display similar to T2

Chord Pro Text File:

Sister Golden Hair -America verse1: Well i [E] tried to make it sunday but i [G#min] got so damned depressed That i [A] set my sights on [E] monday and i [G#min] got myself undressed I ain't ready for the alter, but i [C#min] do [G#min] believe there's [A] times When a [F#min] woman sure can [A] be a friend of [E] mine [Esus2] [E] verse2: Well i [E] keep on thinkin bout you sister [G#min] golden hair surprise That i just can't live without you can't you [G#min] see it in my eyes I've been [A] one poor corre[F#min]spondent, i've been [C#min] too too [G#min] hard to [A] find But it [F#min] doesn't mean you [A] ain't been on my [E] mind [Esus2] [E] chorus: Will you [B] meet me in the middle will you [A] meet me in the [E] end Will you [B] love me just a little just en[A]ough to show you [E] care Well i [F#min] tried to fake it i [G#min] don't mind sayin i [A] just can't make it repeat intro, then verse 2, then chorus, then they do this doo-wop thing that uses the chorus (B - A - E) thing 

For this assignment we want you to build a client-server single page app so that the chords are displayed above the lyrics in a browser web page. Moreover, once displayed, the user should be able to drag individual words or chord symbols around with the mouse. Then they should be able to submit the altered arrangement back to the server which should store the updated results in the chord pro file format replacing the original data.

This is intended to be a single page app (where the user just makes one request to a particular URL) but we will not be very strict about it in this assignment.

Open and read files on the server. Send JSON objects between browser and server. Convert javascript objects to JSON strings and vice versa. Send GET or POST requests from client to server and extract the response data. Receive GET or POST requests from the client and formulate a response. Send HTML and javascript to the broswer page to react to mouse events and drag items around. Open and write files on the server.

So the challenge will be to combine these individual capablities to form the application and also solve a few additional problems that inevitably fall through the cracks. You are free to make use of any code we post as demos as part of your assignment solution.

1) Server-Side Requirements

R1.1) The server code should use only javascript and node.js with build in modules (not use external npm modules or the express.js framework.

R1.2) The server should have a directory of chord pro formated text files (use .crd or .txt extension as you prefer). So the server does not store data in an intermediate format like JSON strings.

R1.3) The server should allow a client, via a browser, to request a particular song.

R1.4) The server should accept updated data from the client and use that data to overwrite the contents of existing song files.

R1.5) Server should be hosted on port 3000 and reachable from a browser on the same machine visiting something like http://localhost:3000/assignment1.html or http://localhost:3000/filename.ext. (Your ReadMe.txt file should tell the TA what specific URL to use to test your application.)

2) Client-Server Data Exchange

R2.1) The exchange of chord/lyric data between client and server should be in the form of JSON object strings. (The initial launch of the client web page will just be the result of a GET request for a static file.)

R2.2) The initial launch of the web app should be either as the result of the client making a request to http://localhost:3000/assignment1.html or to a specific file name instead like http://localhost:3000/sisterGoldenHair.crd Include a ReadMe.txt file to tell the TA's how to test your app from the browser

3) Client Requirements

R3.1) When the user requests a file from the server the chords and lyrics should be displayed in the browser page with the chords properly positioned above the lyrics (like in T2).

R3.2) The user should be able to drag the chord symbols and words around with a their mouse.

R3.3) There should be a "submit" or " update" button to allow the client to submit the moved-around data back to the server which will then overwrite the original file contents in the original file format.

R3.4) The client-side code will have to figure out from the position of the chord symbols and lyrics which words form a line of text and which chords appear above which words. (This will be the fun part -trying to figure out from the position of words which ones belong to the same line of text.)

R3.5) The client should be able to request a different file. This could be done with a text field and "open" button or by visiting a different URL.

Additional Notes.

I've simplified the three test song files provided so they only consist of one verse or chorus of text. That is sufficient for the assignment -you don't need to use long files of the entire song.

You can use .txt extensions instead of .crd for you test files. This makes them easier to view with other apps or the browser.

Your app can be a HTML5 canvas app or use individual HTML elements. It is up to you. We will be showing you demo drag and drop code that is mostly oriented to using a canvas.

If you do your app with a text field and open button your server will probably just have to supply the chord/lyric data as a JSON object. But, if you choose to use a URL request instead you will probably need to provide HTML page content as well. The choice is yours though.

TEXT DOCUMENT

BROWN EYED GIRL VAN MORRISON

[G]Hey, where did [C]we go, da[G]ys when the ra[D]ins came [G]Down in the holl[C]ow, [G]playin' a ne[D]w game [G]Laughin' and a-s[C]ingin' hey-hey, [G]skippin' and a-j[D]umpin [G]In the misty mor[C]ning fog, with o[G]ur he[D]arts thumpin and yo[C]u [D] My Brown-eyed gi[G]rl[Em], yo[C]u my-[D]y brown eyed [G]girl

Peaceful Easy Feeling -Jack Tempchin [E] I like the w[A]ay your sparkling ea[E]rrings l[A]ay, A[E]gainst your s[A]kin so b[B7]rown. I [E]want to sl[A]eep with you in the d[E]esert ton[A]ight, W[E]ith a million s[A]tars all ar[B7]ound. (Because) I've got a p[A]eaceful, easy fe[E]eling, I [A]know you won't let me [F#m]down,[B7] Because [E]I'm a[F#m]lready sta[A]nding [B7]on the g[E]round.

Sister Golden Hair -America verse1: Well I [E] tried to make it sunday but I [G#min] got so damned depressed That I [A] set my sights on [E] monday and I [G#min] got myself undressed I ain't ready for the alter, but I [C#min] do [G#min] believe there's [A] times When a [F#min] woman sure can [A] be a friend of [E] mine [Esus2] [E]

Command Prompt c:12406Node>node Problem4.js Sister Golden Hair -America versel: G#min ell i tried to make it sunday but i got so damned depressed G#min hat i set my sights on monday and i got myself undressed C#min G#min ain't ready for the alter, but i do believe there's times hen a woman sure can be a friend of mine : 12406Node> F#min