var htmlCode = `

Hello World!

`; var cssCode = `h2{ color: green; font-style: italic; } `; var jsCode = `// Your JS code`; window.onload = () => { alert('If you like my code then please follow me on GitHub: \n\nhttps://github.com/devxprite'); const runBtn = document.getElementById('run-button'); const resultBtn = document.getElementById('result-tab'); const resultIframe = document.getElementById('result-iframe'); const tabs = ['html', 'css', 'javascript', 'result']; tabs.forEach(tab => { const tabEl = document.getElementById(`${tab}-tab`); tabEl.addEventListener('click', _ => { tabs.forEach(e => { document.getElementById(`${e}-tab`).classList.remove('active'); document.getElementById(`${e}-section`).style.display = 'none'; }); tabEl.classList.add('active'); document.getElementById(`${tab}-section`).style.display = 'block'; }); }); ace.require('ace/ext/language_tools'); const editorLangs = ['html', 'css', 'javascript']; const [htmlEditor, cssEditor, jsEditor] = editorLangs.map(lang => { const editor = ace.edit(`${lang}-section`); editor.setTheme('ace/theme/monokai'); editor.session.setMode(`ace/mode/${lang}`); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: false, removeGutterDecoration: true, showFoldWidgets: false, }); return editor; }); if (window.innerWidth > 768) { Split(document.querySelectorAll('.editors > *'), { minSize: 0, spanOffset: 50, onDragEnd: _ => { htmlEditor.resize(); cssEditor.resize(); jsEditor.resize(); }, }); } const runCode = _ => { htmlCode = htmlEditor.getValue(); cssCode = cssEditor.getValue(); jsCode = jsEditor.getValue(); resultIframe.setAttribute( 'srcdoc', ` ${htmlCode}

Code Editor (100% functional)