POST Requests Practice Template

A comprehensive StackBlitz template for learning CRUD operations with the JSONPlaceholder API.

🎯 Learning Objectives

• Master POST, PUT, and DELETE HTTP methods
• Handle form data conversion to JSON
• Implement proper error handling for API requests
• Practice asynchronous JavaScript with fetch()
• Build user-friendly interfaces with loading states

🚀 Features

Core CRUD Operations

• CREATE: New posts, users, and comments
• READ: Load existing posts for editing
• UPDATE: Modify post content with PUT requests
• DELETE: Remove posts with confirmation

User Interface

• Tabbed Interface: Organized sections for different operations
• Form Validation: Required fields and data types
• Loading States: Visual feedback during API calls
• Real-time Logging: Network activity tracking
• Results Display: Formatted API response data

Educational Features

• Example Data: Quick-fill buttons for common scenarios
• Error Handling: Comprehensive error messages and recovery
• Network Monitoring: See exactly what requests are being sent
• Response Tracking: View all API responses in chronological order

📁 File Structure

activity-04-post-requests/
├── index.html          # Main interface with tabbed forms
├── styles.css          # Modern, responsive styling
├── script.js           # Complete CRUD implementation
├── README.md           # This documentation
└── sample-data.json    # Fallback data for offline testing

🔧 Quick Start

Option One: StackBlitz (Recommended)

1. Upload all files to a new StackBlitz project
2. Open the preview
3. Start creating posts, users, and comments!

Option 2: Local Development

1. Download all files to a folder
2. Run python3 -m http.server 8001
3. Open http://localhost:8001

📝 How to Use

One. Create New Posts

• Switch to "CREATE Post" tab
• Fill in title, content, and select user
• Click "Create Post" to send POST request
• Use example buttons for quick data entry

2. Create New Users

• Switch to "CREATE User" tab
• Enter user details (name, email, etc.)
• Submit to create new user account

3. Add Comments

• Switch to "CREATE Comment" tab
• Choose a post ID (1-100)
• Write your comment and submit

4. Update Existing Data

• Switch to "MANAGE Data" tab
• Enter post ID and click "Load Post"
• Modify title/content and update

5. Delete Posts

• In "MANAGE Data" tab
• Enter post ID and click "Delete Post"
• Confirm deletion in popup

🎨 Example Themes

The template includes pre-built examples for popular themes:

🔴 Pokemon Theme

{
  title: "My Epic Pokemon Team Battle",
  body: "Just had an amazing battle with Pikachu, Charmander, and Squirtle!",
  userId: 1
}

🍪 Recipe Theme

{
  title: "Perfect Chocolate Chip Cookies Recipe",
  body: "The secret is browning the butter first...",
  userId: 1
}

✈️ Travel Theme

{
  title: "Amazing Weekend in Tokyo",
  body: "Visited Senso-ji Temple, tried authentic ramen...",
  userId: 1
}

🌐 API Endpoints Used

All requests use JSONPlaceholder (https://jsonplaceholder.typicode.com):

• POST /posts - Create new posts
• POST /users - Create new users
• POST /comments - Add comments
• PUT /posts/{id} - Update existing posts
• DELETE /posts/{id} - Delete posts
• GET /posts/{id} - Load posts for editing

🧪 Testing Your Work

Manual Testing Checklist

• Create a new post successfully
• Handle form validation errors
• Update an existing post
• Delete a post with confirmation
• Add comments to different posts
• Create new users
• Check network log for all requests
• Verify error handling with invalid data

Developer Tools Verification

1. Open Browser DevTools -> Network tab
2. Perform various CRUD operations
3. Verify:
   • Correct HTTP methods (POST, PUT, DELETE)
   • Proper JSON in request bodies
   • Appropriate response status codes
   • Error handling for failed requests

🚨 Error Handling

The template handles common scenarios:

• Network Errors: Connection issues, timeouts
• HTTP Errors: 404, 400, 500 status codes
• Validation Errors: Missing required fields
• JSON Errors: Malformed response data

🎯 Extension Ideas

Beginner Extensions

• Add more form fields (categories, tags)
• Implement local storage for drafts
• Add character count for text fields

Intermediate Extensions

• Bulk operations (create multiple posts)
• Search existing posts before creating
• Image upload simulation

Advanced Extensions

• Implement optimistic updates
• Add retry logic for failed requests
• Create a JSON editor for custom requests

🐛 Common Issues & Solutions

"Failed to fetch" Error

Cause: Network connectivity or CORS issues Solution: Ensure you're using HTTPS and JSONPlaceholder is accessible

Form Doesn't Submit

Cause: JavaScript errors or missing event listeners Solution: Check browser console for errors

No Results Displayed

Cause: Response parsing issues Solution: Verify JSON structure in Network tab

Buttons Stay in Loading State

Cause: Unhandled promise rejections Solution: Ensure all async functions have try/catch blocks

📚 Learning Resources

• JSONPlaceholder Documentation
• Fetch API Guide
• HTTP Methods Overview
• Async/Await Tutorial

💡 Tips for Success

1. Start Simple: Begin with basic POST requests before adding complexity
2. Use Console: Check browser console for helpful error messages
3. Network Tab: Monitor actual HTTP requests being sent
4. Test Incrementally: Test each operation separately
5. Handle Errors: Always implement proper error handling

🤝 Contributing

Found a bug or have a suggestion? This template is designed to be educational and can be extended in many ways. Consider:

• Adding new themes or example data
• Improving error messages
• Enhancing the UI/UX
• Adding accessibility features

Happy coding! 🚀 This template provides a solid foundation for understanding CRUD operations with REST APIs.