├── .gitattributes
├── LICENSE
├── README.md
├── css
└── index.css
├── index.html
└── js
└── index.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.js linguist-detectable=true
2 | *.css linguist-detectable=false
3 | *.html linguist-detectable=false
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 DeveLoL
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # js-web-execution-simple
2 | [JavaScript] Is a simple web-based JavaScript code executor. It is focused on mobile device browsers\
3 | **[Example](https://php.deve.lol/jsexecution/)**
4 |
5 | **[HTML executor](https://github.com/develol/html-web-execution-simple)**
6 |
7 | ***AceEditor v1.4.14+***
8 |
9 | ## Getting started
10 | 1. Cloning this repository
11 | 2. Launch **index.html**
12 |
13 | ## File structure
14 | ```
15 | / ................. Root
16 | ├─ index.html ..... Main HTML file
17 | ├─ css ............ Folder with CSS files
18 | │ └─ index.css ... Main CSS file
19 | └─ js ............. Folder with JavaScript files
20 | └─ index.js .... Main JS file
21 | ```
22 |
--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | background-color: #272822;
3 | }
4 |
5 | #editor{
6 | position: fixed;
7 | top: 48px;
8 | right: 0;
9 | left: 0;
10 | height: calc(100% - 48px);
11 | }
12 |
13 | button{
14 | position: fixed;
15 | height: 48px;
16 | border: 0;
17 | font-weight: bold;
18 | cursor: pointer;
19 | background: #8b8c86;
20 | color: #2f3129;
21 | font-family: sans-serif;
22 | font-size: 16px;
23 | text-align: center;
24 | margin: 0;
25 | z-index: 9999;
26 | }
27 |
28 | #btnMin{
29 | top: 0;
30 | left: 0;
31 | border-right: 1px solid #272822;
32 | width: 48px;
33 | }
34 |
35 | #btnRun{
36 | top: 0;
37 | left: 48px;
38 | width: calc(100% - 94px);
39 | }
40 |
41 | #btnMax{
42 | top: 0;
43 | right: 0;
44 | border-left: 1px solid #272822;
45 | width: 48px;
46 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | JSExecution
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/js/index.js:
--------------------------------------------------------------------------------
1 | var fontSize = 16;
2 | var editor = ace.edit("editor");
3 | editor.setTheme("ace/theme/monokai");
4 | editor.session.setMode("ace/mode/javascript");
5 | editor.setAutoScrollEditorIntoView(true);
6 | editor.setFontSize(fontSize);
7 |
8 | if(localStorage.JScode!=null){
9 | editor.setValue(localStorage.JScode);
10 | }
11 |
12 | editor.setOptions({
13 | wrap: true
14 | });
15 |
16 | function setFontSize(plus){
17 | if(plus){
18 | fontSize=fontSize+4;
19 | editor.setFontSize(fontSize);
20 | }else{
21 | if((fontSize-4)>0){
22 | fontSize=fontSize-4;
23 | editor.setFontSize(fontSize);
24 | }
25 | }
26 | }
27 |
28 | document.getElementById('btnRun').onclick = function(){
29 | var text = editor.getValue();
30 | localStorage.setItem('JScode', text);
31 | try{
32 | if(text==''){
33 | alert('EMPTY CODE');
34 | }else{
35 | eval(text);
36 | }
37 | }catch(e){
38 | alert('ERROR -> '+e);
39 | }
40 | }
41 |
42 | if(window.screen.width < window.screen.height){
43 | editor.on("focus", function(){
44 | document.getElementById('editor').style.height = 'calc(50% - 36px)';
45 | editor.resize();
46 | });
47 |
48 | editor.on("blur", function(){
49 | document.getElementById('editor').style.height = 'calc(100% - 48px)';
50 | editor.resize();
51 | });
52 | }
--------------------------------------------------------------------------------