Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 6 hours 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 1 year ago)
Default Branch: main
Last Pushed: 2023-09-27T08:29:20.000Z (over 1 year ago)
Last Synced: 2023-09-27T18:25:28.130Z (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: 0
Watchers: 1
Forks: 0
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!