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 <cc>
tag. This document provides an overview of the library's features, usage instructions, and API reference.
- Execute JavaScript code dynamically within HTML documents.
- Apply CSS styles dynamically using the
<cc>
tag. - Support for executing JSON objects containing CSS and JavaScript code.
- Utility functions for common tasks such as copying to clipboard and typing text.
To use cc.js in your project, you can include it directly in your HTML file using a <script>
tag or integrate it with your build process using a module bundler like Webpack or Rollup.
<script src="cc.js"></script>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js" defer></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Execute JavaScript</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<cc>
console.log('Hello, world!');
</cc>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Apply CSS Styles</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<cc>
body {
background-color: lightblue;
}
</cc>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Execute JSON Object</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<cc>
{
"css": [
{
"selector": "h1",
"styles": {
"color": "red",
"font-size": "24px"
}
}
],
"js": [
"console.log('JSON execution')"
]
}
</cc>
<h1>This heading will be styled in red with a font size of 24px</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Dynamically Change Background Color</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<cc>
// Dynamically change background color
document.body.style.backgroundColor = 'lightblue';
</cc>
<h1>Welcome to our website!</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Copy Text to Clipboard</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<button onclick="copyText()">Copy Text</button>
<cc id="copyTextScript">
// Function to copy text to clipboard
function copyText() {
ccRun.copyToClipboard('Text copied successfully!');
}
</cc>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cc.js Example - Typing Animation</title>
<script src="https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js"></script>
</head>
<body>
<p id="typingText"></p>
<cc id="typingScript">
// Function to type text with animation
ccRun.typeText(document.getElementById('typingText'), 'Hello, world!', 100);
</cc>
</body>
</html>
- Description: Executes JavaScript and applies CSS dynamically within HTML documents.
- Syntax:
ccRun.execute()
- Description: Copies the specified text to the clipboard.
- Parameters:
-
text
(string): The text to be copied.
-
- Returns:
true
if copying was successful,false
otherwise.
- 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.
-
cc.js was created by Nelsen Niko.
cc.js is licensed under the MIT License. See the LICENSE file for more details.