| const output = document.getElementById('output'); |
| const input = document.getElementById('command-input'); |
|
|
| let commandHistory = []; |
| let historyIndex = -1; |
|
|
| input.addEventListener('keydown', async (event) => { |
| if (event.key === 'Enter') { |
| event.preventDefault(); |
| const command = input.value.trim(); |
| if (command) { |
| commandHistory.push(command); |
| historyIndex = commandHistory.length; |
| await executeCommand(command); |
| } |
| input.value = ''; |
| } else if (event.key === 'ArrowUp') { |
| event.preventDefault(); |
| if (historyIndex > 0) { |
| historyIndex--; |
| input.value = commandHistory[historyIndex]; |
| } |
| } else if (event.key === 'ArrowDown') { |
| event.preventDefault(); |
| if (historyIndex < commandHistory.length - 1) { |
| historyIndex++; |
| input.value = commandHistory[historyIndex]; |
| } else { |
| historyIndex = commandHistory.length; |
| input.value = ''; |
| } |
| } |
| }); |
|
|
| async function executeCommand(command) { |
| output.innerHTML += `$ ${command}\n`; |
|
|
| try { |
| const response = await fetch('http://localhost:5000/execute', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ command }), |
| }); |
|
|
| const data = await response.json(); |
|
|
| if (response.ok) { |
| output.innerHTML += data.output; |
| if (data.error) { |
| output.innerHTML += `Error: ${data.error}\n`; |
| } |
| } else { |
| output.innerHTML += `Error: ${data.error}\n`; |
| } |
| } catch (error) { |
| output.innerHTML += `Error: ${error.message}\n`; |
| } |
|
|
| output.scrollTop = output.scrollHeight; |
| } |
|
|
| |
| document.getElementById('terminal').addEventListener('click', () => { |
| input.focus(); |
| }); |
|
|
| |
| output.innerHTML = "Welcome to the Linux Practice Tool!\nType 'help' for a list of available commands.\n\n"; |
