Museum Art Gallery
I have always had an admiration and fascination for all things art. Ever since I was a kid, my favorite places to be were in a library — hence my nickname Bibliophile — or in a museum. Like the saying goes: “A picture is worth a thousand words”. So whenever a library could not fulfill my longings for beauty, knowledge and history, next stop: a museum!
That’s why I chose the museum to be the inspiration and theme of this project. Plus, it was not too difficult for me to choose which API to use. There were only a handful of museum APIs in the GitHub public APIs list, so the one I chose was the Art Institute of Chicago’s public API.
Now onto the code
The first thing I made sure to add to my JS code was the DOMContentLoaded event listener. Synchronous Javascript pauses parsing of the DOM, and because the average person wouldn’t like to wait three plus seconds for a web page to load, DOMContentLoaded makes the code asynchronous, optimizing the loading of stylesheets.
Once the DOM has been loaded, the fetchArtworks function is called. It displays onto the webpage the title of each artwork, all the artworks from the API, along with a block of information about each artwork. It begins with a fetch request from the url http://localhost:3000/data (/data because that’s the specific parent key that is used in the JSON file). The data from the API is converted to JSON and then the data is passed to another function displayArtworks. And finally, there’s the .catch, that displays an error prompt in the form of a red banner on the webpage when an error occurs, and is removed once the error is resolved and the page is refreshed.
The error banner is formatted as so in HTML…
…with the Outfit font and other fonts already been imported at the beginning of the CSS code…
In the displayArtworks function, innerHTML is set to whitespace, which will automatically clear the page whenever it’s refreshed. Next, the data passed in artworks from the fetchArtworks function is checked to make sure there was actual data sent so that the data will be rendered onto the page. If data is found, each time it is found, the data in artworks gets passed to the makeArtworkTile function.
The makeArtworkTile function includes CSS code to make things more efficient for formatting the webpage and make the code more expressive for those viewing it. First, a div element is created, with each new element containing a replica of the id value in the JSON file. An h2 element is created for the title of each artwork, a p element is created for the block of information that adds context to each artwork, an img element is for each photo that will be featured above its respective information block, and a span element is created for the “like” button that keeps track of which artworks are the most liked.
An event listener is attached to likeButton, so that when the button is clicked, the ♥(heart) symbol is increased in size and turns bright red instead of the traditional maroon theme of the project. At last, all the variables are appended to the div element and likewise appended to the webpage.
In the returnNone function, a div element is created with the class name “art-warning”. This function is called when there is no data passed to the displayArtworks function.
For the search functionality, the searchArt function is called. It begins with a preventDefault() method so that the default action doesn’t run until the event gets explicitly handled. The variable query is set to e.target[0].value (i.e., the values taken in from the user’s keyboard). If no values are taken from the keyboard, the displayArtworks function is still called but nothing will be displayed on the page. In the else scope, there are three variables: artName (filters the JSON file for artwork titles that match the input from the user’s keyboard), artDate (filters the JSON file for artwork dates that match the input), and artist (filters the JSON file for the artists that match the input). The spread operator is then used to pass copies of the three aforementioned variables to the displayArtworks function.
For more information and to view the entire code, head over to: https://github.com/1Bibliophile/phase-1-project
