Quine Editor

by fxi

HTML

<h3>Cheap Quine Editor</h3>
<span id="n"></span>
<textarea id="t" cols=50 rows=10></textarea>
<div id="o"></div>

<span>©FXI 2022 </span>

CSS

body {
  display: flex;
  flex-direction: column;
}

iframe {
  height: 512px;
  width: 512px;
  border: none;
}

JavaScript

t.addEventListener("input", update)
t.value = "";

update()


function update() {

  while (o.firstElementChild) {
    o.firstElementChild.remove();
  }
  i = document.createElement('iframe');
  if (!t.value) {
    t.value = def();
  }
  o.appendChild(i);
  i.src = "about:blank";
  i.contentWindow.document.open();
  i.contentWindow.document.write(style() + t.value);
  i.contentWindow.document.close();
  n.innerText = t.value.length;

}


function def() {
  return "<body id=p bgcolor=x onload='setInterval(f=X/*Happy New Year*/=>{for(i=0,o=`<pre>`,w=20,b=30583,t++,l=f+o;i<180;o+=++i%w?l[i].fontcolor([b,17492,30551,16721,b][i/w+6&7]&1<<i%w+t/5?`#fff`:t%w<i?i/w-t%w:X):`\\n`);p.innerHTML=o},t=50)'>"
}

function style() {
  return "<style>body{display:flex;align-items:center;justify-content:center;width:512px;height:512px;scale:1.7;overflow:hidden}</style>"
}