Skip to content

Commit e5745b1

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #474 from veerbhadrasolanki/Branch_Branch_main_codeeditor
Added the online code editor project
2 parents dc1543c + 695beb7 commit e5745b1

File tree

6 files changed

+1838
-0
lines changed

6 files changed

+1838
-0
lines changed

‎Online-Code-Editor/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# CodeDitor - Online Code Editor
2+
![GitHub repo size](https://img.shields.io/github/repo-size/veerbhadrasolanki/Online-Code-Editor?style=plastic)
3+
![GitHub language count](https://img.shields.io/github/languages/count/veerbhadrasolanki/Online-Code-Editor?style=plastic)
4+
![GitHub top language](https://img.shields.io/github/languages/top/veerbhadrasolanki/Online-Code-Editor?style=plastic)
5+
![GitHub last commit](https://img.shields.io/github/last-commit/veerbhadrasolanki/Online-Code-Editor?color=red&style=plastic)
6+
![GitHub watchers](https://img.shields.io/github/watchers/veerbhadrasolanki/Online-Code-Editor?style=social)
7+
8+
Donate Link
9+
Simple code editor created with NodeJS.
10+
11+
## Technologies
12+
Project is created with:
13+
* HTML5
14+
* CSS3
15+
* BootStrap
16+
* JavaScript
17+
* jQuery
18+
19+
## Setup
20+
To run this project, install or clone it locally:
21+
In the project directory, you can run:
22+
23+
```
24+
$ cd ../Online-Code-Editor
25+
$ npm install
26+
$ npm start
27+
```
28+
29+
Runs the app in the development mode.
30+
Open http://localhost:8080 to view it in the browser.
31+
32+
The page will reload if you press RUN button.
33+
34+
![plot](edditor.PNG)

‎Online-Code-Editor/edditor.PNG‎

50 KB
Loading

‎Online-Code-Editor/index.html‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
5+
<meta content="utf-8" http-equiv="encoding">
6+
<title>Web Editor</title>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
8+
<link rel="stylesheet" type="text/css" href="style.css">
9+
<link rel="preconnect" href="https://fonts.gstatic.com">
10+
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
11+
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
12+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
13+
<script>
14+
// $(document).ready(function () {
15+
// $("#run").click( function() {
16+
// var myFrame = $("#RESULTContainer").contents().find('body');
17+
// var textareaValue = $("#HTMLContainer").val();
18+
// myFrame.html(textareaValue);
19+
// });
20+
// });
21+
22+
$(document).ready(function () {
23+
$("#run").on("click", function () {
24+
var htmlTextValue = $("#HTMLContainer").val();
25+
var cssTextValue = $("#CSSContainer").val();
26+
var jsTextValue = $("#JSContainer").val();
27+
28+
const getGeneratedPageURL = ({ html, css, js }) => {
29+
30+
const getBlobURL = (code, type) => {
31+
const blob = new Blob([code], { type })
32+
return URL.createObjectURL(blob)
33+
}
34+
35+
const cssURL = getBlobURL(css, 'text/css')
36+
const jsURL = getBlobURL(js, 'text/javascript')
37+
38+
const source = `
39+
<html>
40+
<head>
41+
${css && `<link rel="stylesheet" type="text/css" href="${cssURL}" />`}
42+
${js && `<scr` + `ipt src="${jsURL}"></scr` + `ipt>`}
43+
</head>
44+
<body>
45+
${html || ''}
46+
</body>
47+
</html>
48+
`
49+
50+
return getBlobURL(source, 'text/html')
51+
}
52+
53+
const url = getGeneratedPageURL({
54+
html: htmlTextValue,
55+
css: cssTextValue,
56+
js: jsTextValue
57+
})
58+
59+
const iframe = document.querySelector('#RESULTContainer')
60+
iframe.src = url
61+
})
62+
});
63+
</script>
64+
</head>
65+
<body>
66+
67+
<nav class="navbar navbar-lg navbar-transparent">
68+
<div class="container-fluid">
69+
<div class="navbar-header">
70+
<span class="navbar-brand">Online Web Editor</span>
71+
</div>
72+
<div>
73+
<ul class="nav navbar-nav navbar-firstnav">
74+
<li><button class="btn btn-live" id="html" data-toggle="collapse" href="#HTMLBOX" aria-expanded="false" aria-controls="collapseExample" show>HTML</button></li>
75+
<li><button class="btn btn-live" id="css" data-toggle="collapse" href="#CSSBOX" role="button" aria-expanded="false" aria-controls="collapseExample">CSS</button></li>
76+
<li><button class="btn btn-live" id="js" data-toggle="collapse" href="#JSBOX" role="button" aria-expanded="false" aria-controls="collapseExample">JavaScript</button></li>
77+
<li><button class="btn btn-live" id="result" data-toggle="collapse" href="#RESULTBOX" role="button" aria-expanded="false" aria-controls="collapseExample">Preview</button></li>
78+
<div class="navbar-text">
79+
<button class="btn btn-success btn-live pull-right" id="run" style="padding: 13px;">RUN</button>
80+
</div>
81+
</ul>
82+
</div>
83+
</div>
84+
</nav>
85+
<div class="row body-maker">
86+
<div class="col-4 codeContainer collapse" id="HTMLBOX">
87+
<span class="label-text">HTML</span>
88+
<textarea id="HTMLContainer" maxlength="180" cols="45" rows="6"></textarea>
89+
</div>
90+
<div class="col-4 codeContainer collapse" id="CSSBOX">
91+
<span class="label-text">CSS</span>
92+
<textarea id="CSSContainer" maxlength="180" cols="45" rows="6"></textarea>
93+
</div>
94+
<div class="col-4 codeContainer collapse" id="JSBOX">
95+
<span class="label-text">JavaScript</span>
96+
<textarea id="JSContainer" maxlength="180" cols="45" rows="6"></textarea>
97+
</div>
98+
<div class="col-4 codeContainer collapse" id="RESULTBOX">
99+
<span class="label-Output">Output</span>
100+
<iframe src="about:blank" id="RESULTContainer"></iframe>
101+
</div>
102+
</div>
103+
</body>
104+
105+
<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>
106+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
107+
</html>

0 commit comments

Comments
 (0)