API Request Tool

A modern, user-friendly web application for testing and sending API requests. Built with vanilla HTML, CSS, and JavaScript.

Features

• 🚀 Multiple HTTP Methods: Support for GET, POST, PUT, PATCH, and DELETE requests
• 📝 Custom Headers: Add and manage custom request headers
• 📦 Request Body: Support for JSON, Text, and Form Data body formats
• 🔍 Query Parameters: Easily add URL query parameters
• 📊 Response Display: View response body and headers with syntax highlighting
• 📚 Request History: Automatically saves your request history (up to 50 requests)
• 💾 Local Storage: History persists in browser local storage
• 🎨 Modern UI: Beautiful, responsive design with gradient backgrounds

Usage

Option 1: Direct File Opening

Simply open index.html in your web browser.

Option 2: Local Server (Recommended)

npm install
npm start

This will start a local server at http://localhost:8080 and open it in your browser.

How to Use

1. Select HTTP Method: Choose from GET, POST, PUT, PATCH, or DELETE
2. Enter URL: Type or paste your API endpoint URL
3. Configure Headers (optional): Add custom headers in the Headers tab
4. Add Body (optional): For POST/PUT/PATCH requests, add request body in the Body tab
5. Add Query Parameters (optional): Add URL query parameters in the Query Params tab
6. Send Request: Click the "Send Request" button or press Ctrl+Enter
7. View Response: Check the response body and headers in the Response panel

Features in Detail

Request Body Formats

• JSON: Automatically formats and validates JSON
• Text: Plain text body
• Form Data: Key-value pairs for form submissions

Request History

• Click on any history item to quickly reload that request
• History is stored locally in your browser
• Automatically limited to 50 most recent requests

Response Display

• Body Tab: Shows the response body with syntax highlighting
• Headers Tab: Displays all response headers
• Status Indicator: Color-coded status (green for success, red for errors)

Browser Compatibility

Works in all modern browsers that support:

• Fetch API
• ES6+ JavaScript
• CSS Grid and Flexbox
• Local Storage

Example API Endpoints to Test

• https://jsonplaceholder.typicode.com/posts/1 (GET)
• https://jsonplaceholder.typicode.com/posts (POST)
• https://httpbin.org/get (GET with query params)
• https://httpbin.org/post (POST with JSON body)

License

MIT License - feel free to use and modify as needed.

Contributing

Contributions are welcome! Feel free to submit issues or pull requests.