https://github.com/ashutosh7i/ashpen
a Codepen clone ( made to regain css skills😂)
https://github.com/ashutosh7i/ashpen
codepen-clone html-css-javascript iframes learning-resources online-compiler
Last synced: 5 months ago
JSON representation
a Codepen clone ( made to regain css skills😂)
- Host: GitHub
- URL: https://github.com/ashutosh7i/ashpen
- Owner: ashutosh7i
- Created: 2023-08-03T23:17:22.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-31T04:22:12.000Z (almost 3 years ago)
- Last Synced: 2025-06-01T20:30:52.765Z (about 1 year ago)
- Topics: codepen-clone, html-css-javascript, iframes, learning-resources, online-compiler
- Language: HTML
- Homepage: http://code.ashutosh7i.dev/
- Size: 175 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Ashpen: Online HTML/CSS/JS Compiler
Ashpen is an online HTML/CSS/JS compiler that allows you to write and execute HTML, CSS, and JavaScript code snippets directly in your browser. Ashpen provides a code editor, result viewer, and live rendering of your code. This README will guide you through its features, usage, and architecture.
## Features
- Three separate code editors for HTML, CSS, and JavaScript.
- Live rendering: See your code's output in real-time.
- Responsive design: Works well on various screen sizes.
- Resize functionality: Adjust the editor and result viewer sizes.
- Easy-to-use interface with a clean and intuitive layout.
## Usage
1. Open the `index.html` file in your browser.
2. In each of the three editors, write your HTML, CSS, and JavaScript code.
3. Your code will be rendered live in the result viewer.
4. Adjust the editor and viewer sizes using the resizer handle.
## Project Structure
- `index.html`: The main HTML file that displays the Ashpen interface.
- `style.css`: The CSS file responsible for styling the Ashpen interface.
- `handleResize.js`: JavaScript code for handling the resizing functionality.
- `renderEngine.js`: JavaScript code for rendering HTML, CSS, and JS in the result viewer.
## Architecture
- Ashpen uses HTML, CSS, and JavaScript to create a user-friendly interface.
- The `handleResize.js` script enables resizing of the editor and result viewer sections.
- The `renderEngine.js` script takes code from the editors, combines it, and displays it in the iframe result viewer.
## Contributing
If you have ideas for new features, Ashpen is open for contributions!