README.MD

Mobile Friendly HTML editor

How to use it?

1. Open about:blank in your browser (just type it in and press enter)
2. Then, in the URL bar type javascript: and paste the JavaScript provided below and press enter. Ready Minified version:

!function(){const meta=document.createElement("meta");meta.name="viewport",meta.content="width=device-width, initial-scale=1.0",document.head.appendChild(meta),document.body.style.margin="0",document.body.style.height="100vh",document.body.style.display="grid",document.body.style.gridTemplateRows="1fr 1fr 1fr auto 2fr";const htmlBox=document.createElement("textarea");htmlBox.style.width="100%",htmlBox.style.boxSizing="border-box",htmlBox.placeholder="HTML";const cssBox=document.createElement("textarea");cssBox.style.width="100%",cssBox.style.boxSizing="border-box",cssBox.placeholder="CSS";const jsBox=document.createElement("textarea");jsBox.style.width="100%",jsBox.style.boxSizing="border-box",jsBox.placeholder="JavaScript";const executeButton=document.createElement("button");executeButton.textContent="Execute JavaScript",executeButton.style.width="100%",executeButton.style.boxSizing="border-box",executeButton.onclick=(()=>{try{eval(jsBox.value)}catch(e){console.error(e),alert(`Error: ${e.message}`)}});const view=document.createElement("div");view.style.width="100%",view.style.height="100%",view.style.border="1px solid black",htmlBox.oninput=(()=>view.innerHTML=htmlBox.value),cssBox.oninput=(()=>{const e=document.getElementById("dynamic-style")||document.createElement("style");e.id="dynamic-style",e.innerHTML=cssBox.value,document.head.appendChild(e)}),document.body.appendChild(htmlBox),document.body.appendChild(cssBox),document.body.appendChild(jsBox),document.body.appendChild(executeButton),document.body.appendChild(view)}();

Contents.js

(function () {
    const meta = document.createElement('meta');
    meta.name = 'viewport';
    meta.content = 'width=device-width, initial-scale=1.0';
    document.head.appendChild(meta);

    document.body.style.margin = "0";
    document.body.style.height = "100vh";
    document.body.style.display = "grid";
    document.body.style.gridTemplateRows = "1fr 1fr 1fr auto 2fr";

    const htmlBox = document.createElement('textarea');
    htmlBox.style.width = "100%";
    htmlBox.style.boxSizing = "border-box";
    htmlBox.placeholder = "HTML";

    const cssBox = document.createElement('textarea');
    cssBox.style.width = "100%";
    cssBox.style.boxSizing = "border-box";
    cssBox.placeholder = "CSS";

    const jsBox = document.createElement('textarea');
    jsBox.style.width = "100%";
    jsBox.style.boxSizing = "border-box";
    jsBox.placeholder = "JavaScript";

    const executeButton = document.createElement('button');
    executeButton.textContent = "Execute JavaScript";
    executeButton.style.width = "100%";
    executeButton.style.boxSizing = "border-box";
    executeButton.onclick = () => {
        try {
            eval(jsBox.value);
        } catch (e) {
            console.error(e);
            alert(`Error: ${e.message}`);
        }
    };

    const view = document.createElement('div');
    view.style.width = "100%";
    view.style.height = "100%";
    view.style.border = "1px solid black";

    htmlBox.oninput = () => view.innerHTML = htmlBox.value;
    cssBox.oninput = () => {
        const style = document.getElementById('dynamic-style') || document.createElement('style');
        style.id = 'dynamic-style';
        style.innerHTML = cssBox.value;
        document.head.appendChild(style);
    };

    document.body.appendChild(htmlBox);
    document.body.appendChild(cssBox);
    document.body.appendChild(jsBox);
    document.body.appendChild(executeButton);
    document.body.appendChild(view);
})();