We’ve just moved to our new home! If something doesn’t work as expected, please contact us, we appreciate your help.
Back to Prompts
General Purpose Code Assistance

Generate Full WordPress UI Shortcode From API

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

Prompt
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.
0 views 0 copies