https://github.com/chandrikabijore/code_editor
https://github.com/chandrikabijore/code_editor
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chandrikabijore/code_editor
- Owner: chandrikabijore
- Created: 2024-10-27T16:34:28.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-10-27T16:51:06.000Z (11 months ago)
- Last Synced: 2025-02-01T16:15:27.426Z (8 months ago)
- Language: CSS
- Size: 174 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🖥️ Code Editor
A simple, interactive code editor built using HTML, CSS, and JavaScript. This editor allows users to write code in three separate boxes for HTML, CSS, and JavaScript and displays the output in real time as they type.
✨ Features
1. Three separate input boxes for HTML, CSS, and JavaScript.
2. Live preview of the output, updated in real-time as code is written.
3. Clean and minimalistic design for the webpage.
🚀 Getting Started
To run the project locally, follow these steps:
Clone the repository:
git clone https://github.com/divyesh-singh-gehlot/code_editor.git
Navigate to the project directory:
cd code_editor
Navigate to the project sub-directory:
cd "Code Editor"
Open the index.html file in your browser:
For Windows: start index.html
For Mac: open index.html
📂 Project Structure
index.html: The main HTML file containing the structure of the editor and output.
style.css: Contains all styling for the code boxes, output, and overall webpage design.
script.js: The JavaScript file responsible for the real-time output and other interactive features.
🛠️ How It Works
Users can write code in each of the three boxes corresponding to HTML, CSS, and JavaScript.
As you type, the output is updated in real-time to reflect the changes.
💡 Future Enhancements
Adding more customizable features like different themes.
Improving the code editor with syntax highlighting.
Enhancing the UI/UX with better responsive design.