https://github.com/ayushmaninbox/html-css-js-compiler

A website to run and integrate ur HTML, CSS and JS files!
https://github.com/ayushmaninbox/html-css-js-compiler

compiler web-development website

Last synced: 12 days ago
JSON representation

A website to run and integrate ur HTML, CSS and JS files!

• Host: GitHub
• URL: https://github.com/ayushmaninbox/html-css-js-compiler
• Owner: ayushmaninbox
• License: mit
• Created: 2024-10-30T20:08:51.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-30T21:37:53.000Z (3 months ago)
• Last Synced: 2024-12-04T05:08:42.472Z (2 months ago)
• Topics: compiler, web-development, website
• Language: HTML
• Homepage: https://dev-compiler.netlify.app
• Size: 531 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# DevComp - Web-based Code Editor

DevComp is a lightweight, browser-based code editor that supports HTML, CSS, and JavaScript development with real-time preview capabilities.

## Features

- 🎨 Syntax highlighting for HTML, CSS, and JavaScript

- 👀 Real-time preview of your code

- 📱 Responsive design that works on desktop and mobile

- 🎯 Live code execution

- 💾 Project download functionality

- 🔧 Customizable interface with font size controls

- 📺 Full-screen mode

- 🌗 Dark theme support

## Screenshots

### Loading Screen

![Loading Screen](./screenshots/loading.png)

*The initial loading screen of DevComp*

### Webpage Homepage

![Webpage Homepage](./screenshots/webpage.png)

*An example of a webpage created using DevComp*

### Working Example

![Working Example](./screenshots/working.png)

*Demonstration of a working code example in DevComp*

## Technologies Used

- CodeMirror for code editing

- JSZip for project download functionality

- FileSaver.js for handling file downloads

## Setup

1. Include the required dependencies:

```html

```

2. Include the project files:

- `index.html`

- `style.css`

- `editor.js`

## Usage

1. Open `index.html` in your web browser

2. Write your HTML, CSS, and JavaScript code in the respective panels

3. Click the "Run" button to see the results in the preview panel

4. Use the font size controls to adjust the editor text size

5. Toggle full-screen mode for a better coding experience

6. Download your project as a ZIP file containing all necessary files

## Keyboard Shortcuts

- Font Size: Use the A+ and A- buttons to adjust the editor font size

- Full Screen: Click the expand icon to toggle full-screen mode

- Run Code: Click the play button to execute and preview your code

## Accessibility

DevComp is built with accessibility in mind:

- ARIA labels for all interactive elements

- Keyboard navigation support

- Screen reader friendly interface

- High contrast theme

## Browser Support

DevComp works in all modern browsers including:

- Chrome

- Firefox

- Safari

- Edge

## License

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

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.