Challenge points:
- Front End Styling
- Bootstrap Grid System
- Working with data using a third party API
- Population of Content through jQuery
- Assigning
.on('click', function)using jQuery - jQuery functions
You and your peer will be tackling a bit of jQuery and Front End using Bootstrap.
You are going to create an application that allows users to search for video games, and display the result's image and title inside of a div (one div per result). The display of results using Bootstrap allows you to create a grid system quickly.
In addition to this functionality, clicking a result's div should expand the div it is inside of to show all useful information (at minimum include the description, release date & platform), using jQuery's on function.
Rather than manually creating a database with video game data, this project uses Giantbomb's API. Since you're unfamiliar with the API and Ajax in general, we have already created the JavaScript functions for searching and you just have to create the front-end and manipulate the data. To use the functions you have to sign up at Giantbomb, then under "Grab an API key" click "Get one!" Take that API key and paste it into your JavaScript file so that var apikey = 'YOUR-API-KEY'.
##HARD MODE
In addition to the ability to search, the user should be able to sort and/or filter results based on platform, release date and name.
##PRO MODE
Add JavaScript pagination to the search results using previous and next button clicks. (hint: try wrapping each "page" of results in a div that starts off hidden.)