Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
no-div css art playground raw
<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 = {
apiKey: "AIzaSyDn9SYU4jwny-rVINJYztEntToMs9X0hKU",
authDomain: "test-d6b30.firebaseapp.com",
databaseURL: "https://test-d6b30-default-rtdb.firebaseio.com",
projectId: "test-d6b30",
storageBucket: "test-d6b30.appspot.com",
messagingSenderId: "449532958203",
appId: "1:449532958203:web:5b70e54e5a6538f97de75e",
};
// 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%;
}
iframe {
width: 200px;
height: 200px;
border: 5px solid #000;
}
</style>
</head>
<body>
<div class="container">
<iframe id="iFrame"></iframe>
</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 = {
apiKey: "AIzaSyDn9SYU4jwny-rVINJYztEntToMs9X0hKU",
authDomain: "test-d6b30.firebaseapp.com",
databaseURL: "https://test-d6b30-default-rtdb.firebaseio.com",
projectId: "test-d6b30",
storageBucket: "test-d6b30.appspot.com",
messagingSenderId: "449532958203",
appId: "1:449532958203:web:5b70e54e5a6538f97de75e",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const iFrame = document.getElementById("iFrame").contentWindow.document;
const currentURL = window.location.search;
const search = new URLSearchParams(currentURL);
const searchId = search.get("id");
if (searchId.length >= 1) {
var noDivRef = firebase.database().ref(searchId);
noDivRef.once("value", function (data) {
let divData = data.val();
iFrame.open();
iFrame.writeln(`
<style>
body { ${divData.body} }
body:before { ${divData.before} }
body:after { ${divData.after} }
</style>`);
iFrame.close();
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment