first commit

ashiqurrahmananik · ashiqurrahmananik · commit 7f305a4df13d · 2023-02-17T16:00:17.000+06:00
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Code Pen Bd</title>
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
+        integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+</head>
+
+<body>
+    <div class="container">
+        <div class="left">
+            <label><i class="fa-brands fa-html5"></i>HTML</label>
+            <textarea id="html-code" onkeyup="run()"></textarea>
+            <label><i class="fa-brands fa-css3-alt"></i>CSS</label>
+            <textarea id="css-code" onkeyup="run()"></textarea>
+            <label><i class="fa-brands fa-js"></i>JavaScript</label>
+            <textarea id="javascript-code" onkeyup="run()"></textarea>
+        </div>
+        <div class="right">
+            <label><i class="fa-solid fa-play"></i>Output</label>
+            <iframe id="output"></iframe>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+
+</html>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,6 @@
+### Live Demo
+```
+
+````
+### ScreenShot
+![Capture](https://user-images.githubusercontent.com/38730778/219613071-54726cfc-16ad-41de-9c81-831317203a6a.JPG)
diff --git a/script.js b/script.js
@@ -0,0 +1,10 @@
+function run()
+{
+    let htmlcode = document.getElementById("html-code").value;
+    let csscode = document.getElementById("css-code").value;
+    let javascriptcode = document.getElementById("javascript-code").value;
+    let output = document.getElementById("output");
+
+    output.contentDocument.body.innerHTML = htmlcode + "<style>"+ csscode + "</style>";
+    output.contentWindow.evel(javascriptcode);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,45 @@
+*
+{
+    font-family: 'Poppins',sans-serif;
+}
+body
+{
+    background-color: #454545;
+    color: #fff;
+}
+.left, .right
+{
+    flex-basis: 50%;
+    padding: 10px;
+}
+.container
+{
+    width: 100%;
+    height: 100vh;
+    padding: 4px;
+    display: flex;
+}
+textarea
+{
+    width: 94%;
+    height: 28%;
+    background-color: #1f1f1f;
+    padding: 10px 20px;
+    border: 0;
+    outline: 0;
+    font-size: 18px;
+    color:#fff
+}
+iframe
+{
+    width: 90%;
+    height: 96%;
+    background-color: #ffffff;
+    color: black;
+    border: 0;
+    outline: 0;
+}
+i
+{
+    padding-right: 5px;
+}
