No div playground
| <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