diff --git a/abc.css b/abc.css
new file mode 100644
index 00000000..b6d9958c
--- /dev/null
+++ b/abc.css
@@ -0,0 +1,160 @@
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f7f9fc;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* Header */
+header {
+  text-align: center;
+  padding: 2rem 1rem;
+  background-color: #fff;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+}
+
+header h1 {
+  font-size: 2rem;
+  color: #1a73e8;
+}
+
+header p {
+  font-size: 1rem;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
+/* Main Container */
+.container {
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+/* API Section */
+.api-section {
+  background: #fff;
+  padding: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+  margin-bottom: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.api-section input {
+  flex: 1;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.api-section button {
+  background: #1a73e8;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.api-section button:hover {
+  background: #155fc0;
+}
+
+.status-dot {
+  font-size: 0.9rem;
+  color: #d00;
+}
+
+/* Editor and Console Layout */
+.editor-console-wrapper {
+  display: flex;
+  gap: 20px;
+  margin-top: 2rem;
+}
+
+.editor-section, .console-section {
+  flex: 1;
+  background-color: #fff;
+  padding: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+
+/* Editor */
+.editor-section h2, .console-section h2 {
+  font-size: 1.2rem;
+  color: #1a73e8;
+  margin-bottom: 0.5rem;
+}
+
+textarea, select {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  font-family: Consolas, monospace;
+  font-size: 0.9rem;
+  background: #f9f9f9;
+  color: #333;
+}
+
+/* Buttons */
+.button-group button,
+.quick-examples button,
+.console-section button {
+  background: #1a73e8;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  margin: 5px 5px 0 0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.button-group button:hover,
+.quick-examples button:hover,
+.console-section button:hover {
+  background: #155fc0;
+}
+
+/* Output Console */
+pre#outputConsole {
+  background: #f9f9f9;
+  color: #333;
+  padding: 10px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  min-height: 200px;
+  white-space: pre-wrap;
+  font-size: 0.9rem;
+  overflow-x: auto;
+}
+
+/* Footer */
+footer {
+  text-align: center;
+  padding: 1rem;
+  font-size: 0.9rem;
+  color: #888;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .editor-console-wrapper {
+    flex-direction: column;
+  }
+}
diff --git a/javascript-excecutor.js b/javascript-excecutor.js
new file mode 100644
index 00000000..b76b929f
--- /dev/null
+++ b/javascript-excecutor.js
@@ -0,0 +1,94 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('challengeForm');
+
+  form.addEventListener('submit', function (event) {
+    event.preventDefault(); // Stop form from submitting
+    let isValid = true;
+    clearErrors();
+
+    // Validate title
+    const title = document.getElementById('title');
+    if (title.value.trim() === '') {
+      showError(title, 'Title is required');
+      isValid = false;
+    }
+
+    // Validate description
+    const description = document.getElementById('description');
+    if (description.value.trim() === '') {
+      showError(description, 'Description is required');
+      isValid = false;
+    }
+
+    // Validate difficulty
+    const difficulty = document.getElementById('difficulty');
+    if (difficulty.value === '') {
+      showError(difficulty, 'Please select a difficulty level');
+      isValid = false;
+    }
+
+    // Validate test cases
+    const testCases = document.querySelectorAll('.test-case');
+    testCases.forEach((tc, index) => {
+      if (tc.value.trim() === '') {
+        showError(tc, `Test case ${index + 1} cannot be empty`);
+        isValid = false;
+      }
+    });
+
+    // Validate solution
+    const solution = document.getElementById('solution');
+    if (solution.value.trim() === '') {
+      showError(solution, 'Sample solution is required');
+      isValid = false;
+    }
+
+    if (isValid) {
+      alert('Challenge submitted successfully!');
+      form.reset(); // Clear the form
+    }
+  });
+
+  function showError(inputElement, message) {
+    let error = document.createElement('div');
+    error.className = 'error-message';
+    error.innerText = message;
+    inputElement.parentNode.appendChild(error);
+    inputElement.style.borderColor = 'red';
+  }
+
+  function clearErrors() {
+    document.querySelectorAll('.error-message').forEach((e) => e.remove());
+    document.querySelectorAll('input, textarea, select').forEach((el) => {
+      el.style.borderColor = '#ccc';
+    });
+  }
+});
+
+document.getElementById('downloadCode').addEventListener('click', () => {
+  const code = document.querySelector('#codeEditor').value; // Adjust selector if needed
+  const blob = new Blob([code], { type: 'text/plain' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+
+  // Optional: name the file based on selected language
+  const language = document.querySelector('#languageSelect').value || 'code';
+  const extension = getFileExtension(language);
+  link.download = `my_code.${extension}`;
+
+  link.click();
+});
+
+function getFileExtension(language) {
+  // Map language names to common extensions
+  const extensions = {
+    'javascript': 'js',
+    'python': 'py',
+    'java': 'java',
+    'c': 'c',
+    'cpp': 'cpp'
+    // Add more languages if needed
+  };
+  const key = language.toLowerCase();
+  return extensions[key] || 'txt';
+}
diff --git a/javascript-executor.html b/javascript-executor.html
index 3b1cd422..4dcb56f3 100644
--- a/javascript-executor.html
+++ b/javascript-executor.html
@@ -1,1098 +1,98 @@
 <!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>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Multi-Language Code Executor</title>
+  <link rel="stylesheet" href="abc.css">
+  <style>
+  .error-message {
+  color: red;
+  font-size: 0.9em;
+  margin-top: 5px;
+}
+#downloadCode {
+  background: #6c63ff;
+  color: white;
+  border: none;
+  padding: 8px 15px;
+  margin-left: 5px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+#downloadCode:hover {
+  background: #5751d8;
+}
+</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>
+  <header>
+    <h1>🚀 Multi-Language Code Executor</h1>
+    <p>Execute code in 75+ programming languages using Judge0 API</p>
+  </header>
+
+  <main class="container">
+    <!-- API Key Section -->
+    <div class="api-section">
+      <label for="apiKey">RapidAPI Key:</label>
+      <input type="text" id="apiKey" placeholder="Enter your RapidAPI key for Judge0" />
+      <span class="status-dot" id="apiStatus">🔴 Not connected</span>
+      <button id="testApi">Test Connection</button>
+    </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 class="editor-console-wrapper">
+      <!-- Code Editor Section -->
+      <section class="editor-section">
+        <h2>📄 Code Editor</h2>
+        <label for="languageSelect">Language:</label>
+        <select id="languageSelect">
+          <option value="javascript">JavaScript (Node.js 12.14.0)</option>
+          <option value="python">Python 3</option>
+          <option value="java">Java</option>
+          <option value="cpp">C++</option>
+        </select>
+        <textarea id="codeEditor" placeholder="// Write your code here..."></textarea>
+
+        <label for="stdin">Input (stdin):</label>
+        <textarea id="stdin" placeholder="Enter input data for your program (optional)"></textarea>
+
+        <div class="button-group">
+          <button id="runCode">▶ Run Code</button>
+          <button id="clearCode">🗑 Clear</button>
+          <button id="loadExample">📥 Load Example</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 class="quick-examples">
+          <p>Quick Examples:</p>
+          <button class="example-btn" data-example="js">Hello World (JS)</button>
+          <button class="example-btn" data-example="python">Hello World (Python)</button>
+          <button class="example-btn" data-example="java">Hello World (Java)</button>
+          <button class="example-btn" data-example="cpp">Hello World (C++)</button>
         </div>
+      </section>
+
+      <!-- Output Console Section -->
+      <section class="console-section">
+        <h2>📜 Output Console</h2>
+        <pre id="outputConsole">
+          📝 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!
+        </pre>
+        <button id="clearOutput">Clear Output</button>
+      </section>
     </div>
+  </main>
 
-    <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
-                });
-            }
+  <footer>
+    <p>Ready to execute code in 75+ languages...</p>
+  </footer>
 
-            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>
+  <script src="javascript-executor.js" defer></script>
 </body>
-</html>
\ No newline at end of file
+</html>
+