Lab 1: A Night at the Museum

Objectives

• Continue to work with HTML and CSS.
• Gain experience with JavaScript.
• Learn to make API calls and parse the results of those calls.

Overview

In this project, you’ll build a web page that queries and displays information regarding the collections of the Harvard Art Museums. It turns out that the Museums provide an API that anyone can freely access (by signing up for a free API key) that contains large amounts of information on the many works of art they’ve curated. Users will be able to visit your site, see a list of all galleries into which the Museums have organized their collections, and then open clicking on any of those galleries be brought to a page that contains information about the art and artifacts therein.

Collaboration

Per the syllabus it is permissible to collaborate with one other classmate on this lab. If you do, both partners must still submit their own repositories, and both partners must turn in identical work. You should use the README.md file to note that you worked with a partner and state clearly who your partner was (name and GitHub username).

Getting Ready

Now, we’ll begin to use GitHub Classroom to distribute projects and collect submissions. To begin Lab 1:

1. Click here to go to the GitHub Classroom page for starting the assignment.
2. Click the green “Accept this assignment” button. This will create a GitHub repository for your project. Recall that a repository is just a location where your code will be stored and which can be used to keep track of changes you make to your code over time.
3. Click on the link that follows “Your assignment has been created here”, which will direct you to the GitHub repository page for your project. It may take a few seconds for GitHub to finish creating your repository. You should then be able to clone on your machine the cs276/lab1-username repository (CS276 is the course identifier for this course at Yale, by the way, if curious where that organization name comes from!): always push your code to your cs276/lab1-username repository.

README.md   index.html   static/

Inside of the static/ directory you should see two subdirectories, css/ and js/, inside of which you should find one CSS and one JS file, respectively, to get you started.

Getting Started

Harvard Museums API

The Harvard Museums API provides access to the large collection of objects stored in a variety of galleries across Harvard Museums. We’ll be using their API in this lab to get access to information about these objects and galleries, and display them to visitors to our site.

1. Go to https://www.harvardartmuseums.org/collections/api and fill out the short form to request an API key. When asked what you are going to do with the API, it suffices to mention that you will be using it for this course.
2. After filling out the form, you should within a few minutes receive an email from the Museums with your API key, which will be a 32-character alphanumeric string. Be sure to write it down somewhere so you don’t lose it!
3. You can now use that API key to make requests to the Museums API, documented here. For example, JavaScript code like the below

fetch(`https://api.harvardartmuseums.org/gallery?apikey=${API_KEY}`)
.then((response) => response.json())
.then((data) => {
    // TODO
})

where API_KEY is your API key, will give you a JSON object containing a listing of all of the galleries that get returned by the Museums API. We’ll defer to you to review the documentation to see the full power and capabilities that are afforded by the Museums API!

Requirements

Alright, it’s time to actually build your web application! Here are the requirements:

• Galleries View: The index of your site should list all of the galleries in the Harvard Museums. At a minimum, you should include the name of the gallery, the gallery number, and what floor the gallery is on. Each gallery should be a clickable link.
• Individual Gallery View: Upon clicking one of the above links, you should asynchronously update index.html to display instead the list of objects in that gallery.
  • Each object in the gallery should include at a minimum its title, an image of the object, the people involved, and a link to the object’s page on the Harvard Art Museums site.
• Object View: Clicking on the title of any of a single gallery’s objects should asynchronously update index.html to display information about that object.
  • For each object, be sure to display at a minimum its title, description, provenance, accession year, and its image.
• Features: You should also implement at least two of the below features on your site, though which you choose are up to you:
  • Navigation: Provide “Go Back” buttons on all of your pages, for your user to return to a list of all galleries.
  • Styling: In styles.css, take some time to create a nice aesthetic for your site. At a minimum, you should be using at least one of each type of selector (tag, class, ID). You can use Bootstrap in addition to your own custom CSS styling.
  • Your Own Feature: If you want to implement some other functional extension to the site, you’re welcome to do so. If unsure of whether it is substantial enough, write to the course staff for guidance.

Beyond these requirements, the design, look, and feel of the website are up to you! You’re also welcome to add additional features to your website, so long as you meet the requirements laid out in the above specification!

FAQs

Reload periodically to see answers to common FAQs! Be sure to use the lab1 tag on Piazza when posting questions. Please be sure not to post questions containing more than a small snippet of code publicly.

How to Submit

Step 1 of 2

1. Make sure all of your latest changes have been committed and pushed to your cs276/lab1-username repository.
2. If you collaborated with a partner on this lab, be sure you’ve clearly identified who your partner is in the README.md text file, and be sure each of you individually submits, where your submissions should (other than the README.md file) be identical.

Step 2 of 2

Fill out this form.

Congratulations! You’ve completed Lab 1.