https://github.com/nelsenpro/cc
cc.js or CodeCanvas.js is a lightweight JavaScript library that allows you to execute JavaScript and apply styles dynamically within HTML documents using the <cc> tag. Created by Nelsen Niko
https://github.com/nelsenpro/cc
Last synced: 12 months ago
JSON representation
cc.js or CodeCanvas.js is a lightweight JavaScript library that allows you to execute JavaScript and apply styles dynamically within HTML documents using the <cc> tag. Created by Nelsen Niko
- Host: GitHub
- URL: https://github.com/nelsenpro/cc
- Owner: nelsenpro
- License: mit
- Created: 2024-03-14T10:09:40.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-16T07:29:54.000Z (over 1 year ago)
- Last Synced: 2025-03-05T02:17:28.402Z (about 1 year ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cc.js Documentation
cc.js, also known as CodeCanvas.js, is a lightweight JavaScript library that enables the execution of JavaScript and application of CSS dynamically within HTML documents using the `` tag. This document provides an overview of the library's features, usage instructions, and API reference.
## Table of Contents
1. [Features](#Features)
2. [Installation](#Installation)
3. [Usage](#Usage)
- [Example 1: Execute JavaScript Code](#example-1-execute-javascript-code)
- [Example 2: Apply CSS Styles](#example-2-apply-css-styles)
- [Example 3: Execute JSON Object](#example-3-execute-json-object)
- [Example 4: Dynamically Change Background Color](#example-4-dynamically-change-background-color)
- [Example 5: Copy Text to Clipboard](#example-5-copy-text-to-clipboard)
- [Example 6: Typing Animation](#example-6-typing-animation)
4. [API Reference](#api-reference)
5. [Author](#Author)
6. [License](#license)
## Features
- Execute JavaScript code dynamically within HTML documents.
- Apply CSS styles dynamically using the `` tag.
- Support for executing JSON objects containing CSS and JavaScript code.
- Utility functions for common tasks such as copying to clipboard and typing text.
## Installation
To use cc.js in your project, you can include it directly in your HTML file using a `` tag or integrate it with your build process using a module bundler like Webpack or Rollup.
```html
<script src="cc.js">
```
###### CDN
```html
```
## Usage
### Example 1: Execute JavaScript Code
```html
cc.js Example - Execute JavaScript
console.log('Hello, world!');
```
### Example 2: Apply CSS Styles
```html
cc.js Example - Apply CSS Styles
body {
background-color: lightblue;
}
```
### Example 3: Execute JSON Object
```html
cc.js Example - Execute JSON Object
{
"css": [
{
"selector": "h1",
"styles": {
"color": "red",
"font-size": "24px"
}
}
],
"js": [
"console.log('JSON execution')"
]
}
This heading will be styled in red with a font size of 24px
```
### Example 4: Dynamically Change Background Color
```html
cc.js Example - Dynamically Change Background Color
// Dynamically change background color
document.body.style.backgroundColor = 'lightblue';
Welcome to our website!
```
### Example 5: Copy Text to Clipboard
```html
cc.js Example - Copy Text to Clipboard
Copy Text
// Function to copy text to clipboard
function copyText() {
ccRun.copyToClipboard('Text copied successfully!');
}
```
### Example 6: Typing Animation
```html
cc.js Example - Typing Animation
// Function to type text with animation
ccRun.typeText(document.getElementById('typingText'), 'Hello, world!', 100);
```
## API Reference
### ccRun.execute()
- Description: Executes JavaScript and applies CSS dynamically within HTML documents.
- Syntax: `ccRun.execute()`
### ccRun.copyToClipboard(text)
- Description: Copies the specified text to the clipboard.
- Parameters:
- `text` (string): The text to be copied.
- Returns: `true` if copying was successful, `false` otherwise.
### ccRun.typeText(element, text, delay)
- Description: Types out text within a specified HTML element with a specified delay between characters.
- Parameters:
- `element` (HTMLElement): The HTML element where the text will be typed.
- `text` (string): The text to be typed.
- `delay` (number): The delay (in milliseconds) between typing each character.
## Author
cc.js was created by Nelsen Niko.
## License
cc.js is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.