Task 9: API fetching

[PradyumnaKrishna]

This task is API fetching a helper code is provided below to ease your task.

Task
Create a html file task9.html that consist of a profile page of user having.

• A profile avatar, name and bio below the avatar.
• Followed by other details containing age, gender, email, location, occupation, and hobbies.
• Add appropriate styling according to your personal preference.

Script
All details must be fetched from the API that has the URL https://cc-bhu.github.io/web-development/assets/api/person.json.
This code block might assist you.

// Fetch is a method to perform API call
fetch(url)
.then(response => response.json())
.then(data => {
    // Get element and change its innerHTML, use `data.name` or `data["name"]`.
    document.getElementById("name").innerHTML = data["name"];
});

To debug, you can use console.log(data); to log the data in developer tools -> console.

Demo

Resources

• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• https://www.w3schools.com/jsref/api_fetch.asp

[PradyumnaKrishna]

Solution: https://github.com/CC-BHU/web-development/blob/main/solutions/task9.html