Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/harsh-pandhe/code_editor
A user-friendly web-based code editor for real-time HTML, CSS, and JavaScript coding. It features separate sections for each language, a live preview, and options to clear, run, and download code. Built with HTML, CSS, JavaScript, Bootstrap, and DOMPurify for a secure coding experience.
https://github.com/harsh-pandhe/code_editor
Last synced: 23 days ago
JSON representation
A user-friendly web-based code editor for real-time HTML, CSS, and JavaScript coding. It features separate sections for each language, a live preview, and options to clear, run, and download code. Built with HTML, CSS, JavaScript, Bootstrap, and DOMPurify for a secure coding experience.
- Host: GitHub
- URL: https://github.com/harsh-pandhe/code_editor
- Owner: harsh-pandhe
- License: mit
- Created: 2024-01-26T08:44:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-01T23:12:28.000Z (about 1 year ago)
- Last Synced: 2024-11-11T21:27:09.918Z (3 months ago)
- Language: HTML
- Homepage:
- Size: 2.47 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Web Code Editor
Web Code Editor is an online tool that allows users to write and run HTML, CSS, and JavaScript code in a web browser.
## Table of Contents
- [Features](#features)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [License](#license)
## Features
1. **Multi-Language Support:**
- Separate sections for HTML, CSS, and JavaScript.
2. **Real-time Preview:**
- Instantly view changes in the output.
3. **Code Execution:**
- Click "Run Code" for immediate updates.
4. **Clear Code:**
- Reset all code areas with a single click.
5. **Download Code:**
- Save your work as a text file.
6. **Responsive Design:**
- Accessible across devices.
7. **Error Handling:**
- Enhances user experience with error alerts.
8. **Security Measures:**
- Guards against code injection vulnerabilities.
## Getting Started
These instructions will help you set up the project on your local machine for development or testing purposes.
### Prerequisites
- Web browser (Google Chrome, Firefox, etc.)
- Ensure you have Node.js installed.
- Familiarity with web development basics.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/harsh-pandhe/Code_Editor.git
```
2. Open the project folder:
```bash
cd Code_Editor
```
3. Open `index.html` in your web browser.
## Usage
1. **Open the app:** Visit the web application in your browser.
2. **Write code:** Use the provided text areas to write or paste your HTML, CSS, and JavaScript code.
3. **Run your code:** Click the "Run Code" button to instantly see the output.
4. **Clear code:** Use the "Clear Code" button to reset the code areas.
5. **Download code:** Save your code as a text file using the "Download Code" button.
6. **Explore and experiment:** Play around with the editor to create and test your web code.
## Screenshot: Web Code Editor
A Visual representation of the Web Code Editor.
## Languages & Technologies
The project uses the following languages and technologies:
- **HTML**: Markup language for structuring the web page.
- **CSS**: Stylesheets for styling the HTML elements and ensuring a responsive design.
- **JavaScript**: Programming language for adding dynamic behavior to the web page and enabling real-time code execution.
- **Bootstrap**: A front-end framework for styling and layout.
- **DOMPurify**: A JavaScript library for sanitizing and cleaning HTML content.
- **Node.js (for development)**: A JavaScript runtime for server-side scripting.
- **npm (Node Package Manager)**: Used for managing project dependencies.
## License
This project is licensed under the [MIT License](LICENSE).