Pset 1: JavaScript and HTML

The goal of this pset is to focus on plain old JavaScript and plain old HTML. Without extra frameworks, it will be tedious and unrewarding to make a beautiful site, so plan on producing something ugly for now.

You have two options: make a search interface for the Harvard University Art Museums, or make a campus shuttle and city bus tracker. We think the first one will be a little easier and it actually involves digital humanities. The second one will involve multiple external APIs, which may be of interest to some of you; it is also inherently practical.

Ground Rules

Whichever option you choose, please observe the following ground rules:

Using fetch() for API requests

Most modern web APIs expect you to submit a dictionary of parameters encoded in the URL of a GET request. Rather than forcing you to construct the full URL with all the ?key1=value1&key2=value2 parameters (ensuring, of course, that everything is properly escaped for inclusion in URLs), virtually all javascript functions that have been cooked up over the years for making HTTP requests allow you to pass a parameter with a javascript dictionary of your parameters. The library then takes care of constructing the proper URL for you.

Oddly, even though it is the newest such function and the first since the antiquated XMLHttpRequest to be part of the javascript language, fetch() forces you to construct the URL yourself. The official way to do so–assuming you have a dictionary of parameters name params–according to the standards documents is:

let url = new URL('');
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));

We recommend you use this approach to properly encode your parameters into the URL. And it even takes care of the requirement to use an arrow function. Note that url is a URL object, not a string. url.href will give you the URL with all the parameters you added, but fetch() happily accepts the URL object itself.

Remember that calls to fetch immediately return a Promise object from which you will be able to extract a Request object once the browser gets an initial response to the underlying network request. Many APIs return their results in JSON format, which you can access through the Request’s json() method once the server’s response is complete. In other words, you have to first wait for the response to start coming back, then wait for it to finish coming back. You’ll find await is your friend.

Option 1: Harvard Art Museums Search Interface

The Harvard Art Museums provide an API to access the entire collections database. Request an API key from and skim the documentation there. You should get an API key by e-mail relatively quickly. Use the API to build a page that has at least the features listed below. Their presentation on the web page should be readable, but it can be very rudimentary and ugly.

You’ll need to format all the returned results as HTML, and update the current page with them. This is the sort of thing that frameworks like vue are designed to handle, but here are some suggestions for ways to minimize the pain of doing it by hand:

Additional hints:

Option 2: Real-Time Shuttle and City Bus Map

Create a real-time tracker for campus shuttles and city buses on the same map. Integrate with your choice of map providers (Google Maps, …). You’ll be dealing with multiple different APIs, which will likely make this option a little more difficult. But it should still be manageable, and very rewarding. You must support the following features at a minimum:

Both Yale and Harvard shuttle data is available via the TransLoc API. You will need to create a free account with mashape in order to get a key. As always, consider using a disposable e-mail address for your account. Also feel free to share your key with other students as long as that doesn’t break anything (it shouldn’t).

New Haven city bus tracking is available through CT Transit’s API. Feel free to use the open development key rather than registering for your own key. Boston bus tracking is available through the MBTA v3 API.