Online HTML Compiler (Editor)

Output

\n`, language: selectedLanguage, theme: selectedLanguage === "html" ? "vs-light" : "vs-dark", fontSize: 16, scrollBeyondLastLine: false, scrollbar: { vertical: "hidden", alwaysConsumeMouseWheel: false }, overviewRulerLanes: 0, automaticLayout: true, minimap: { enabled: false } }); }); function runCode() { let runButton = document.getElementById("runButton"); let runText = document.getElementById("runText"); let runLoader = document.getElementById("runLoader"); // Disable Button & Show Loader runButton.disabled = true; runText.style.display = "none"; runLoader.style.display = "block"; let code = editor.getValue(); let outputBox = document.getElementById("output"); if (selectedLanguage === "html") { // Execute HTML code directly outputBox.innerHTML = ``; let outputFrame = document.getElementById("outputFrame").contentWindow.document; outputFrame.open(); outputFrame.write(code); outputFrame.close(); setTimeout(() => { // Enable Button & Hide Loader after execution runLoader.style.display = "none"; runText.style.display = "block"; runButton.disabled = false; }, 300); } else { // Handle other languages inputQueue = extractInputPrompts(code, selectedLanguage); currentInputIndex = 0; userInputs = []; outputBox.innerHTML = ""; setTimeout(() => { askForInput(); // Enable Button & Hide Loader after execution runLoader.style.display = "none"; runText.style.display = "block"; runButton.disabled = false; }, 1000); } } function askForInput() { if (currentInputIndex < inputQueue.length) { let promptMessage = inputQueue[currentInputIndex]; let outputBox = document.getElementById("output"); let line = document.createElement("div"); line.innerHTML = `${promptMessage} `; let inputField = document.createElement("input"); inputField.type = "text"; inputField.className = "console-input"; inputField.addEventListener("keypress", function (event) { if (event.key === "Enter") { event.preventDefault(); userInputs.push(inputField.value.trim()); inputField.disabled = true; line.innerHTML = `${promptMessage} ${inputField.value}`; currentInputIndex++; askForInput(); } }); line.appendChild(inputField); outputBox.appendChild(line); inputField.focus(); } else { executeCode(userInputs.join("\n")); } } function extractInputPrompts(code, language) { let regexMap = { "c": /printf$"(.*?)"$;[\s]*scanf/g, "cpp": /cout\s*<<\s*"(.*?)"\s*;\s*cin/g, "java": /System\.out\.print$"(.*?)"$;[\s\S]*?Scanner\s*\w+\s*=\s*new\s*Scanner/g, "python": /input$"(.*?)"$/g, "javascript": /prompt$"(.*?)"$/g, "php": /echo\s*"(.*?)";[\s\S]*?fgets/g, "ruby": /puts\s*"(.*?)";[\s\S]*?gets/g, "swift": /print$"(.*?)"$;[\s\S]*?readLine/g, "kotlin": /print$"(.*?)"$;[\s\S]*?readLine/g, "rust": /println!$"(.*?)"$;[\s\S]*?stdin/g, "go": /fmt\.Print$"(.*?)"$;[\s\S]*?fmt\.Scan/g, "csharp": /Console\.Write$"(.*?)"$;[\s\S]*?Console\.ReadLine/g, "typescript": /console\.log$"(.*?)"$;[\s\S]*?readline/g, "perl": /print\s*"(.*?)"\s*;\s*\$input\s*=\s*/g, "r": /cat$"(.*?)"$\s*;\s*readline/g }; let regex = regexMap[language] || regexMap["c"]; let match, prompts = []; while ((match = regex.exec(code)) !== null) { prompts.push(match[1]); } return prompts.length > 0 ? prompts : []; // Don't return a default prompt if no input is found } function executeCode(userInput) { fetch("/run", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ language_id: languageId, source_code: editor.getValue(), stdin: userInput }) }) .then(response => response.json()) .then(data => { let outputBox = document.getElementById("output"); let resultDiv = document.createElement("div"); let outputLines = (data.stdout || data.stderr || "Error executing code.").split(/\r?\n/); if (data.stdout) outputLines = data.stdout.split("\n"); else if (data.stderr) outputLines = data.stderr.split("\n"); else outputLines = ["Error executing code."]; // ✅ Debug logs //console.log("Input Queue:", inputQueue); //console.log("Output Lines:", outputLines); let filteredOutput = outputLines.map(line => { let modifiedLine = line; // Remove only exact user inputs inputQueue.forEach(input => { modifiedLine = modifiedLine.replace(input.trim(), "").trim(); }); return modifiedLine; }).filter(line => line !== "").join("\n"); if (!outputBox) { console.error("Error: outputBox is not defined or does not exist."); return; } if (!resultDiv) { console.error("Error: resultDiv is not defined."); return; } // ✅ Update result display resultDiv.innerHTML = `${filteredOutput}`; outputBox.appendChild(resultDiv); }); } function downloadCode() { let code = editor.getValue(); let blob = new Blob([code], { type: "text/plain" }); let a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "code.txt"; document.body.appendChild(a); a.click(); document.body.removeChild(a); } window.onload = function () { runCode(); }; function clearOutput() { document.getElementById("output").innerHTML = ""; }