/api-explorer

api-explorer is a web project that demonstrates how to use different methods to fetch data from APIs. It utilizes three different approaches—XMLHttpRequest, Fetch API, and Axios—to retrieve and display data. The project fetches user and post data from the JSONPlaceholder API and displays it in a user-friendly format.

Primary LanguageJavaScript

Overview

api-explorer is a web project that demonstrates how to use different methods to fetch data from APIs. It utilizes three different approaches—XMLHttpRequest, Fetch API, and Axios—to retrieve and display data. The project fetches user and post data from the JSONPlaceholder API and displays it in a user-friendly format.

Features

  • Display Users and Posts: Fetch and display users and posts from the JSONPlaceholder API.
  • Dynamic Content Loading: Load user details and posts dynamically based on user selection.
  • Different Data Fetching Methods: Demonstrates data fetching using XMLHttpRequest, Fetch API, and Axios.

Project Structure

  • index.html: Contains the main structure of the web page, including the users and posts sections.
  • index.js: Contains the JavaScript logic for fetching and displaying data from the API.
  • style.css: Contains the styling for the project.

Usage

  1. Clone the Repository:

    git clone https://github.com/your-username/api-explorer.git

  2. Navigate to the Project Directory:

    cd api-explorer

  3. Install Dependencies: Make sure you have Axios installed. You can install it using npm:

    npm install axios

  4. Open the Project: Open index.html in your web browser to see the project in action.

JavaScript Functions

  • fill(elements, type): Populates the users or posts sections based on the type parameter.
  • getDataByXMLHR(url, callback): Fetches data using XMLHttpRequest and calls the provided callback function.
  • getDataByFetch(url, callback): Fetches data using the Fetch API and calls the provided callback function.
  • getDataByAxios(url, callback): Fetches data using Axios and calls the provided callback function.
  • showPost(user, element): Displays posts for the selected user and highlights the selected user.

CSS Styling

  • #main: Main container with gradient background and flex layout.
  • #users: Section for displaying user information.
  • #posts: Section for displaying posts.
  • .user and .post: Styling for user and post elements including background color, padding, and border.
  • .user.selected: Highlighted style for the selected user.

Contribution

Feel free to fork the repository and make your own contributions. Open issues and pull requests are welcome.

License

This project is licensed under the MIT License. See the LICENSE file for more details.