This exercise will make use of the GIPHY API to collect and display images on the page based on terms selected by the end user.
-
Create a list of topics
-
Using JavaScript, create buttons on the HTML page. One for each topic.
-
Create a form to collect additional terms from the users.
-
When the form is submitted, add the user provided terms to the list of topic buttons on the page.
-
When a topic is clicked, get 10 images from GIPHY.
-
Display the image rating below the image.
-
When the user clicks on an image, the image should begin its animation.
-
When the user clicks on the image a second time, the animation should stop.
- Make the application fully mobile responsive.
- Enabled paginated requests. For each additional page, get 10 additional images, and add them to the page with the existing content.
- List additional metadata about each image.
- Add a 1-click download option across all device types.
- Add the ability to search other APIs and display the results on the page.
- Add the ability to tag, save, and recall favourite images.