NetCode Editor

Welcome to NetCode Editor! This is a simple live code editor where you can write and test HTML, CSS, and JavaScript in real-time. The application provides a user-friendly interface, allowing users to see their changes instantly in an output frame. You can also download your code as an HTML file for easy sharing and use.

Features

• Real-Time Preview: See your HTML, CSS, and JavaScript code executed in real-time.
• Download Options: Download your work as a complete HTML file or just the HTML portion.
• Customizable Editor: Adjust the text colors for each code panel (HTML, CSS, JavaScript) to fit your preferences.
• Responsive Design: Works well on various devices with a clean and modern interface.
• Syntax Highlighting: its have Syntax Highlights to easy to read your codes.
• Line Numbering: You can have lines to your code

Usage

1. Write Your Code:

   • Open the editor and start typing your HTML, CSS, and JavaScript in their respective panels.

2. View Output:

   • The output panel displays the rendered result of your code as you type.

3. Download Your Work:

   • Click the "Download Full HTML File" button to download your code as a complete HTML file.
   • You can also download just the HTML portion by clicking the download icon next to the HTML header.

4. Customize Settings:

   • Click the "Settings" button to open a modal where you can change the text colors for each code editor panel.
   • After selecting your desired colors, click "Save Settings" to apply the changes.

Code Overview

The code for NetCode Editor is structured as follows:

• HTML Structure: The main layout includes three panels for HTML, CSS, and JavaScript input, along with an output section.
• Styling: CSS is used to create a clean and modern interface, utilizing flexbox for responsive design.
• JavaScript Functionality:
  • Updates the output iframe dynamically as you type in the code panels.
  • Handles downloading of the code files.
  • Manages the settings modal for color customization.

Technologies Used

• HTML: For the structure of the editor.
• CSS: For styling and layout.
• JavaScript: For interactivity and real-time code execution.

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes.

License

This project is open source and available under the MIT License.