harvard-museums-collection-api | Harvards Museums Collection

For this project we will use the Harvard Museum API to create a digital art gallery. We learn how to use API's and build a "Load more" Button, a search function and filter function.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

For this project we will use the Harvard Museum API to create a digital art gallery. Here it is very important to deal with the parameters of the API. https://github.com/harvardartmuseums/api-docs

Step 1: You can use the API to display data. If you click on the “see more” button, more data will be loaded and displayed.

Step 2: You also have a working search function OR filter options.

Step 3: The search function AND the filter options work.

Screenshots

Home Screen

Search results after filtering Screen

Links

• Solution URL: https://github.com/jenniferhubermayer/harvard-museums-collection-api

My process

Built with

• Semantic HTML5 markup
• CSS (desktop only)
• Flexbox
• JavaScript
• Harvard Art Museums API

Continued Development

• results should not be limited to 100 works
• "showing XX out of XX works": First number is not equal to search results
• "See more" should only be visible if there are works to be shown

Author

• Website - https://github.com/jenniferhubermayer

Acknowledgments

This project has been realized as part of the super(c)ode "Front-End Boot-Camp 2022".