Modern User Directory

A visually stunning, modern user directory demo built with HTML, CSS, and JavaScript.
This project features glassmorphism UI, animated statistics, smooth transitions, and a beautiful particle background. User data is fetched live from the JSONPlaceholder API.

---

✨ Features

• Modern UI/UX: Glassmorphism cards, gradients, and smooth animations
• Live Data: Fetches users from JSONPlaceholder API
• Animated Stats: Real-time animated counters for total users and unique cities
• Responsive Design: Mobile-friendly and accessible
• Loading & Error States: Animated spinner and graceful error handling
• Particle Background: Subtle animated floating particles
• Button Ripple Effects: Interactive micro-interactions for buttons

---

🚀 Getting Started

1. Clone or Download

git clone https://github.com/adiyaan010205/Fetch-API.git
cd Fetch-API

Or simply download and unzip the project folder.

2. Open in Browser

Just open index.html in your web browser.
No build tools or dependencies are required!

---

📁 Project Structure

modern-user-directory/
│
├── index.html      # Main HTML file
├── styles.css      # Modern glassmorphism and responsive styles
├── script.js       # JS for fetching users, UI logic, and animations
└── README.md       # This documentation file

---

🖥️ Usage

• Click "Load Users" to fetch and display user cards.
• See animated user and city counts at the top.
• Use "Reload Data" to refresh the list.
• If loading fails, a friendly error message and retry option are shown.

---

🛠️ Customization

• Color Palette & Styles: Tweak CSS variables in styles.css for your brand.
• API Source: Change the API endpoint in script.js for real data.
• Card Design: Customize user card layout in the createUserCard function.

---

📸 Screenshots

🙏 Credits

• JSONPlaceholder for the free fake API.
• Inspiration from modern UI/UX trends (2025).

---

Enjoy your beautiful, modern user directory!

---