Skip to content

README.md

Latest commit

 

History

History
119 lines (81 loc) · 1.89 KB

README.md

File metadata and controls

119 lines (81 loc) · 1.89 KB
Raw

API Integration in JavaScript

A simple and beginner-friendly project demonstrating how to fetch data from a REST API using JavaScript's Fetch API and dynamically display it on a responsive web page.

This project uses the free JSONPlaceholder API to retrieve user information and render it as attractive user cards.

🚀 Features

  • Fetches data from a REST API
  • Uses JavaScript Fetch API
  • Handles asynchronous operations with Promises
  • Dynamically creates HTML elements
  • Responsive and modern UI
  • Glassmorphism-inspired card design
  • Beginner-friendly project structure
  • Clean and well-commented code

🛠️ Technologies Used

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Fetch API
  • JSONPlaceholder API

🌐 API Used

This project uses the free JSONPlaceholder REST API.

Endpoint

https://jsonplaceholder.typicode.com/users

📂 Project Structure

API-Integration-in-JS/
│
├── index.html
├── style.css
├── script.js
└── README.md

📸 Preview

The application fetches user data from the API and displays information such as:

  • Name
  • Username
  • Email
  • Phone
  • Website
  • Company
  • Address

📚 What You'll Learn

  • REST APIs
  • Fetch API
  • Promises
  • JSON parsing
  • Asynchronous JavaScript
  • DOM Manipulation
  • Dynamic UI Rendering

▶️ Getting Started

  1. Clone the repository
git clone https://github.com/Wasayullah/API-Integeration.git

  1. Open the project folder.

  2. Open index.html in your browser.

No installation or dependencies are required.

🎯 Future Improvements

  • Loading spinner
  • Error handling UI
  • Search users
  • Filter users
  • User details modal
  • Pagination
  • Dark/Light mode
  • API endpoint selector

🤝 Contributing

Contributions, suggestions, and improvements are welcome.

📄 License

This project is open source and available under the MIT License.