nss-day-cohort-34 / api-dash-oompa-loompa

api-dash-oompa-loompa created by GitHub Classroom

Third-Party API Dash

This quick dash is to allow you, and your teammates, to explore querying an API with the fetch command, convert the data into HTML components, and get those components displayed in the browser DOM.

Setup

We will be using Github classroom to set up your teams' repositories, so once your team is assembled, choose one of your teammates to click on the link that your instructor provides. That teammates will enter in your team name and create it, and then the other ones will click the link and join the team.

Instructions

Each one of you will be responsible for creating an HTML page - with a corresponding CSS and JavaScript file - that has one of the following responsibilities.

1. Fetch and display blog posts
2. Fetch and display images
3. Fetch and display todos

Each of these resources is available at https://jsonplaceholder.typicode.com/.

Blog Posts

These must be displayed in a 3-column grid, showing the title and body of the post. Only the first 20 posts should be displayed.

Images

These must be displayed in a 5-column grid, using the title and thumbnail image. When the user clicks on the thumbnail image, the user should see the full image. Only the first 50 images should be displayed.

Todos

These must be displayed in a 4-column grid with the title and a checkbox. If the task is complete, the checkbox must be checked. Only the first 30 tasks should be displayed.