forks

Creation chat

ClarkZhang
please create a json generator for me. user can enter how much fields or string length they what, and hit generate button, this page will create a json array with that length. and user can easily copy it. set a max fields count/string length for the page.
02-25 08:36

登录 后可以评论

Assistant
# JSON Generator Tool I'll create a responsive JSON generator tool that allows users to specify the number of fields and string length, then generates a JSON array with those parameters. The tool will include copy functionality and proper validation. (HTML code has been generated and updated; see above for the current version.) ## Features of this JSON Generator: 1. **User-Friendly Interface**: - Clean, modern design with responsive layout - Dark/light mode toggle with persistent settings - Clear input fields with validation indicators 2. **JSON Generation**: - Specify number of fields (1-100) and string length (1-1000) - Generates a JSON array with random alphanumeric strings - Each object contains 5 key-value pairs for realistic data 3. **Convenience Features**: - One-click copy to clipboard functionality - Character count display for generated JSON - Helpful usage instructions 4. **Responsive Design**: - Works on mobile, tablet, and desktop screens - Adapts layout based on screen size - Touch-friendly controls 5. **Error Handling**: - Input validation with user feedback - Custom modal for notifications - Console logging for debugging To use the tool, simply set your desired field count and string length, click "Generate JSON", and then copy the result to your clipboard. The generated JSON will be displayed in a formatted, readable way. Note: There's a Console panel in the bottom-right of the preview where you can view logs from the application. You can copy logs from there and paste them back into the chat for further debugging.
▼ Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>tailwind.config = { darkMode: 'class' }</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-200">
    <!-- Theme toggle button -->
    <button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
        <svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
        <svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
    </button>
    <script>
        function toggleTheme(){ 
            var el=document.documentElement; 
            var isDark=!el.classList.contains('dark'); 
            el.classList.toggle('dark',isDark); 
            localStorage.setItem('theme',isDark?'dark':'light'); 
            applyTheme(isDark); 
        }
        function applyTheme(isDark){ 
            document.getElementById('icon-moon').style.display=isDark?'none':'block'; 
            document.getElementById('icon-sun').style.display=isDark?'block':'none'; 
        }
        document.addEventListener('DOMContentLoaded',function(){ 
            var saved=localStorage.getItem('theme'); 
            var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); 
            document.documentElement.classList.toggle('dark',isDark); 
            applyTheme(isDark); 
        });
    </script>

    <!-- Custom modal -->
    <div id="custom-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 hidden" aria-hidden="true">
        <div class="rounded-xl bg-white dark:bg-slate-800 p-6 shadow-xl max-w-sm w-full border border-slate-200 dark:border-slate-700">
            <p id="custom-modal-msg" class="text-slate-700 dark:text-slate-200 mb-4"></p>
            <button type="button" onclick="hideModal()" class="w-full rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">OK</button>
        </div>
    </div>
    <script>
        function showModal(msg){ 
            var el=document.getElementById('custom-modal'); 
            document.getElementById('custom-modal-msg').textContent=msg||''; 
            el.classList.remove('hidden'); 
        }
        function hideModal(){ 
            document.getElementById('custom-modal').classList.add('hidden'); 
        }
    </script>

    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <header class="text-center mb-12">
            <h1 class="text-3xl md:text-4xl font-bold mb-4">JSON Generator</h1>
            <p class="text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
                Create custom JSON arrays with specified field counts and string lengths. Perfect for testing APIs and development workflows.
            </p>
        </header>

        <main class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div>
                    <label for="field-count" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        Number of Fields
                    </label>
                    <div class="relative">
                        <input 
                            type="number" 
                            id="field-count" 
                            min="1" 
                            max="100" 
                            value="5"
                            class="w-full p-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        >
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-slate-500">
                            <span>fields</span>
                        </div>
                    </div>
                    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
                        Maximum 100 fields allowed
                    </p>
                </div>

                <div>
                    <label for="string-length" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        String Length
                    </label>
                    <div class="relative">
                        <input 
                            type="number" 
                            id="string-length" 
                            min="1" 
                            max="1000" 
                            value="10"
                            class="w-full p-3 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        >
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-slate-500">
                            <span>characters</span>
                        </div>
                    </div>
                    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
                        Maximum 1000 characters per string
                    </p>
                </div>
            </div>

            <div class="flex flex-col sm:flex-row gap-3 mb-8">
                <button 
                    id="generate-btn"
                    class="flex-1 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2"
                >
                    <i class="fas fa-cogs"></i>
                    Generate JSON
                </button>
                <button 
                    id="copy-btn"
                    class="flex-1 bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-800 dark:text-slate-200 font-medium py-3 px-6 rounded-lg transition-colors duration-200 flex items-center justify-center gap-2"
                    disabled
                >
                    <i class="fas fa-copy"></i>
                    Copy to Clipboard
                </button>
            </div>

            <div class="mb-4 flex justify-between items-center">
                <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-200">Generated JSON</h2>
                <span id="json-length" class="text-sm text-slate-500 dark:text-slate-400"></span>
            </div>

            <div class="border border-slate-300 dark:border-slate-600 rounded-lg overflow-hidden">
                <pre id="json-output" class="bg-slate-100 dark:bg-slate-900 p-4 text-sm overflow-auto max-h-[400px] min-h-[200px] font-mono">{
  "message": "Click 'Generate JSON' to create your data"
}</pre>
            </div>
        </main>

        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-semibold mb-4 text-slate-800 dark:text-slate-200">How to Use</h2>
            <ul class="space-y-3 text-slate-600 dark:text-slate-300">
                <li class="flex items-start">
                    <span class="bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">1</span>
                    <span>Set the number of fields (1-100) and desired string length (1-1000)</span>
                </li>
                <li class="flex items-start">
                    <span class="bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">2</span>
                    <span>Click "Generate JSON" to create your custom JSON array</span>
                </li>
                <li class="flex items-start">
                    <span class="bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">3</span>
                    <span>Copy the generated JSON to your clipboard with the "Copy" button</span>
                </li>
                <li class="flex items-start">
                    <span class="bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">4</span>
                    <span>Use the JSON in your applications, APIs, or testing environments</span>
                </li>
            </ul>
        </div>
    </div>

    <footer class="text-center py-8 text-slate-600 dark:text-slate-400 text-sm">
        <p>JSON Generator Tool • All data is generated locally in your browser</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fieldCountInput = document.getElementById('field-count');
            const stringLengthInput = document.getElementById('string-length');
            const generateBtn = document.getElementById('generate-btn');
            const copyBtn = document.getElementById('copy-btn');
            const jsonOutput = document.getElementById('json-output');
            const jsonLength = document.getElementById('json-length');

            // Generate random string of specified length
            function generateRandomString(length) {
                const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                let result = '';
                for (let i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() * characters.length));
                }
                return result;
            }

            // Generate JSON based on parameters
            function generateJSON() {
                const fieldCount = parseInt(fieldCountInput.value) || 5;
                const stringLength = parseInt(stringLengthInput.value) || 10;
                
                // Validate inputs
                if (fieldCount < 1 || fieldCount > 100) {
                    showModal('Field count must be between 1 and 100');
                    return;
                }
                
                if (stringLength < 1 || stringLength > 1000) {
                    showModal('String length must be between 1 and 1000');
                    return;
                }
                
                // Create JSON array
                const jsonArray = [];
                for (let i = 0; i < fieldCount; i++) {
                    const obj = {};
                    for (let j = 0; j < 5; j++) { // Create 5 key-value pairs per object
                        const key = `field_${j + 1}`;
                        obj[key] = generateRandomString(stringLength);
                    }
                    jsonArray.push(obj);
                }
                
                // Format and display JSON
                const jsonString = JSON.stringify(jsonArray, null, 2);
                jsonOutput.textContent = jsonString;
                jsonLength.textContent = `${jsonString.length} characters`;
                
                // Enable copy button
                copyBtn.disabled = false;
                
                console.log(`Generated JSON with ${fieldCount} fields, each with strings of ${stringLength} characters`);
            }

            // Copy JSON to clipboard
            function copyToClipboard() {
                const textToCopy = jsonOutput.textContent;
                
                navigator.clipboard.writeText(textToCopy).then(() => {
                    showModal('JSON copied to clipboard!');
                    console.log('JSON copied to clipboard');
                }).catch(err => {
                    showModal('Failed to copy JSON to clipboard');
                    console.error('Failed to copy: ', err);
                });
            }

            // Event listeners
            generateBtn.addEventListener('click', generateJSON);
            copyBtn.addEventListener('click', copyToClipboard);
            
            // Allow Enter key to generate JSON
            fieldCountInput.addEventListener('keyup', function(event) {
                if (event.key === 'Enter') generateJSON();
            });
            
            stringLengthInput.addEventListener('keyup', function(event) {
                if (event.key === 'Enter') generateJSON();
            });
        });
    </script>
</body>
</html>
02-25 08:39

登录 后可以评论

Comments

登录 后可以评论