javascript:const wrapper = document.createElement('aside'); const style = document.createElement('style'); const toggle = document.createElement('button'); const input = document.createElement('textarea'); const button = document.createElement('button'); const output = document.createElement('pre'); wrapper.id = 'jswrapper'; wrapper.className = 'open'; toggle.id = 'jstoggle'; button.textContent = 'Evaluate'; style.textContent = ` #jswrapper, #jswrapper * { box-sizing: border-box; } #jswrapper { position: fixed; bottom: 0; right: 0; width: 100%; transform: translateY(0); transition: transform .2s; } #jswrapper.open { transform: translateY(100%); } #jswrapper #jstoggle { position: absolute; right: 0; top: -2em; height: 2em; width: 2em; } #jstoggle::before { content: '⬇'; } .open #jstoggle::before { content: '⬆'; } #jswrapper textarea, #jswrapper button, #jswrapper pre { display: block; width: 100%; margin: 0; padding: .5em; font-size: 14pt; } #jswrapper pre, #jswrapper textarea { background: white; height: 5em; overflow-y: auto; } `; wrapper.appendChild(style); wrapper.appendChild(toggle); wrapper.appendChild(input); wrapper.appendChild(button); wrapper.appendChild(output); document.body.appendChild(wrapper); function runCode() { const js = input.value; input.value = ''; return eval(js); } button.addEventListener('click', runCode); toggle.addEventListener('click', event => { event.target.parentElement.classList.toggle('open'); }); window.console = { original: console, ...console, output: (strings, func) => strings.forEach(string => { output.textContent += `${func}: ${string}\n`; output.scrollTop = output.scrollHeight; return console.original[func](string); }), log: (...strings) => console.output(strings, 'log'), info: (...strings) => console.output(strings, 'info'), warn: (...strings) => console.output(strings, 'warn'), error: (...strings) => console.output(strings, 'error') };