LabsICT
🎓 Pro Courses
JavaScript Editor ← Back
`; outputFrame.srcdoc = html; } function setTemporaryText(button, temporaryText, originalText, delay = 1500) { button.textContent = temporaryText; setTimeout(() => { button.textContent = originalText; }, delay); } runBtn.addEventListener("click", () => { runCode(); setTemporaryText(runBtn, "Running...", "Run"); }); resetBtn.addEventListener("click", () => { editor.setValue(defaultCode, 1); localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultCode)); runCode(); setTemporaryText(resetBtn, "Reset Done", "Reset"); }); copyBtn.addEventListener("click", async () => { try { await navigator.clipboard.writeText(editor.getValue()); setTemporaryText(copyBtn, "Copied!", "Copy"); } catch { setTemporaryText(copyBtn, "Failed", "Copy"); } }); themeBtn.addEventListener("click", () => { isDarkEditor = !isDarkEditor; editor.setTheme(isDarkEditor ? "ace/theme/monokai" : "ace/theme/xcode"); localStorage.setItem(THEME_KEY, isDarkEditor ? "dark" : "light"); updateThemeButtonText(); }); shareBtn.addEventListener("click", async () => { const code = editor.getValue(); const shareUrl = `${window.location.origin}${window.location.pathname}?code=${encodeURIComponent(code)}`; try { if (navigator.share) { await navigator.share({ title: "LabsICT JavaScript Editor", text: "Check out my JavaScript code from LabsICT Editor", url: shareUrl, }); setTemporaryText(shareBtn, "Shared!", "Share"); } else { await navigator.clipboard.writeText(shareUrl); setTemporaryText(shareBtn, "Link Copied!", "Share"); } } catch { setTemporaryText(shareBtn, "Cancelled", "Share"); } }); // Load shared code from URL function loadSharedCode() { const params = new URLSearchParams(window.location.search); const sharedCode = params.get("code"); if (sharedCode) { editor.setValue(sharedCode, 1); localStorage.setItem(STORAGE_KEY, JSON.stringify(sharedCode)); } } loadSharedCode(); // Resizer const resizer = document.getElementById("resizer"); const leftPane = document.getElementById("editorPane"); const rightPane = document.getElementById("outputPane"); const container = document.querySelector(".editor-body"); let isDragging = false; resizer.addEventListener("pointerdown", (e) => { isDragging = true; resizer.setPointerCapture(e.pointerId); document.body.style.cursor = "col-resize"; }); resizer.addEventListener("pointermove", (e) => { if (!isDragging) return; const rect = container.getBoundingClientRect(); const offset = e.clientX - rect.left; const percent = (offset / rect.width) * 100; leftPane.style.flex = `0 0 ${percent}%`; rightPane.style.flex = `0 0 ${100 - percent}%`; }); resizer.addEventListener("pointerup", (e) => { isDragging = false; resizer.releasePointerCapture(e.pointerId); document.body.style.cursor = "default"; }); // Auto-run on load window.onload = () => { setTimeout(() => runCode(), 500); }; // ============ RESPONSIVE TAB SWITCH ============ window.addEventListener("editor-resize", () => editor.resize());