diff options
author | elioat <elioat@tilde.institute> | 2024-09-03 19:26:50 -0400 |
---|---|---|
committer | elioat <elioat@tilde.institute> | 2024-09-03 19:26:50 -0400 |
commit | 193bda7716a7373f65ed54680ae051b3192c1862 (patch) | |
tree | 574b62231573cc5685e1edd1b4880f5efc2b49d9 /html/playground | |
parent | 86c0b4d1a3bb115ef6d0be271a350c18290d13dc (diff) | |
download | tour-193bda7716a7373f65ed54680ae051b3192c1862.tar.gz |
*
Diffstat (limited to 'html/playground')
-rw-r--r-- | html/playground/index.html | 41 |
1 files changed, 32 insertions, 9 deletions
diff --git a/html/playground/index.html b/html/playground/index.html index a55ede3..d987c22 100644 --- a/html/playground/index.html +++ b/html/playground/index.html @@ -5,11 +5,12 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Playground</title> <style> - + /* @font-face { font-family: "APL386"; src: url("./APL386.ttf") format("truetype"); } + */ body { display: flex; @@ -53,7 +54,7 @@ width: 100%; height: 22%; background-color: #000; - color: teal; + color: #0fc; font-family: monospace; font-size: 1rem; overflow-y: auto; @@ -92,6 +93,8 @@ <body> <div class="button-container"> + <button onclick="document.getElementById('codeInput').value='';window.location.hash='';">Clear</button> + <button onclick="downloadCodeAndEditor()">Download</button> <button onclick="shareCode()">Share</button> <button onclick="evaluateCode()" class="run">Run Code</button> </div> @@ -99,13 +102,6 @@ <div id="console"></div> <script> - document.getElementById('codeInput').addEventListener('keydown', function(event) { - if (event.metaKey && event.key === 'Enter') { - event.preventDefault(); - evaluateCode(); - } - }); - function evaluateCode() { const code = document.getElementById('codeInput').value; const consoleDiv = document.getElementById('console'); @@ -135,10 +131,29 @@ console.log = originalConsoleLog; } + function downloadCodeAndEditor() { + const codeInput = document.getElementById('codeInput').value; + const htmlContent = document.documentElement.outerHTML.replace( + /<textarea id="codeInput"[^>]*>.*<\/textarea>/, + `<textarea id="codeInput">${codeInput}</textarea>` + ); + + const blob = new Blob([htmlContent], { type: 'text/html' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = 'code_editor.html'; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + } + function shareCode() { const code = document.getElementById('codeInput').value; const encodedCode = btoa(encodeURIComponent(code)); window.location.hash = encodedCode; + window.prompt("Copy the URL to share.\nBe warned! Very long URLs don't share wicked well, sometimes.", window.location.href); } function loadCodeFromHash() { @@ -153,8 +168,16 @@ } } + document.getElementById('codeInput').addEventListener('keydown', function(event) { + if (event.metaKey && event.key === 'Enter') { + event.preventDefault(); + evaluateCode(); + } + }); + window.onload = loadCodeFromHash; </script> + </script> </body> </html> |