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

2. Open the project folder.

3. 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.