# Art Attack! 🎨  ---  Link: https://artattack.netlify.app/ --- ## File structure  --- ## Using the API  * We used the official Metropolitan Museum of Art API * 475,000 objects * Not the easiest to work with, so Postman was quite handy --- ``` Javascript const handleArtwork = () => { let arr = [437658, 438011, 435580, 436957, 436532, 437581, 436532, 459112, 435875, 438815,459106, 435885, 782304, 459121, 436947, 436965, 438136, ]; const index = Math.floor(Math.random() * arr.length); return fetch( `https://collectionapi.metmuseum.org/public/collection/ v1/objects/${arr[index]}` ) .then(checkResponse) .catch((err) => { throw new Error(`fetch getUserData failed ${err}`); }); }; ``` --- ## Using Postman to make the API work 1. We used Postman to test if the API was suitable for the project and had the info we wanted 2. Wanted to display a range of different pieces from different periods, but it was imperative that these objects had an image ```https://collectionapi.metmuseum.org/public/collection/v1/search?hasImages=true&q=popart&medium=Paintings``` ``` https://collectionapi.metmuseum.org/public/collection/v1/search?q=japanese&Medium=Paintings ``` --- ## Things we learned as a team - React components are your friend - Reading the acceptance criteria is key - To test Canvas, you need a separate testing library ```Javascript import "jest-canvas-mock"; ``` - Never doubt yourself --- ## Honourable mentions ### (aka things we don't have time to speak on, but would if we could) * HTML canvas (this is a talk in itself) * Testing (and trying to write a test with nocks)  --- ## Any questions?