https://github.com/alokverma18/codepencil

Online Code Editor for HTML, CSS and JS
https://github.com/alokverma18/codepencil

code-pencil css hacktoberfest html javascript online-code-editor web-development

Last synced: about 1 year ago
JSON representation

Online Code Editor for HTML, CSS and JS

• Host: GitHub
• URL: https://github.com/alokverma18/codepencil
• Owner: alokverma18
• Created: 2023-09-17T16:33:47.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-27T08:29:20.000Z (over 2 years ago)
• Last Synced: 2025-02-08T08:16:16.470Z (over 1 year ago)
• Topics: code-pencil, css, hacktoberfest, html, javascript, online-code-editor, web-development
• Language: HTML
• Homepage: https://alokverma18.github.io/CodePencil/
• Size: 45.9 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# CodePencil ✒️

 

CodePencil is a basic Online Code Editor that lets you write and preview HTML, CSS, and JavaScript code in real-time. 

## Usage

- **HTML Input**: Write your HTML code in the `HTML` textarea. As you type or make changes, the preview will update automatically to reflect the changes.

- **CSS Input**: Add your CSS code in the `CSS` textarea. Like the HTML input, the styles will be applied to the content in real-time.

- **JavaScript Input**: Write your JavaScript code in the `JavaScript` textarea. This code will be executed when you press any keys inside this textarea or make changes.

- **Preview**: The output of your code will be displayed on the right side of the editor.

## Snap

![snap](snap.png)

## Demo

Try [CodePencil](https://alokverma18.github.io/CodePencil/) 

## Contributing

Feel free to Contribute and Improve this by creating a Pull Request or an Issue.

## Connect 

[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://alokverma18.github.io/)

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/alokverma18/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/ak_verma18)

## 

### Leave a 🌟 if it was Helpful!!

### Thanks!