📜 ⬆️ ⬇️

JSfiddle style HTML + CSS + JS editor with 230 character code

Although the week of the 30th line is over, I’d venture to cite another example of super-laconic JavaScript code that I found on the net. Meet the four-pane HTML / CSS / JS editor with a real-time preview that fits in 230 characters:

<x id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea id=t'+i:'<iframe')+' style=width:49%;height:48% oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script> 

View the demo can be on this link . And you can simply insert this text with the code in the address bar of the browser:

 data:text/html,%20<x%20id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea%20id=t'+i:'<iframe')+'%20style=width:49%;height:48%%20oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script> 


The logic of the script is quite simple - three textarea elements and one iframe are created in the loop, and the loop variable is used as a flag to switch between textarea creation and iframe creation. Then, on the event oninput add the text from the three text areas to the corresponding parts of the document in the frame.
')
If suddenly someone missed, here are a couple of examples of the creative use of JavaScript and the built-in features of browsers that were published on Habré:



Source: https://habr.com/ru/post/205154/


All Articles