diff options
| -rw-r--r-- | html/playground/index.html | 30 |
1 files changed, 27 insertions, 3 deletions
diff --git a/html/playground/index.html b/html/playground/index.html index ec575a5..522f3da 100644 --- a/html/playground/index.html +++ b/html/playground/index.html @@ -92,10 +92,10 @@ </head> <body> - <div class="playground"> + <div class="playground" id="playground"> <!-- use this empty div to mount stuff --> - <div class="seesaw"></div> - <div class="slide"></div> + <div class="seesaw" id="seesaw"></div> + <div class="slide" id="slide"></div> </div> <div class="button-container"> @@ -183,6 +183,30 @@ } } + function help() { + const helpText = ` + Welcome to the JavaScript Playground! Here are some tips to get you started: + + 1. Enter your JavaScript code in the text area. + 2. Click the "Run Code" button to execute your code. + 3. The console output will be displayed below the text area. + 4. Click the "Clear" button to reset the playground. + 5. Click the "Download" button to save your code and editor as an HTML file. + 6. Click the "Share" button to generate a URL to share your code with others. + 7. You can also press "Cmd + Enter" to run your code. + 8. There's an empty div, with the id "playground" + 9. That playground div contains 2 child divs, with the ids "seesaw" and "slide" + 10. You can use those divs to mount stuff to the DOM + + Go nuts! Share scrappy fiddles! + `; + console.log(helpText); + } + + function clearLog() { + document.getElementById('console').innerHTML = ''; + } + document.getElementById('codeInput').addEventListener('keydown', function(event) { if (event.metaKey && event.key === 'Enter') { event.preventDefault(); |