diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Komal_Dua/editor.js b/Komal_Dua/editor.js new file mode 100644 index 0000000..350c4a5 --- /dev/null +++ b/Komal_Dua/editor.js @@ -0,0 +1,12 @@ +function run(){ + let htmlCode = document.querySelector(".container #html").value; + let cssCode = ""; + 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); \ No newline at end of file diff --git a/Komal_Dua/index.html b/Komal_Dua/index.html new file mode 100644 index 0000000..eba1bad --- /dev/null +++ b/Komal_Dua/index.html @@ -0,0 +1,33 @@ + + + + + + + Markdown Editor + + + + +
+
+
+
HTML
+ +
+
CSS
+ +
+
JavaScript
+ +
+
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/Komal_Dua/styling.css b/Komal_Dua/styling.css new file mode 100644 index 0000000..42dde9b --- /dev/null +++ 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; + ` */ +}