Project 4

due at 23:59 on   +100

For this assignment, you will use jQuery to interact with my CS120 server’s “guest book” API. Do your work in a subdirectory called assn4-mesg. You can access the simple user interface I demonstrated in class: http://cs120.liucs.net/assn4.

The available API includes these four services:

  • GET http://cs120.liucs.net/assn4/messages.json fetches all the messages in JSON format, in reverse chronological order. Each message is stored as an object like this:

    { "text":      "Hello class this is a test!"
    , "sender":    "Chris",
    , "timestamp": "2015-03-16T19:27:04.987Z"
    , "mood":      "Tired"
    }
  • POST http://cs120.liucs.net/assn4/messages.json saves a new message. You must send the data in JSON format, but without the “timestamp” (which is added automatically). The “mood” is optional. Here is a working example, using curl:

    curl -H 'Content-Type: application/json' \
         -d '{"sender":"CL","text":"Hi!"}'   \
         http://cs120.liucs.net/assn4/messages.json
  • GET http://cs120.liucs.net/assn4/moods.json returns an alphabetical list of all the moods currently being used in messages on the server. The result, for example, could be:

    ["Curious","Hacking","Hungry","Jittery"]

You should incorporate these services into a single page that uses jQuery to:

  1. Refresh the displayed messages every 10 seconds, so new messages appear automatically.
  2. Offer completions for moods currently being used (using <datalist>), but also allow free-form input of new moods.
  3. Post a new message to the server, and then refresh the message list.

Demonstration video (from previous year)  [9:32]