Skip to content

Instantly share code, notes, and snippets.

@rebelchris

rebelchris/index.html

Created December 26, 2020 14:39
Show Gist options
  • Save rebelchris/1d08b077841b5f21a1c1230c19c0f283 to your computer and use it in GitHub Desktop.
Save rebelchris/1d08b077841b5f21a1c1230c19c0f283 to your computer and use it in GitHub Desktop.
Download ZIP
No div playground
Raw
index.html
<html>
<head>
<meta charset="UTF-8" />
<title>No-div playground</title>
<meta name="description" content="A cool no-div playground" />
<meta name="author" content="Daily Dev Tips" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
textarea {
height: 66px;
}
iframe {
width: 200px;
height: 200px;
border: 5px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div>
<textarea id="cssBody" placeholder="background: red;"></textarea>
<br />
<textarea id="cssBefore" placeholder="content: '🤟';"></textarea>
<br />
<textarea id="cssAfter" placeholder="content: '🤟';"></textarea>
</div>
<iframe id="iFrame"></iframe>
</div>
<script type="text/javascript">
const cssBody = document.getElementById("cssBody");
const cssBefore = document.getElementById("cssBefore");
const cssAfter = document.getElementById("cssAfter");
const iFrame = document.getElementById("iFrame").contentWindow.document;
document.addEventListener("keyup", (event) => {
if (
event.target !== cssBody &&
event.target !== cssBefore &&
event.target !== cssAfter
) {
return;
}
iFrame.open();
iFrame.writeln(`
<style>
body { ${cssBody.value} }
body:before { ${cssBefore.value} }
body:after { ${cssAfter.value} }
</style>`);
iFrame.close();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment