Overview

In this project, I developed a web application designed to engage users in art history exploration. The core concept revolves around challenging users to guess the era of displayed artwork sourced exclusively from the prestigious Art Institute of Chicago’s extensive collection. Leveraging the Art Institute of Chicago’s Public API and the IIIF Image API, the application provides comprehensive artwork information and high-quality images, enabling users to delve into the historical and artistic context of each piece. Through this interactive platform, art enthusiasts and learners alike can explore artwork in various art eras and test their knowledge, fostering a dynamic and immersive learning experience.

Development Process

1. Dumb first mistake

I forgot to include the script file in the HTML.

1.forgot to include the script in html....jpg

2. Promise to JSON

I parsed the JSON data from the response using the .json() method before accessing its properties. The data was then checked to ensure it had the expected structure (an array of artwork under the data property). If the data is valid, it will iterate through the artwork and create HTML elements for each one.

The error I encountered here is due to the fact that the fetch function returned a Promise that resolved to the Response object, not the actual JSON data.

The error I encountered here is due to the fact that the fetch function returned a Promise that resolved to the Response object, not the actual JSON data.

3. Familiarizing AIC’s Public API

I successfully fetched and displayed the first page of the artwork dataset of the AIC’s Public API in my web application.

3. successfully fetched and displayed the first page of the artworks.jpg

4. 404 Not Found error occurrences

During the development of the web app, I implemented a feature to fetch and display random artworks by utilizing the Math.random() method to generate random numbers. This approach allowed for the generation of unique artwork URLs, as the artwork IDs were appended to the base URL. However, a challenge arose due to the presence of numerous empty IDs in the dataset. In other words, I encountered a substantial number of 404 Not Found errors.

4.api error.jpg

4.item not found error.jpg

5. Invalid ID filter

To address this issue, I wrote conditional statements to filter out all the 404 Not Found IDs. When the promise status indicated a 404 error, the fetch function was called recursively. This iterative process continued until a valid ID was found, ensuring that the application consistently presented users with existing artworks from the dataset.

5. if 404 conditions added.jpg

6. Asynchronous response error