Fetch Posts

In this lab, you are going to fetch the post data from the JSONPlaceHolder API and display the first 20 titles returned from the API in an unordered list.

Steps

1. In the index.html file

• create a #fetchData button
• create a #postTitles un-ordered list (<ul> element)

2. Create an event listener for #fetchData for the click event.

3. Write the callback function for the event listener

• Fetch the posts data from the URL : https://jsonplaceholder.typicode.com/posts using a GET request
• Create <li> elements in the #postTitles list and display only the first 20 posts titles. You can access the post title using the title property on the each post object.

The /posts api route of jsonplaceholder gives 100 posts with the following object Structure

{
	body : string
	id: number
	title: string
	userId: number
}

For this challenge, you would only need to display the post title, in a list element by perform DOM Manipulation operations in your Callback Function of the Click Event Listener.

All the best!