Futuristic Code Editor - Minor Project

A modern, web-based code editor with real-time preview functionality, built as a minor project for BCA 3rd Year.

🎓 Project Information

• Developer: Devraj
• Course: BCA 3rd Year
• Institution: Vinayak Vidyapeeth College
• Project Type: Minor Project
• Language: HTML, CSS, JavaScript

✨ Features

• Real-time Code Preview: See your HTML, CSS, and JavaScript output instantly
• Auto-completion: Automatic bracket and quote pairing for faster coding
• Responsive Design: Works seamlessly on desktop and mobile devices
• Futuristic UI: Modern design with smooth animations and gradients
• Keyboard Shortcuts:
  • Ctrl + Enter to run code
  • Escape to close modal
• Auto-run: Code executes automatically after 2 seconds of inactivity
• Clear All: Quick button to clear all code areas
• Project Info Modal: Displays project and developer information

🚀 Getting Started

1. Clone or download the project files
2. Open index.html in your web browser
3. Start coding in the HTML, CSS, and JavaScript panels
4. Click "Run" to see your output or wait for auto-run
5. Use the "Info" button to view project details

📁 Project Structure

futuristic-code-editor/
├── index.html          # Main HTML structure
├── style.css           # Stylesheet with futuristic design
├── script.js           # JavaScript functionality
└── README.md           # Project documentation

🛠️ Technologies Used

• HTML5: Structure and semantic markup
• CSS3: Styling, animations, and responsive design
• JavaScript (ES6+): Interactive functionality and DOM manipulation
• Font Awesome: Icons for enhanced UI
• Google Fonts: Orbitron font for futuristic appearance

🎨 Design Features

• Gradient backgrounds with futuristic color scheme
• Smooth hover animations and transitions
• Modal popup for project information
• Responsive layout for all screen sizes
• Professional typography and spacing

🔧 Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Mobile browsers

📝 Usage Instructions

1. HTML Panel: Write your HTML structure
2. CSS Panel: Add styling and animations
3. JavaScript Panel: Include interactive functionality
4. Output Panel: View real-time preview of your code
5. Run Button: Manually execute your code
6. Clear All: Reset all code panels
7. Info Button: View project and developer information

🎯 Educational Purpose

This project demonstrates:

• Modern web development practices
• Responsive design principles
• JavaScript DOM manipulation
• CSS animations and transitions
• User interface design
• Code organization and structure

📞 Contact

Developer: Devraj
Institution: Vinayak Vidyapeeth College
Course: BCA 3rd Year

---

This project was created as part of the BCA curriculum to demonstrate web development skills and modern UI/UX design principles.