NOTE: THIS PROJECT IS STILL ON GOING AND YOU MAY ENCOUNTER SOME BUGS

If you find any bugs in the code, kindy report it on the issue tab above :)

---

Interactive Code Editor

• This project is a simple interactive code editor with multiple tab functionality.
• It allows users to write and run HTML code in real-time, offering an in-browser preview.
• The editor includes several controls, such as adding/removing tabs, running code, resetting the editor, and toggling full-screen mode.

Features

• Multiple Tabs: Open and switch between several code editing tabs.
• Live Preview: See the output of your HTML code right away in a preview window.
• Add/Remove Tabs: Easily add new tabs or remove old ones.
• Start Over / Start from Scratch: Reset your code or start with a blank template.
• Full-Screen Mode: Switch to full-screen mode for a better preview.
• ACE Code Editor: Uses the ACE editor for easy code editing and highlighting.
• Custom Background Color: You can select your own background color.

Project Structure

This project contains three main files:

1. index.html: The main HTML file that contains the structure of the code editor.
2. styles.css: The CSS file responsible for styling the editor, buttons, and layout.
3. script.js: The JavaScript file that manages the functionality of the code editor, such as adding tabs, running code, and handling full-screen toggling.

Getting Started

To run the project locally, follow these steps:

Prerequisites

Make sure you have a modern web browser installed. No server or additional setup is required.

Steps

1. Fork the repository: Go to the repository on GitHub, click the "Fork" button at the top right of the page to create a copy of the repository under your own account.

2. Clone the repository (from your forked version):

git clone https://github.com/yourusername/interactive-code-editor.git

3. Navigate to the project directory:

cd interactive-code-editor

4. Open the index.html file in your browser:

open index.html

or simply drag the index.html file into a web browser window.

Usage

• Write HTML Code: In the code editor, write your HTML, CSS, and JavaScript code.
• Run the Code: Click the Run Code button to see the output rendered in the preview pane.
• Add New Tabs: Click the + button to add new tabs.
• Remove Tabs: Click the × icon next to each tab to remove it.
• Start Over: Click the Start Over button to reset the editor with default content.
• Start From Scratch:Click the Start From Scratch button to start with a blank editor.
• Full-Screen Mode: Click the Full Screen button to toggle the preview into full-screen mode.

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

If you want to contribute:

1. Fork the project.
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'Added some AmazingFeature'
4. Push to the branch: git push origin feature/AmazingFeature
5. Open a pull request.