https://github.com/vidhya0501/project4_api_fetch_project

API fetch project using Advance Javascript
https://github.com/vidhya0501/project4_api_fetch_project

async-await bootstrap5 css3 fetch-api html5 javascript json try-catch

Last synced: 10 days ago
JSON representation

API fetch project using Advance Javascript

• Host: GitHub
• URL: https://github.com/vidhya0501/project4_api_fetch_project
• Owner: Vidhya0501
• Created: 2023-09-03T14:17:30.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-15T11:08:30.000Z (over 1 year ago)
• Last Synced: 2024-11-12T22:26:07.271Z (2 months ago)
• Topics: async-await, bootstrap5, css3, fetch-api, html5, javascript, json, try-catch
• Language: JavaScript
• Homepage: https://vidhya-api-fetch-project.netlify.app/
• Size: 8.79 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Project4_API_fetch_project

API fetch project using Advance Javascript.

1. In this project we use HTML, CSS, Bootstrap card and Advance JS.

2.In the header part we gave text as Users List with background color blue and text color white.

3. Then we fetch data from API using fetch().

4. After that using json() to convert API data into array of objects.

5. "for loop" is used to traverse the array and print all users data in separate cards using bootstrap card.

6. CSS flex property is used to display the cards properly.

7. We write this entire logic inside asyn-await method it'll make the function to wait until promise is settled.

8. And also try-catch block is used to handle errors, that is rejected state of promise.

9. Instead of async-await we can also achieve the same using .then() method.(code given below in commented lines)