diff --git a/javascript-executor.html b/javascript-executor.html
new file mode 100644
index 00000000..3b1cd422
--- /dev/null
+++ b/javascript-executor.html
@@ -0,0 +1,1098 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Language Code Executor</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .header h1 {
+            color: white;
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .header p {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 1.1rem;
+        }
+
+        .api-config {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .api-config label {
+            font-weight: 600;
+            color: #333;
+        }
+
+        .api-config input {
+            padding: 8px 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            min-width: 300px;
+        }
+
+        .api-config input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .api-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.9rem;
+        }
+
+        .status-indicator {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #dc3545;
+        }
+
+        .status-indicator.connected {
+            background: #28a745;
+        }
+
+        .layout {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            height: 70vh;
+        }
+
+        .panel {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+        }
+
+        .panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #e0e0e0;
+        }
+
+        .panel-title {
+            font-size: 1.3rem;
+            font-weight: 600;
+            color: #333;
+        }
+
+        .language-selector {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .language-selector select {
+            padding: 8px 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            background: white;
+            cursor: pointer;
+        }
+
+        .language-selector select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .editor-container {
+            flex: 1;
+            position: relative;
+        }
+
+        #codeEditor {
+            width: 100%;
+            height: 100%;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
+            padding: 15px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 14px;
+            line-height: 1.5;
+            resize: none;
+            background: #fafafa;
+            transition: border-color 0.3s ease;
+        }
+
+        #codeEditor:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .controls {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-secondary {
+            background: #f8f9fa;
+            color: #6c757d;
+            border: 2px solid #e9ecef;
+        }
+
+        .btn-secondary:hover:not(:disabled) {
+            background: #e9ecef;
+            border-color: #dee2e6;
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none !important;
+        }
+
+        .input-section {
+            margin-bottom: 15px;
+        }
+
+        .input-section label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #333;
+        }
+
+        .input-section textarea {
+            width: 100%;
+            height: 80px;
+            padding: 10px;
+            border: 2px solid #e0e0e0;
+            border-radius: 6px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 13px;
+            resize: vertical;
+        }
+
+        .input-section textarea:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .output-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #output {
+            flex: 1;
+            background: #1e1e1e;
+            color: #f8f8f2;
+            padding: 20px;
+            border-radius: 10px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            overflow-y: auto;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        .status-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            font-size: 0.9rem;
+            color: #666;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .execution-info {
+            display: flex;
+            gap: 20px;
+            font-size: 0.85rem;
+            flex-wrap: wrap;
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #28a745;
+        }
+
+        .status-dot.error {
+            background: #dc3545;
+        }
+
+        .status-dot.running {
+            background: #ffc107;
+            animation: pulse 1s infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
+        .examples {
+            margin-top: 15px;
+        }
+
+        .example-btn {
+            background: #e3f2fd;
+            color: #1976d2;
+            border: 1px solid #bbdefb;
+            padding: 8px 16px;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            margin: 5px 5px 5px 0;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .example-btn:hover {
+            background: #bbdefb;
+        }
+
+        .error-message {
+            background: rgba(220, 53, 69, 0.1);
+            border: 1px solid #dc3545;
+            color: #dc3545;
+            padding: 10px;
+            border-radius: 6px;
+            margin: 10px 0;
+        }
+
+        .success-message {
+            background: rgba(40, 167, 69, 0.1);
+            border: 1px solid #28a745;
+            color: #28a745;
+            padding: 10px;
+            border-radius: 6px;
+            margin: 10px 0;
+        }
+
+        @media (max-width: 768px) {
+            .layout {
+                grid-template-columns: 1fr;
+                height: auto;
+            }
+
+            .panel {
+                min-height: 400px;
+            }
+
+            .container {
+                padding: 20px;
+            }
+
+            .header h1 {
+                font-size: 2rem;
+            }
+
+            .api-config {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .api-config input {
+                min-width: auto;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚀 Multi-Language Code Executor</h1>
+            <p>Execute code in 75+ programming languages using Judge0 API</p>
+        </div>
+
+        <div class="api-config">
+            <label for="apiKey">RapidAPI Key:</label>
+            <input type="password" id="apiKey" placeholder="Enter your RapidAPI key for Judge0">
+            <div class="api-status">
+                <div id="apiStatusIndicator" class="status-indicator"></div>
+                <span id="apiStatusText">Not connected</span>
+            </div>
+            <button id="testApiBtn" class="btn btn-secondary">Test Connection</button>
+        </div>
+
+        <div class="layout">
+            <div class="panel">
+                <div class="panel-header">
+                    <h3 class="panel-title">📝 Code Editor</h3>
+                    <div class="language-selector">
+                        <label for="languageSelect">Language:</label>
+                        <select id="languageSelect">
+                            <option value="63">JavaScript (Node.js 12.14.0)</option>
+                            <option value="71">Python (3.8.1)</option>
+                            <option value="62">Java (OpenJDK 13.0.1)</option>
+                            <option value="54">C++ (GCC 9.2.0)</option>
+                            <option value="50">C (GCC 9.2.0)</option>
+                            <option value="51">C# (Mono 6.6.0.161)</option>
+                            <option value="68">PHP (7.4.1)</option>
+                            <option value="72">Ruby (2.7.0)</option>
+                            <option value="60">Go (1.13.5)</option>
+                            <option value="78">Kotlin (1.3.70)</option>
+                            <option value="85">Perl (5.28.1)</option>
+                            <option value="43">Plain Text</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="editor-container">
+                    <textarea id="codeEditor" placeholder="// Write your code here..."></textarea>
+                </div>
+
+                <div class="input-section">
+                    <label for="inputData">Input (stdin):</label>
+                    <textarea id="inputData" placeholder="Enter input data for your program (optional)"></textarea>
+                </div>
+
+                <div class="controls">
+                    <button id="runBtn" class="btn btn-primary">
+                        ▶️ Run Code
+                    </button>
+                    <button id="clearBtn" class="btn btn-secondary">
+                        🗑️ Clear
+                    </button>
+                    <button id="loadExampleBtn" class="btn btn-secondary">
+                        📄 Load Example
+                    </button>
+                </div>
+
+                <div class="examples">
+                    <strong>Quick Examples:</strong><br>
+                    <button class="example-btn" data-lang="63" data-example="hello-js">Hello World (JS)</button>
+                    <button class="example-btn" data-lang="71" data-example="hello-py">Hello World (Python)</button>
+                    <button class="example-btn" data-lang="62" data-example="hello-java">Hello World (Java)</button>
+                    <button class="example-btn" data-lang="54" data-example="hello-cpp">Hello World (C++)</button>
+                    <button class="example-btn" data-lang="71" data-example="input-py">Input Example (Python)</button>
+                </div>
+            </div>
+
+            <div class="panel">
+                <div class="panel-header">
+                    <h3 class="panel-title">📊 Output Console</h3>
+                    <button id="clearOutputBtn" class="btn btn-secondary" style="padding: 8px 16px; font-size: 0.9rem;">
+                        Clear Output
+                    </button>
+                </div>
+
+                <div class="output-container">
+                    <div id="output">🔧 Setup Instructions:
+
+1. Get your RapidAPI key:
+   - Visit https://rapidapi.com/judge0-official/api/judge0-ce
+   - Subscribe to the Judge0 API (free tier available)
+   - Copy your RapidAPI key
+
+2. Enter your API key above and test the connection
+
+3. Select a programming language and start coding!
+
+Ready to execute code in 75+ languages...</div>
+                </div>
+
+                <div class="status-bar">
+                    <div class="status-indicator">
+                        <div id="statusDot" class="status-dot"></div>
+                        <span id="statusText">Ready</span>
+                    </div>
+                    <div class="execution-info">
+                        <span id="executionTime">Execution time: --</span>
+                        <span id="memoryUsage">Memory: --</span>
+                        <span id="submissionStatus">Status: --</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        class MultiLanguageExecutor {
+            constructor() {
+                this.apiKey = '';
+                this.apiEndpoint = 'https://judge0-ce.p.rapidapi.com';
+                this.isExecuting = false;
+                this.pollInterval = null;
+                
+                this.initializeElements();
+                this.initializeEventListeners();
+                this.setupExamples();
+                this.loadApiKey();
+            }
+
+            initializeElements() {
+                this.elements = {
+                    apiKey: document.getElementById('apiKey'),
+                    apiStatusIndicator: document.getElementById('apiStatusIndicator'),
+                    apiStatusText: document.getElementById('apiStatusText'),
+                    testApiBtn: document.getElementById('testApiBtn'),
+                    languageSelect: document.getElementById('languageSelect'),
+                    codeEditor: document.getElementById('codeEditor'),
+                    inputData: document.getElementById('inputData'),
+                    runBtn: document.getElementById('runBtn'),
+                    clearBtn: document.getElementById('clearBtn'),
+                    loadExampleBtn: document.getElementById('loadExampleBtn'),
+                    clearOutputBtn: document.getElementById('clearOutputBtn'),
+                    output: document.getElementById('output'),
+                    statusDot: document.getElementById('statusDot'),
+                    statusText: document.getElementById('statusText'),
+                    executionTime: document.getElementById('executionTime'),
+                    memoryUsage: document.getElementById('memoryUsage'),
+                    submissionStatus: document.getElementById('submissionStatus')
+                };
+            }
+
+            initializeEventListeners() {
+                this.elements.apiKey.addEventListener('input', () => this.saveApiKey());
+                this.elements.testApiBtn.addEventListener('click', () => this.testConnection());
+                this.elements.runBtn.addEventListener('click', () => this.executeCode());
+                this.elements.clearBtn.addEventListener('click', () => this.clearEditor());
+                this.elements.loadExampleBtn.addEventListener('click', () => this.loadCurrentExample());
+                this.elements.clearOutputBtn.addEventListener('click', () => this.clearOutput());
+                this.elements.languageSelect.addEventListener('change', () => this.onLanguageChange());
+
+                // Keyboard shortcuts
+                this.elements.codeEditor.addEventListener('keydown', (e) => {
+                    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                        e.preventDefault();
+                        this.executeCode();
+                    }
+                });
+
+                // Example buttons
+                document.querySelectorAll('.example-btn').forEach(btn => {
+                    btn.addEventListener('click', () => {
+                        const langId = btn.dataset.lang;
+                        const example = btn.dataset.example;
+                        this.elements.languageSelect.value = langId;
+                        this.onLanguageChange();
+                        this.loadExample(example);
+                    });
+                });
+            }
+
+            loadApiKey() {
+                const saved = localStorage.getItem('judge0_api_key');
+                if (saved) {
+                    this.elements.apiKey.value = saved;
+                    this.apiKey = saved;
+                }
+            }
+
+            saveApiKey() {
+                this.apiKey = this.elements.apiKey.value;
+                if (this.apiKey) {
+                    localStorage.setItem('judge0_api_key', this.apiKey);
+                } else {
+                    localStorage.removeItem('judge0_api_key');
+                }
+                this.updateApiStatus(false, 'Not tested');
+            }
+
+            async testConnection() {
+                if (!this.apiKey) {
+                    this.showError('Please enter your RapidAPI key first');
+                    return;
+                }
+
+                this.elements.testApiBtn.disabled = true;
+                this.elements.testApiBtn.textContent = 'Testing...';
+
+                try {
+                    const response = await fetch(`${this.apiEndpoint}/languages`, {
+                        headers: {
+                            'X-RapidAPI-Key': this.apiKey,
+                            'X-RapidAPI-Host': 'judge0-ce.p.rapidapi.com'
+                        }
+                    });
+
+                    if (response.ok) {
+                        const languages = await response.json();
+                        this.updateApiStatus(true, `Connected (${languages.length} languages available)`);
+                        this.updateLanguageOptions(languages);
+                    } else {
+                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                    }
+                } catch (error) {
+                    this.updateApiStatus(false, `Connection failed: ${error.message}`);
+                    this.showError(`API connection failed: ${error.message}`);
+                } finally {
+                    this.elements.testApiBtn.disabled = false;
+                    this.elements.testApiBtn.textContent = 'Test Connection';
+                }
+            }
+
+            updateApiStatus(connected, text) {
+                this.elements.apiStatusIndicator.className = connected ? 'status-indicator connected' : 'status-indicator';
+                this.elements.apiStatusText.textContent = text;
+            }
+
+            updateLanguageOptions(languages) {
+                // Keep current selection
+                const currentValue = this.elements.languageSelect.value;
+                
+                // Clear and repopulate
+                this.elements.languageSelect.innerHTML = '';
+                
+                languages.forEach(lang => {
+                    const option = document.createElement('option');
+                    option.value = lang.id;
+                    option.textContent = `${lang.name}`;
+                    this.elements.languageSelect.appendChild(option);
+                });
+
+                // Restore selection if still available
+                if ([...this.elements.languageSelect.options].some(opt => opt.value === currentValue)) {
+                    this.elements.languageSelect.value = currentValue;
+                }
+            }
+
+            onLanguageChange() {
+                // Clear the editor when language changes
+                // this.clearEditor();
+                
+                // Update placeholder based on language
+                const selectedOption = this.elements.languageSelect.selectedOptions[0];
+                if (selectedOption) {
+                    const langName = selectedOption.textContent.toLowerCase();
+                    if (langName.includes('python')) {
+                        this.elements.codeEditor.placeholder = '# Write your Python code here...';
+                    } else if (langName.includes('java')) {
+                        this.elements.codeEditor.placeholder = '// Write your Java code here...';
+                    } else if (langName.includes('c++') || langName.includes('cpp')) {
+                        this.elements.codeEditor.placeholder = '// Write your C++ code here...';
+                    } else if (langName.includes('javascript')) {
+                        this.elements.codeEditor.placeholder = '// Write your JavaScript code here...';
+                    } else {
+                        this.elements.codeEditor.placeholder = '// Write your code here...';
+                    }
+                }
+            }
+
+            async executeCode() {
+                if (!this.apiKey) {
+                    this.showError('Please enter and test your RapidAPI key first');
+                    return;
+                }
+
+                if (this.isExecuting) {
+                    return;
+                }
+
+                const code = this.elements.codeEditor.value.trim();
+                if (!code) {
+                    this.showError('Please enter some code to execute');
+                    return;
+                }
+
+                this.startExecution();
+
+                try {
+                    // Submit code for execution
+                    const submissionToken = await this.submitCode();
+                    
+                    // Poll for results
+                    await this.pollForResults(submissionToken);
+                    
+                } catch (error) {
+                    this.showError(`Execution failed: ${error.message}`);
+                } finally {
+                    this.stopExecution();
+                }
+            }
+
+            async submitCode() {
+                const languageId = this.elements.languageSelect.value;
+                const sourceCode = this.elements.codeEditor.value;
+                const input = this.elements.inputData.value || null;
+
+                const submissionData = {
+                    source_code: btoa(sourceCode), // Base64 encode
+                    language_id: parseInt(languageId),
+                    stdin: input ? btoa(input) : null
+                };
+
+                const response = await fetch(`${this.apiEndpoint}/submissions?base64_encoded=true&wait=false`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-RapidAPI-Key': this.apiKey,
+                        'X-RapidAPI-Host': 'judge0-ce.p.rapidapi.com'
+                    },
+                    body: JSON.stringify(submissionData)
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({}));
+                    throw new Error(errorData.message || `HTTP ${response.status}: ${response.statusText}`);
+                }
+
+                const result = await response.json();
+                return result.token;
+            }
+
+            async pollForResults(token) {
+                return new Promise((resolve, reject) => {
+                    let attempts = 0;
+                    const maxAttempts = 30; // 30 seconds timeout
+                    
+                    this.pollInterval = setInterval(async () => {
+                        try {
+                            attempts++;
+                            
+                            if (attempts > maxAttempts) {
+                                clearInterval(this.pollInterval);
+                                reject(new Error('Execution timeout - please try again'));
+                                return;
+                            }
+
+                            const response = await fetch(`${this.apiEndpoint}/submissions/${token}?base64_encoded=true`, {
+                                headers: {
+                                    'X-RapidAPI-Key': this.apiKey,
+                                    'X-RapidAPI-Host': 'judge0-ce.p.rapidapi.com'
+                                }
+                            });
+
+                            if (!response.ok) {
+                                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                            }
+
+                            const result = await response.json();
+                            
+                            // Update status
+                            this.elements.submissionStatus.textContent = `Status: ${result.status.description}`;
+                            
+                            // Check if execution is complete
+                            if (result.status.id > 2) { // Not "In Queue" or "Processing"
+                                clearInterval(this.pollInterval);
+                                this.displayResults(result);
+                                resolve(result);
+                            }
+                            
+                        } catch (error) {
+                            clearInterval(this.pollInterval);
+                            reject(error);
+                        }
+                    }, 1000); // Poll every second
+                });
+            }
+
+            displayResults(result) {
+                this.clearOutput();
+                
+                // Display execution info
+                if (result.time) {
+                    this.elements.executionTime.textContent = `Execution time: ${parseFloat(result.time * 1000).toFixed(2)}ms`;
+                }
+                if (result.memory) {
+                    this.elements.memoryUsage.textContent = `Memory: ${result.memory}KB`;
+                }
+
+                // Display output
+                let output = '';
+                
+                if (result.stdout) {
+                    output += '📤 Output:\n';
+                    output += atob(result.stdout) + '\n\n';
+                }
+                
+                if (result.stderr) {
+                    output += '⚠️ Error Output:\n';
+                    output += atob(result.stderr) + '\n\n';
+                }
+                
+                if (result.compile_output) {
+                    output += '🔨 Compilation Output:\n';
+                    output += atob(result.compile_output) + '\n\n';
+                }
+
+                // Status information
+                output += `📊 Execution Status: ${result.status.description}\n`;
+                
+                if (result.status.id === 3) { // Accepted
+                    output += '✅ Code executed successfully!';
+                    this.elements.statusDot.className = 'status-dot';
+                } else {
+                    output += `❌ Execution completed with status: ${result.status.description}`;
+                    this.elements.statusDot.className = 'status-dot error';
+                }
+
+                this.elements.output.textContent = output || 'No output generated.';
+            }
+
+            startExecution() {
+                this.isExecuting = true;
+                this.elements.runBtn.disabled = true;
+                this.elements.runBtn.textContent = '⏳ Executing...';
+                this.elements.statusDot.className = 'status-dot running';
+                this.elements.statusText.textContent = 'Executing...';
+                this.elements.submissionStatus.textContent = 'Status: Submitting...';
+                
+                this.clearOutput();
+                this.elements.output.textContent = '🚀 Submitting code for execution...\n\nPlease wait...';
+            }
+
+            stopExecution() {
+                this.isExecuting = false;
+                this.elements.runBtn.disabled = false;
+                this.elements.runBtn.textContent = '▶️ Run Code';
+                this.elements.statusText.textContent = 'Ready';
+                
+                if (this.pollInterval) {
+                    clearInterval(this.pollInterval);
+                    this.pollInterval = null;
+                }
+            }
+
+            clearEditor() {
+                this.elements.codeEditor.value = '';
+                this.elements.inputData.value = '';
+                this.elements.codeEditor.focus();
+            }
+
+            clearOutput() {
+                this.elements.output.textContent = '';
+                this.elements.executionTime.textContent = 'Execution time: --';
+                this.elements.memoryUsage.textContent = 'Memory: --';
+                this.elements.submissionStatus.textContent = 'Status: --';
+            }
+
+            loadCurrentExample() {
+                const selectedLang = this.elements.languageSelect.value;
+                const langName = this.elements.languageSelect.selectedOptions[0].textContent.toLowerCase();
+                
+                if (langName.includes('python')) {
+                    this.loadExample('hello-py');
+                } else if (langName.includes('java')) {
+                    this.loadExample('hello-java');
+                } else if (langName.includes('javascript')) {
+                    this.loadExample('hello-js');
+                } else if (langName.includes('c++')) {
+                    this.loadExample('hello-cpp');
+                } else {
+                    this.loadExample('hello-js'); // Default
+                }
+            }
+
+            setupExamples() {
+                this.examples = {
+                    'hello-js': {
+                        code: `console.log("Hello, World!");
+console.log("Welcome to Multi-Language Code Executor!");
+
+// Simple calculation
+const sum = 2 + 3;
+console.log("2 + 3 =", sum);
+
+// Array processing
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+console.log("Doubled array:", doubled);`,
+                        input: ''
+                    },
+                    'hello-py': {
+                        code: `print("Hello, World!")
+print("Welcome to Multi-Language Code Executor!")
+
+# Simple calculation
+sum_result = 2 + 3
+print(f"2 + 3 = {sum_result}")
+
+# List processing
+numbers = [1, 2, 3, 4, 5]
+doubled = [n * 2 for n in numbers]
+print(f"Doubled list: {doubled}")
+
+# Function example
+def fibonacci(n):
+    if n <= 1:
+        return n
+    return fibonacci(n-1) + fibonacci(n-2)
+
+print(f"Fibonacci(10) = {fibonacci(10)}")`,
+                        input: ''
+                    },
+                    'hello-java': {
+                        code: `public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+        System.out.println("Welcome to Multi-Language Code Executor!");
+        
+        // Simple calculation
+        int sum = 2 + 3;
+        System.out.println("2 + 3 = " + sum);
+        
+        // Array processing
+        int[] numbers = {1, 2, 3, 4, 5};
+        System.out.print("Original array: ");
+        for (int num : numbers) {
+            System.out.print(num + " ");
+        }
+        System.out.println();
+        
+        System.out.print("Doubled array: ");
+        for (int num : numbers) {
+            System.out.print((num * 2) + " ");
+        }
+        System.out.println();
+        
+        // Method example
+        System.out.println("Factorial of 5 = " + factorial(5));
+    }
+    
+    public static int factorial(int n) {
+        if (n <= 1) return 1;
+        return n * factorial(n - 1);
+    }
+}`,
+                        input: ''
+                    },
+                    'hello-cpp': {
+                        code: `#include <iostream>
+#include <vector>
+#include <algorithm>
+
+using namespace std;
+
+int main() {
+    cout << "Hello, World!" << endl;
+    cout << "Welcome to Multi-Language Code Executor!" << endl;
+    
+    // Simple calculation
+    int sum = 2 + 3;
+    cout << "2 + 3 = " << sum << endl;
+    
+    // Vector processing
+    vector<int> numbers = {1, 2, 3, 4, 5};
+    
+    cout << "Original vector: ";
+    for (int num : numbers) {
+        cout << num << " ";
+    }
+    cout << endl;
+    
+    // Transform vector (double each element)
+    transform(numbers.begin(), numbers.end(), numbers.begin(),
+              [](int n) { return n * 2; });
+    
+    cout << "Doubled vector: ";
+    for (int num : numbers) {
+        cout << num << " ";
+    }
+    cout << endl;
+    
+    return 0;
+}`,
+                        input: ''
+                    },
+                    'input-py': {
+                        code: `# Example with user input
+name = input("What's your name? ")
+age = int(input("What's your age? "))
+
+print(f"Hello, {name}!")
+print(f"You are {age} years old.")
+
+if age >= 18:
+    print("You are an adult.")
+else:
+    print("You are a minor.")
+
+# Calculate birth year (approximate)
+from datetime import datetime
+current_year = datetime.now().year
+birth_year = current_year - age
+print(f"You were probably born in {birth_year}.")`,
+                        input: `John Doe
+25`
+                    }
+                };
+            }
+
+            loadExample(exampleKey) {
+                const example = this.examples[exampleKey];
+                if (example) {
+                    this.elements.codeEditor.value = example.code;
+                    this.elements.inputData.value = example.input;
+                }
+            }
+
+            showError(message) {
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'error-message';
+                errorDiv.textContent = message;
+                
+                // Insert after API config
+                const apiConfig = document.querySelector('.api-config');
+                apiConfig.parentNode.insertBefore(errorDiv, apiConfig.nextSibling);
+                
+                // Remove after 5 seconds
+                setTimeout(() => {
+                    if (errorDiv.parentNode) {
+                        errorDiv.parentNode.removeChild(errorDiv);
+                    }
+                }, 5000);
+            }
+
+            showSuccess(message) {
+                const successDiv = document.createElement('div');
+                successDiv.className = 'success-message';
+                successDiv.textContent = message;
+                
+                // Insert after API config
+                const apiConfig = document.querySelector('.api-config');
+                apiConfig.parentNode.insertBefore(successDiv, apiConfig.nextSibling);
+                
+                // Remove after 3 seconds
+                setTimeout(() => {
+                    if (successDiv.parentNode) {
+                        successDiv.parentNode.removeChild(successDiv);
+                    }
+                }, 3000);
+            }
+        }
+
+        // Enhanced language definitions for better syntax highlighting hints
+        const LANGUAGE_CONFIGS = {
+            63: { // JavaScript
+                name: 'JavaScript',
+                fileExtension: '.js',
+                commentPrefix: '//',
+                keywords: ['function', 'const', 'let', 'var', 'if', 'else', 'for', 'while', 'return']
+            },
+            71: { // Python
+                name: 'Python',
+                fileExtension: '.py',
+                commentPrefix: '#',
+                keywords: ['def', 'if', 'else', 'elif', 'for', 'while', 'return', 'import', 'from']
+            },
+            62: { // Java
+                name: 'Java',  
+                fileExtension: '.java',
+                commentPrefix: '//',
+                keywords: ['public', 'class', 'static', 'void', 'if', 'else', 'for', 'while', 'return']
+            },
+            54: { // C++
+                name: 'C++',
+                fileExtension: '.cpp',
+                commentPrefix: '//',
+                keywords: ['#include', 'using', 'namespace', 'int', 'if', 'else', 'for', 'while', 'return']
+            }
+        };
+
+        // Initialize the application when the page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new MultiLanguageExecutor();
+            
+            // Add some helpful tooltips and info
+            const tooltips = {
+                'apiKey': 'Get your free RapidAPI key from https://rapidapi.com/judge0-official/api/judge0-ce',
+                'languageSelect': 'Choose from 75+ supported programming languages',
+                'inputData': 'Provide input data that your program will read from stdin',
+                'runBtn': 'Execute your code remotely using Judge0 API (Ctrl+Enter)'
+            };
+            
+            Object.entries(tooltips).forEach(([id, tooltip]) => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.title = tooltip;
+                }
+            });
+        });
+
+        // Add some utility functions for better UX
+        function formatOutput(text) {
+            return text.replace(/\n/g, '\n').replace(/\t/g, '    ');
+        }
+
+        function getLanguageInfo(languageId) {
+            return LANGUAGE_CONFIGS[languageId] || { 
+                name: 'Unknown', 
+                fileExtension: '.txt', 
+                commentPrefix: '//' 
+            };
+        }
+
+        // Handle browser compatibility and error reporting
+        window.addEventListener('error', (event) => {
+            console.error('Application error:', event.error);
+        });
+
+        window.addEventListener('unhandledrejection', (event) => {
+            console.error('Unhandled promise rejection:', event.reason);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
