├── .gitignore
├── static
├── style.css
└── script.js
├── requirements.txt
├── server.py
├── templates
├── index.html
└── j.html
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | venv
2 | env
--------------------------------------------------------------------------------
/static/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: red;
3 | }
4 |
--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | Flask==2.0.1
2 | requests==2.26.0
3 | werkzeug==2.2.3
4 |
--------------------------------------------------------------------------------
/server.py:
--------------------------------------------------------------------------------
1 | from flask import Flask, request, jsonify, render_template
2 | import subprocess
3 |
4 | app = Flask(__name__)
5 |
6 | @app.route("/", methods=['GET'])
7 | def main():
8 | return render_template("./index.html")
9 |
10 | @app.route("/javascript/", methods=['GET'])
11 | def js():
12 | return render_template("./j.html")
13 |
14 | @app.route('/runcode', methods=['POST'])
15 | def run_code():
16 | python_code = request.form['code']
17 | try:
18 | # Execute the Python code using subprocess and capture the output and errors
19 | process = subprocess.Popen(['python', '-c', python_code],
20 | stdout=subprocess.PIPE,
21 | stderr=subprocess.PIPE,
22 | text=True)
23 | stdout, stderr = process.communicate()
24 | if process.returncode == 0:
25 | return jsonify({'output': stdout, 'error': None})
26 | else:
27 | return jsonify({'output': None, 'error': stderr})
28 | except Exception as e:
29 | return jsonify({'output': None, 'error': str(e)})
30 |
31 | if __name__ == '__main__':
32 | app.run(debug=True, port=5500)
--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Online Python Code Editor
5 |
8 |
9 |
10 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Online Code Editor Project
2 |
3 | This project is an online code editor that allows users to write and run Python and JavaScript code within a web browser. It utilizes technologies such as Python, JavaScript, HTML, and CSS to provide a user-friendly coding environment.
4 |
5 | ## Table of Contents
6 |
7 | - [Features](#features)
8 | - [How to Use](#how-to-use)
9 | - [Technologies Used](#technologies-used)
10 | - [Getting Started](#getting-started)
11 | - [Prerequisites](#prerequisites)
12 | - [Installation](#installation)
13 | - [Running the Project](#running-the-project)
14 | - [Usage](#usage)
15 |
16 | ## Features
17 |
18 | - CodeMirror integration for code editing with syntax highlighting and line numbers.
19 | - Ability to run Python and JavaScript code snippets.
20 | - Real-time display of code output and errors.
21 | - Support for multiple programming languages within the same interface.
22 |
23 | ## How to Use
24 |
25 | 1. Open the code editor in your browser.
26 | 2. Write Python or JavaScript code in the editor.
27 | 3. Click the "Run" button to execute the code.
28 | 4. The output or any errors will be displayed in the output area.
29 |
30 | ## Technologies Used
31 |
32 | - Python
33 | - JavaScript
34 | - HTML
35 | - CSS
36 | - Flask (Python web framework)
37 | - CodeMirror (Code editor library)
38 |
39 | ## Getting Started
40 |
41 | To run this project locally, follow these steps:
42 |
43 | ### Prerequisites
44 |
45 | Before you begin, make sure you have the following software installed on your computer:
46 |
47 | - Python: You can download it from [python.org](https://www.python.org/downloads/).
48 |
49 | ### Installation
50 |
51 | 1. Clone the repository to your local machine using Git:
52 |
53 | ```bash
54 | git clone https://github.com/inerttila/online-code-editor.git
55 | ```
56 |
57 | Navigate to the project's directory:
58 |
59 | ```bash
60 | cd online-code-editor
61 | ```
62 |
63 | Create a virtual environment (optional but recommended):
64 |
65 | ```bash
66 | python -m venv venv
67 | ```
68 |
69 | On Windows:
70 |
71 | ```bash
72 | venv\Scripts\activate
73 | ```
74 |
75 | On macOS and Linux:
76 |
77 | ```bash
78 | source venv/bin/activate
79 | ```
80 |
81 | Install the required Python packages:
82 |
83 | ```bash
84 | pip install -r requirements.txt
85 | ```
86 |
87 | ## Running the Project
88 |
89 | Start the Flask application:
90 |
91 | ```bash
92 | python server.py
93 | ```
94 |
95 | Open your web browser and go to http://localhost:5500.
96 |
97 | ## Usage
98 |
99 | You can now use the online code editor to write and execute Python and JavaScript code within your browser.
100 |
--------------------------------------------------------------------------------
/templates/j.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Online JavaScript Code Editor
5 |
8 |
9 |
10 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/static/script.js:
--------------------------------------------------------------------------------
1 | // Initialize CodeMirror
2 | const editor = CodeMirror.fromTextArea(document.getElementById("code-editor"), {
3 | lineNumbers: true,
4 | mode: "python",
5 | theme: "default",
6 | });
7 |
8 | /// Function to run the Python code
9 | function runCode() {
10 | const pythonCode = editor.getValue();
11 |
12 | // Clear previous output
13 | document.getElementById("output").innerHTML = "";
14 |
15 | // Send the Python code to the server for execution
16 | fetch("http://localhost:5500/runcode", {
17 | method: "POST",
18 | headers: {
19 | "Content-Type": "application/x-www-form-urlencoded",
20 | },
21 | body: `code=${encodeURIComponent(pythonCode)}`,
22 | })
23 | .then((response) => {
24 | if (!response.ok) {
25 | throw new Error("Network response was not ok.");
26 | }
27 | return response.json();
28 | })
29 | .then((data) => {
30 | console.log(data); // Log the data received from the server for debugging
31 |
32 | if (data.output) {
33 | // Display the output in the "output" div
34 | document.getElementById("output").innerHTML =
35 | "" + data.output + "
";
36 | } else if (data.error) {
37 | // Display any errors that occurred during code execution
38 | document.getElementById("output").innerHTML =
39 | "Error: " + data.error + "
";
40 | } else {
41 | // Handle unexpected response
42 | document.getElementById("output").innerHTML =
43 | "Unexpected response from server.
";
44 | }
45 | })
46 | .catch((error) => {
47 | console.error(error);
48 | document.getElementById("output").innerText =
49 | "Error occurred while running the code.";
50 | });
51 | }
52 |
53 | // Initialize CodeMirror
54 | const editor2 = CodeMirror.fromTextArea(
55 | document.getElementById("code-editor2"),
56 | {
57 | lineNumbers: true,
58 | mode: "python",
59 | theme: "default",
60 | }
61 | );
62 |
63 | /// Function to run the Python code
64 | function runCode2() {
65 | const pythonCode = editor2.getValue();
66 |
67 | // Clear previous output
68 | document.getElementById("output").innerHTML = "";
69 |
70 | // Send the Python code to the server for execution
71 | fetch("http://localhost:5500/runcode", {
72 | method: "POST",
73 | headers: {
74 | "Content-Type": "application/x-www-form-urlencoded",
75 | },
76 | body: `code=${encodeURIComponent(pythonCode)}`,
77 | })
78 | .then((response) => {
79 | if (!response.ok) {
80 | throw new Error("Network response was not ok.");
81 | }
82 | return response.json();
83 | })
84 | .then((data) => {
85 | console.log(data); // Log the data received from the server for debugging
86 |
87 | if (data.output) {
88 | // Display the output in the "output" div
89 | document.getElementById("output").innerHTML =
90 | "" + data.output + "
";
91 | } else if (data.error) {
92 | // Display any errors that occurred during code execution
93 | document.getElementById("output").innerHTML =
94 | "Error: " + data.error + "
";
95 | } else {
96 | // Handle unexpected response
97 | document.getElementById("output").innerHTML =
98 | "Unexpected response from server.
";
99 | }
100 | })
101 | .catch((error) => {
102 | console.error(error);
103 | document.getElementById("output").innerText =
104 | "Error occurred while running the code.";
105 | });
106 | }
107 |
--------------------------------------------------------------------------------