Table of contents generated with markdown-toc
Code Institute's Milestone Project 2.
Using New York Metropolitan Museum of Art's JSON API of their collection as an illustrative art resource for an art club. Using their API's search tool to search out art objects for reference and education of all members and visitors to the art club. Additional validation of the search parameters are handled by a form to make the search more user friendly. The art works searched for are displayed in an easy to view fashion.
User Stories:
- as a member of the hosting site's art club, they will use page to access New York's Museum of Art's collection for reference.
- as a general art-loving browser will be able to easily search the collection with appropriate parameters.
- as a general user can easily read details of the objects found.
To provide an easier-to-use application for the Museum's provided API portal of it's collections.
By the nature of art collections the core will be display of images of the collection, corresponding to the functionality provided by the Application Programming Interface (API).
- The museum's departments can be listed using their API Departments endpoint.
- The search criteria used by the API search Search endpoint.
- The found art work details are then displayed on screen, using Object endpoint.
The information structure is led by the Museum's API data structures. A class of found works are identified by their individual, key field 'object id's' and so can be stored as such for further display. The information structure of these objects have been documented by the Museum's API on their page.
There will be one page containing two modal forms. One will display the department list over the main page when needed, selected by a button. The other modal form prompts for search criteria to be set, again by a button. Meanwhile, on document load, a query has been raised to find the total objects currently recorded for the collection. This uses the API Objects endpoint This total is displayed near the start of the page, to advise on careful selection by the user. Once a selection has been made, a button is displayed to show the works selected.
A neutral, pastel blue has been selected as a uniform background colour for the main page. (#D9E6F3). The typeface has been chosen, font family 'Roboto' with backup font family of 'Arial'.
Wireframes mockup A PDF format version can be found within the project's Assets/docs subdirectory.
An application Programming Interface specifically for documenting New York's vast collection af artifacts. Metropolitan Museum of Art API
- Feature 1 - allows users to see the museum's current departmental structure.
- Feature 2 - allows interested viewers to select areas of interest from the Museum's collection.
- Feature 3 - displays the selected works, if found, 5 works at a time.
- Feature 4 - Department names to be selected rather than their numeric 'departmentId' within the search form. The corresponding departmentId will be looked up in the background and used for the search within the API's endpoint.
- A facility to download or print found works and their details.
- Display a work's additional images as thumbnails, possibly on a carousel.
- Incorporate the resource page into a wider art club website.
- Sort found works on a selected object field.
- On larger viewports direct art work's details to the right of the title and image displayed.
- Display subtotal of objects per department on department form.
In this section, you should mention all of the languages, frameworks, libraries, and any other tools that you have used to construct this project. For each, provide its name, a link to its official site and a short sentence of why it was used.
- Bootstrap to provide a mobile-first responsive framework for the site.
- Font Awesome to provide additional icons.
- JavaScript to provide core API and DOM manipulation.
- JQuery
- The project uses JQuery to simplify DOM manipulation.
- TOC for markdown to generate table of contents for README
A Jasmine script based testing strategy was examined and dropped in favour of a more manual approach based on the user stories. For the sake of brevity, see separate link for testing procedures : Testing.
Passed code through JSHint
Developed on GitPod using git and GitHub. Selected Repository : mikedjgreen/MSP2_art_resource Generated from:Code Institute template
Deployment steps:
- opened up GitHub
- signed in
- selected repository mikedjgreen/MSP2_art_resource
- navigated to repository
- selected 'settings'
- scrolled to GitHub pages area
- selected 'Master Branch' from the source drop down menu
- confirmed selected Now live on GitHub pages.
To run this code on your local machine, you would go to my repository at My Repo and on the home page on the right hand side just above all the files, you will see a green button that says, "Clone or download", this button will give you options to clone with HTTPS, open in desktop or download as a zip file. To continue with cloning, you would:
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste this URL: URL. Press Enter. Your local clone will be created.
For more information about the above process;cloning a repository.
The project is built to a master branch deployed to: Master . There is no separate git branch.
- The details and images are directly attributable to the New York Metropolitan Museum of Art Metropolitan Museaum Art Collection
- The photos used in this site again were obtained from Metropolitan Museum of Art.
-
I received inspiration for this project from programmableweb especialy the article on art: API art
-
More technical help on javascript from w3schools