Merge pull request #1 from komaldua8/master

Html simulator
ACM-Thapar · Oct 8, 2022 · ed0ae59 · ed0ae59
2 parents 27d6369 + a3c87ea
commit ed0ae59
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Komal_Dua/editor.js b/Komal_Dua/editor.js
@@ -0,0 +1,12 @@
+function run(){
+    let htmlCode = document.querySelector(".container #html").value;
+    let cssCode = "<style>" + document.querySelector(".container #css").value + "</style>";
+    let jsCode = document.querySelector(".container #js").value;
+    let output = document.querySelector(".output-code #output");
+    // console.log(htmlCode, cssCode, jsCode, output);
+    output.contentDocument.body.innerHTML = htmlCode + cssCode;
+    output.contentWindow.eval(jsCode);
+}
+document.querySelector(".container #html").addEventListener("keyup", run);
+document.querySelector(".container #css").addEventListener("keyup", run);
+document.querySelector(".container #js").addEventListener("keyup", run);
diff --git a/Komal_Dua/index.html b/Komal_Dua/index.html
@@ -0,0 +1,33 @@
+<!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>Markdown Editor</title>
+    <link rel="stylesheet" href="styling.css">
+</head>
+<body>
+
+    <div class="container">
+        <div class="input-code">
+            <div class="code-editor html">
+            <div class="code-type">HTML</div>
+            <textarea class="code" id="html"></textarea>
+            <div class="code-editor css">
+            <div class="code-type">CSS</div>
+            <textarea class="code" id="css"></textarea>
+            <div class="code-editor js">
+            <div class="code-type">JavaScript</div>
+            <textarea class="code" id="js"></textarea>
+            </div>
+        </div>
+        <div class="output-code">
+            <iframe class="output-iframe" id="output" height="1200px"></iframe>
+        </div>
+
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
+    <script src="editor.js"></script>
+</body>
+</html>
diff --git a/Komal_Dua/styling.css b/Komal_Dua/styling.css
@@ -0,0 +1,70 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+*{
+    margin:0;
+    padding: 0 px;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: #333642;
+}
+
+.container{
+    height: 100vh;
+    width: 100vw;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-gap: 10px;
+}
+
+.input-code{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    padding: 0 10px 10px 10px;
+    viewport-fit: 30%;
+}
+
+.code-editor{
+  height: 90%;
+  width: 100%;
+  bottom: 0px;
+}
+
+.code-type{
+    color: whitesmoke;
+    font-family: 'Roboto' , sans-serif;
+    height: fit-content;
+    width: 100%;
+    background-color: #1A1B1F;
+    padding: 10px;
+    /* bottom: 0px; */
+    border-bottom: 1px solid #333642 ;
+    /* viewport-fit: 30%; */
+}
+
+.code{
+    background-color: #1D1E22;
+    color: white;
+    width: 100%;
+    height: 100%;
+}
+
+.output-code{
+    background-color: #e3e6f0;
+    /* display: flex; */
+    position: absolute;
+    left: 505px;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    height: 1000px;
+    width: 100%;
+    /* viewport-fit: 70%; */
+}
+
+.output-iframe{
+    height: inherit;
+    width: inherit;
+   ` */
+}