Ayushparikh-code · Ayushparikh-code · Sep 17, 2024 · Oct 22, 2023
diff --git a/Online-Code-Editor/README.md b/Online-Code-Editor/README.md
@@ -0,0 +1,34 @@
+# CodeDitor - Online Code Editor
+![GitHub repo size](https://img.shields.io/github/repo-size/veerbhadrasolanki/Online-Code-Editor?style=plastic)
+![GitHub language count](https://img.shields.io/github/languages/count/veerbhadrasolanki/Online-Code-Editor?style=plastic)
+![GitHub top language](https://img.shields.io/github/languages/top/veerbhadrasolanki/Online-Code-Editor?style=plastic)
+![GitHub last commit](https://img.shields.io/github/last-commit/veerbhadrasolanki/Online-Code-Editor?color=red&style=plastic)
+![GitHub watchers](https://img.shields.io/github/watchers/veerbhadrasolanki/Online-Code-Editor?style=social)
+
+Donate Link 
+Simple code editor created with NodeJS.
+
+## Technologies
+Project is created with:
+* HTML5 
+* CSS3 
+* BootStrap 
+* JavaScript
+* jQuery
+
+## Setup
+To run this project, install or clone it locally:
+In the project directory, you can run:
+
+```
+$ cd ../Online-Code-Editor
+$ npm install
+$ npm start
+```
+
+Runs the app in the development mode.
+Open http://localhost:8080 to view it in the browser.
+
+The page will reload if you press RUN button.
+
+![plot](edditor.PNG)
diff --git a/Online-Code-Editor/edditor.PNG b/Online-Code-Editor/edditor.PNG
diff --git a/Online-Code-Editor/index.html b/Online-Code-Editor/index.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+ <head>
+ <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+ <meta content="utf-8" http-equiv="encoding">
+ <title>Web Editor</title>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
+ <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+ <script>
+ // $(document).ready(function () {
+ // $("#run").click( function() {
+ // var myFrame = $("#RESULTContainer").contents().find('body');
+ // var textareaValue = $("#HTMLContainer").val();
+ // myFrame.html(textareaValue);
+ // });
+ // });
+
+ $(document).ready(function () {
+ $("#run").on("click", function () {
+ var htmlTextValue = $("#HTMLContainer").val();
+ var cssTextValue = $("#CSSContainer").val();
+ var jsTextValue = $("#JSContainer").val();
+
+ const getGeneratedPageURL = ({ html, css, js }) => {
+
+ const getBlobURL = (code, type) => {
+ const blob = new Blob([code], { type })
+ return URL.createObjectURL(blob)
+ }
+
+ const cssURL = getBlobURL(css, 'text/css')
+ const jsURL = getBlobURL(js, 'text/javascript')
+
+ const source = `
+ <html>
+ <head>
+ ${css && `<link rel="stylesheet" type="text/css" href="${cssURL}" />`}
+ ${js && `<scr` + `ipt src="${jsURL}"></scr` + `ipt>`}
+ </head>
+ <body>
+ ${html || ''}
+ </body>
+ </html>
+ `
+
+ return getBlobURL(source, 'text/html')
+ }
+
+ const url = getGeneratedPageURL({
+ html: htmlTextValue,
+ css: cssTextValue,
+ js: jsTextValue
+ })
+
+ const iframe = document.querySelector('#RESULTContainer')
+ iframe.src = url
+ })
+ });
+ </script>
+ </head>
+ <body>
+
+ <nav class="navbar navbar-lg navbar-transparent">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <span class="navbar-brand">Online Web Editor</span>
+ </div>
+ <div>
+ <ul class="nav navbar-nav navbar-firstnav">
+ <li><button class="btn btn-live" id="html" data-toggle="collapse" href="#HTMLBOX" aria-expanded="false" aria-controls="collapseExample" show>HTML</button></li>
+ <li><button class="btn btn-live" id="css" data-toggle="collapse" href="#CSSBOX" role="button" aria-expanded="false" aria-controls="collapseExample">CSS</button></li>
+ <li><button class="btn btn-live" id="js" data-toggle="collapse" href="#JSBOX" role="button" aria-expanded="false" aria-controls="collapseExample">JavaScript</button></li>
+ <li><button class="btn btn-live" id="result" data-toggle="collapse" href="#RESULTBOX" role="button" aria-expanded="false" aria-controls="collapseExample">Preview</button></li>
+ <div class="navbar-text">
+ <button class="btn btn-success btn-live pull-right" id="run" style="padding: 13px;">RUN</button>
+ </div>
+ </ul>
+ </div>
+ </div>
+ </nav>
+ <div class="row body-maker">
+ <div class="col-4 codeContainer collapse" id="HTMLBOX">
+ <span class="label-text">HTML</span>
+ <textarea id="HTMLContainer" maxlength="180" cols="45" rows="6"></textarea>
+ </div>
+ <div class="col-4 codeContainer collapse" id="CSSBOX">
+ <span class="label-text">CSS</span>
+ <textarea id="CSSContainer" maxlength="180" cols="45" rows="6"></textarea>
+ </div>
+ <div class="col-4 codeContainer collapse" id="JSBOX">
+ <span class="label-text">JavaScript</span>
+ <textarea id="JSContainer" maxlength="180" cols="45" rows="6"></textarea>
+ </div>
+ <div class="col-4 codeContainer collapse" id="RESULTBOX">
+ <span class="label-Output">Output</span>
+ <iframe src="about:blank" id="RESULTContainer"></iframe>
+ </div>
+ </div>
+ </body>
+
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+</html>