about:blank

let create= (x)=> document.createElement(x),
select= (x,y=document)=> y.querySelector(x),
selectAll= (x,y=document)=> y.querySelectorAll(x);

let head= `<title> okay </title>
<style>
body {
text-align: center;
border: 3px double green;
color:red;
transition: 1s linear;
}
</style>`;


let body= `
<div id="red">hey</div>
<script> document.querySelector("#red").style.backgroundColor="yellow";</script>

`;


let xo= [];

for(let i=0; i<10; i++){
xo[i]= `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
}


let a= window.open();
a.document.head.innerHTML= head;
a.document.body.innerHTML= body;

select("#red",a.document.body).onclick= function(){
this.classList.toggle("clicked");
this.classList.contains("clicked") ?
this.style.backgroundColor= `hsla(${Math.random() * 360}, 100%, 50%, 1)`:
this.style.backgroundColor="inherit";
this.innerHTML+= xo.length;
};

let i=0;

setInterval(()=>{
if(i==2) i=0;
a.document.body.style.backgroundColor= xo[i];
//a.document.body.style.backgroundColor= "#" + ((1<<24)*Math.random() | 0).toString(16);
i++;
},1000);

//-------------------

let create= (x)=> document.createElement(x),
select= (x,y=document)=> y.querySelector(x),
selectAll= (x,y=document)=> y.querySelectorAll(x);

function lulz(unsafe) {
    return unsafe
//.replace(/<style>\.qc-cmp[^]+<\style>/,"♥️")
         .replace(/'/g, "&#039;")   ​
        ​.replace(/&/g, "&amp;")
        ​.replace(/</g, "&lt;")
        ​.replace(/>/g, "&gt;")
        ​.replace(/"/g, "&quot;")
;
​}



let a= window.open();
let x= select("html").innerHTML;
a.document.head.innerHTML=`<style>
pre{background: yellow; overflow:scroll;}

</style>`;
a.document.body.innerHTML= "<pre>"+lulz(x)+"</pre>";