rebelchris · December 26, 2020 15:02
diff --git a/index.html b/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>
      <div>
        <iframe id="iFrame"></iframe>
        <br />
        <button onclick="save()">I'm done ✨</button>
      </div>
    </div>
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script>
    <script type="text/javascript">
      // Your web app's Firebase configuration
      var firebaseConfig = {
        // Your config here
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);

      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();
      });

      const save = () => {
        const uuid =
          Date.now().toString(36) + Math.random().toString(36).substr(2);
        firebase.database().ref(uuid).set({
          body: cssBody.value,
          before: cssBefore.value,
          after: cssAfter.value,
        });
      };
    </script>
  </body>
 </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>
	<div>
	<iframe id="iFrame"></iframe>
	<br />
	<button onclick="save()">I'm done ✨</button>
	</div>
	</div>
	<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script>
	<script type="text/javascript">
	// Your web app's Firebase configuration
	var firebaseConfig = {
	// Your config here
	};
	// Initialize Firebase
	firebase.initializeApp(firebaseConfig);

	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();
	});

	const save = () => {
	const uuid =
	Date.now().toString(36) + Math.random().toString(36).substr(2);
	firebase.database().ref(uuid).set({
	body: cssBody.value,
	before: cssBefore.value,
	after: cssAfter.value,
	});
	};
	</script>
	</body>
	</html>