Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>JavaScript Code Analyzer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/jshint.js"></script> | |
| </head> | |
| <body class="bg-gray-100 p-8"> | |
| <div class="container mx-auto"> | |
| <h1 class="text-3xl font-bold mb-6 text-center"> | |
| JavaScript Code Analysis Tool | |
| </h1> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Code Editor --> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4">Input JavaScript Code</h2> | |
| <div | |
| id="editor" | |
| class="h-96 border rounded-lg" | |
| >// Paste your JavaScript code here | |
| function exampleFunction() { | |
| // Your code goes here | |
| } | |
| </div> | |
| </div> | |
| <!-- Results Panel --> | |
| <div> | |
| <h2 class="text-xl font-semibold mb-4">Analysis Results</h2> | |
| <div | |
| id="analysisResults" | |
| class="bg-white border rounded-lg p-4 h-96 overflow-y-auto" | |
| > | |
| <div id="lintingErrors" class="mb-4"> | |
| <h3 class="font-bold text-red-600">Linting Errors</h3> | |
| </div> | |
| <div id="consoleOutput"> | |
| <h3 class="font-bold text-green-600">Console Output</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex justify-center space-x-4 mt-6"> | |
| <button | |
| id="lintButton" | |
| class="bg-yellow-500 text-white px-6 py-2 rounded hover:bg-yellow-600" | |
| > | |
| Lint Code | |
| </button> | |
| <button | |
| id="runButton" | |
| class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600" | |
| > | |
| Run Code | |
| </button> | |
| <button | |
| id="autoFixButton" | |
| class="bg-green-500 text-white px-6 py-2 rounded hover:bg-green-600" | |
| > | |
| Auto Fix | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| const editor = ace.edit("editor"); | |
| editor.setTheme("ace/theme/monokai"); | |
| editor.session.setMode("ace/mode/javascript"); | |
| editor.setOptions({ | |
| enableBasicAutocompletion: true, | |
| enableSnippets: true, | |
| enableLiveAutocompletion: true | |
| }); | |
| document.getElementById('lintButton').addEventListener('click', () => { | |
| const code = editor.getValue(); | |
| const lintingErrors = document.getElementById('lintingErrors'); | |
| lintingErrors.innerHTML = '<h3 class="font-bold text-red-600">Linting Errors</h3>'; | |
| JSHINT(code, { | |
| esversion: 6, | |
| asi: true, | |
| unused: true, | |
| globals: { | |
| console: true, | |
| window: true, | |
| document: true | |
| } | |
| }); | |
| if (JSHINT.errors.length > 0) { | |
| JSHINT.errors.forEach((error, index) => { | |
| if (error) { | |
| const errorEl = document.createElement('div'); | |
| errorEl.innerHTML = ` | |
| <span class="text-red-500">Error ${index + 1}:</span> | |
| Line ${error.line}: ${error.reason} | |
| `; | |
| errorEl.className = 'mt-2 p-2 bg-red-50 rounded'; | |
| lintingErrors.appendChild(errorEl); | |
| } | |
| }); | |
| } else { | |
| const successEl = document.createElement('div'); | |
| successEl.textContent = '✅ No linting errors found!'; | |
| successEl.className = 'text-green-600 mt-2'; | |
| lintingErrors.appendChild(successEl); | |
| } | |
| }); | |
| document.getElementById('runButton').addEventListener('click', () => { | |
| const consoleOutput = document.getElementById('consoleOutput'); | |
| consoleOutput.innerHTML = '<h3 class="font-bold text-green-600">Console Output</h3>'; | |
| try { | |
| const code = editor.getValue(); | |
| const originalLog = console.log; | |
| const logs = []; | |
| console.log = (...args) => { | |
| logs.push(args.map(arg => | |
| typeof arg === 'object' ? JSON.stringify(arg) : arg | |
| ).join(' ')); | |
| }; | |
| const runCode = new Function('console', code); | |
| runCode(console); | |
| console.log = originalLog; | |
| logs.forEach(log => { | |
| const logEl = document.createElement('div'); | |
| logEl.textContent = log; | |
| consoleOutput.appendChild(logEl); | |
| }); | |
| } catch (error) { | |
| const errorEl = document.createElement('div'); | |
| errorEl.innerHTML = ` | |
| <span class="text-red-500">🚨 Execution Error:</span> | |
| ${error.message} | |
| `; | |
| errorEl.className = 'mt-2 p-2 bg-red-50 rounded'; | |
| consoleOutput.appendChild(errorEl); | |
| } | |
| }); | |
| document.getElementById('autoFixButton').addEventListener('click', () => { | |
| const code = editor.getValue(); | |
| const lintingErrors = document.getElementById('lintingErrors'); | |
| lintingErrors.innerHTML = '<h3 class="font-bold text-green-600">Auto-Fix Suggestions</h3>'; | |
| let fixedCode = code; | |
| // Basic auto-fix strategies | |
| fixedCode = fixedCode.replace(/([^;])\s*$/gm, '$1;'); | |
| const unclosedStringRegex = /([`'"])[^'"]*$/gm; | |
| if (unclosedStringRegex.test(fixedCode)) { | |
| fixedCode = fixedCode.replace(unclosedStringRegex, '$1'); | |
| } | |
| const undefinedVarRegex = /\b(\w+)\s*=[^;]+;(?!\s*const|\s*let|\s*var)/g; | |
| fixedCode = fixedCode.replace(undefinedVarRegex, 'let $1 = $&'); | |
| editor.setValue(fixedCode, -1); | |
| const suggestionsEl = document.createElement('div'); | |
| suggestionsEl.innerHTML = ` | |
| ✅ Auto-Fixed: | |
| <ul> | |
| <li>• Added missing semicolons</li> | |
| <li>• Closed unclosed strings</li> | |
| <li>• Declared potential undefined variables</li> | |
| </ul> | |
| `; | |
| suggestionsEl.className = 'mt-2 p-2 bg-green-50 rounded'; | |
| lintingErrors.appendChild(suggestionsEl); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |