Skip to content

Instantly share code, notes, and snippets.

@asuh
Forked from cferdinandi/basic-sandbox.html
Created August 29, 2023 02:50
Show Gist options
  • Save asuh/d2580929ce72ba914437c472d348aafa to your computer and use it in GitHub Desktop.
Save asuh/d2580929ce72ba914437c472d348aafa to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 1em auto;
max-width: 40em;
width: 88%;
}
label,
textarea,
iframe {
display: block;
width: 100%;
}
textarea {
margin-bottom: 1.5em;
min-height: 8em;
}
</style>
</head>
<body>
<h1>Code Sandbox</h1>
<label for="html">HTML</label>
<textarea id="html" spellcheck="false" autocorrect="off" autocapitalize="off" translate="no"></textarea>
<label for="css">CSS</label>
<textarea id="css" spellcheck="false" autocorrect="off" autocapitalize="off" translate="no"></textarea>
<label for="js">JavaScript</label>
<textarea id="js" spellcheck="false" autocorrect="off" autocapitalize="off" translate="no"></textarea>
<p><strong>Result</strong></p>
<iframe id="result"></iframe>
<script>
// Get elements
let html = document.querySelector('#html');
let css = document.querySelector('#css');
let js = document.querySelector('#js');
let result = document.querySelector('#result');
// Store debounce timer
let debounce;
/**
* Update the iframe
*/
function updateIframe () {
// Create new iframe
let clone = result.cloneNode();
result.replaceWith(clone);
result = clone;
// Render
result.contentWindow.document.open();
result.contentWindow.document.writeln(
`${html.value}
<style>${css.value}</style>
<script type="module">${js.value}<\/script>`
);
result.contentWindow.document.close();
}
/**
* Handle input events on our fields
* @param {Event} event The event object
*/
function inputHandler (event) {
// Only run on our three fields
if (
event.target !== html &&
event.target !== css &&
event.target !== js
) return;
// Debounce the rendering for performance reasons
clearTimeout(debounce);
// Set update to happen when typing stops
debounce = setTimeout(updateIframe, 500);
}
// Listen for input events
document.addEventListener('input', inputHandler);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment