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>`,t++,w=20,l=f+o;i<174;o+=++i%w?l[i].fontcolor([22391, 21588,30551,16721,18295][i/w+6&7]&1<<i%w+t?f:t%w<i?t%w-i/w:f):`\n`);p.innerHTML=o},t=99)'>"
}

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