Prompts / Generate Full WordPress UI Shortcode From API

Generate Full WordPress UI Shortcode From API

by hassancs91

0

This prompt will help you generate a full professional UI on wordpress based on an API call and example response.

Code Assistance
Version imports

Try This Prompt

Prompt Template

Your Task is to Generate a professional, clean, and functional UI using HTML, CSS, and JavaScript as a WordPress Shortcode to interact with the provided API endpoint. The UI should call the API and display the results in an intuitive manner.

API Details
Endpoint Information
{{CURL}}

Example Response
{{response}}


Requirements
Technical Requirements
Single File: Create everything in a single HTML file with inline CSS and JavaScript
No External Dependencies: Don't use external libraries (jQuery, Bootstrap, etc.) - use vanilla JavaScript
WordPress Compatible: If for WordPress, create as a shortcode function without the opening PHP tag
Self-Contained: All styles and scripts should be inline for easy implementation

UI Requirements

Form Design:
Create input fields for all parameters shown in the curl command
Use appropriate input types (text, select, number, etc.)
Include proper labels and placeholders
Add required field validation


Visual Design:

Modern, clean, and professional appearance
Responsive layout that works on all devices
Use a cohesive color scheme
Include hover effects and transitions
Proper spacing and typography


Functionality:

Show loading state while API call is in progress
Display error messages if the API call fails
Format the response data in a readable way
Clear form or provide option to submit again


Best Practices:

Use semantic HTML
Include accessibility features (labels, ARIA where needed)
Implement proper error handling
Use async/await for API calls
Prevent form default submission



Output Format
Please provide the code as:

For WordPress: A complete shortcode function
For standalone: A complete HTML file
Keep the code concise but readable
Include comments for complex sections

Example Structure
The UI should generally follow this flow:

Input form with all necessary fields
Submit button
Loading indicator
Results display area
Error message container

Additional Context
[ADD ANY SPECIFIC REQUIREMENTS OR CONTEXT HERE, SUCH AS:]

Specific styling preferences
Additional features needed
Target audience
Brand colors or guidelines
Special formatting for response data


Please generate the complete code based on the above specifications.