Build a Fully Functional Online Code Editor using HTML, CSS & JS

Create a index.html with two divs, one for the editor one for the output and one button to run the code.

<!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" />
<link rel="stylesheet" href="styles.css" />
<title>EliteCode-Editor</title>
</head>
<body>
<div id="editor"></div>
<div id="output"></div>
<button onclick="runCode()">Run</button>
</body>
</html>

Add these script to you code :

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.14.0/ace.js"></script>
<script src="script.js"></script>

The first script is for ACE (https://ace.c9.io/) which is a embeddable code editor library that we will be using.

Lets do some designing, in styles.css:

#editor {
width: 100%;
height: 500px;
border: 1px solid #ccc;
}

#output {
width: 100%;
height: 25%;
border: 2px solid black;
background-color: black;
color: white;
}

button {
padding: 10px 20px;
font-size: 16px;
margin-top: 20px;
background-color: green;
}

Now, in the script.js:

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");

function runCode() {
var code = editor.getSession().getValue();

try {
output = eval(code);
} catch (e) {
output = e.toString();
}

document.getElementById("output").innerHTML = output;
}

Here we are creating an instance of ace editor. We can select form different themes and we also need to select language using session.setMode() to get the syntax intilisense.

Final Result

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store