{"id":24804157,"url":"https://github.com/nelsenpro/cc","last_synced_at":"2025-03-25T06:46:03.986Z","repository":{"id":227630877,"uuid":"771983504","full_name":"nelsenpro/cc","owner":"nelsenpro","description":"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 \u003ccc\u003e tag. Created by Nelsen Niko ","archived":false,"fork":false,"pushed_at":"2024-06-16T07:29:54.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-05T02:17:28.402Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nelsenpro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-14T10:09:40.000Z","updated_at":"2024-06-16T07:29:57.000Z","dependencies_parsed_at":"2024-03-17T14:30:53.998Z","dependency_job_id":"4d976782-2560-4a03-ac69-8d74ba4cc313","html_url":"https://github.com/nelsenpro/cc","commit_stats":null,"previous_names":["nelsenpro/cc"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nelsenpro%2Fcc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nelsenpro%2Fcc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nelsenpro%2Fcc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nelsenpro%2Fcc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nelsenpro","download_url":"https://codeload.github.com/nelsenpro/cc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245414522,"owners_count":20611364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-30T06:15:22.198Z","updated_at":"2025-03-25T06:46:03.963Z","avatar_url":"https://github.com/nelsenpro.png","language":"JavaScript","readme":"\n# cc.js Documentation\n\ncc.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 `\u003ccc\u003e` tag. This document provides an overview of the library's features, usage instructions, and API reference.\n\n## Table of Contents\n\n1. [Features](#Features)\n2. [Installation](#Installation)\n3. [Usage](#Usage)\n   - [Example 1: Execute JavaScript Code](#example-1-execute-javascript-code)\n   - [Example 2: Apply CSS Styles](#example-2-apply-css-styles)\n   - [Example 3: Execute JSON Object](#example-3-execute-json-object)\n   - [Example 4: Dynamically Change Background Color](#example-4-dynamically-change-background-color)\n   - [Example 5: Copy Text to Clipboard](#example-5-copy-text-to-clipboard)\n   - [Example 6: Typing Animation](#example-6-typing-animation)\n4. [API Reference](#api-reference)\n5. [Author](#Author)\n6. [License](#license)\n\n## Features\n\n- Execute JavaScript code dynamically within HTML documents.\n- Apply CSS styles dynamically using the `\u003ccc\u003e` tag.\n- Support for executing JSON objects containing CSS and JavaScript code.\n- Utility functions for common tasks such as copying to clipboard and typing text.\n\n## Installation\n\nTo use cc.js in your project, you can include it directly in your HTML file using a `\u003cscript\u003e` tag or integrate it with your build process using a module bundler like Webpack or Rollup.\n\n```html\n\u003cscript src=\"cc.js\"\u003e\u003c/script\u003e\n```\n###### CDN\n```html\n \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js\" defer\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Example 1: Execute JavaScript Code\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003ecc.js Example - Execute JavaScript\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ccc\u003e\n        console.log('Hello, world!');\n    \u003c/cc\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Example 2: Apply CSS Styles\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003ecc.js Example - Apply CSS Styles\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ccc\u003e\n            body {\n                background-color: lightblue;\n            }\n    \u003c/cc\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Example 3: Execute JSON Object\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003ecc.js Example - Execute JSON Object\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ccc\u003e\n        {\n            \"css\": [\n                {\n                    \"selector\": \"h1\",\n                    \"styles\": {\n                        \"color\": \"red\",\n                        \"font-size\": \"24px\"\n                    }\n                }\n            ],\n            \"js\": [\n                \"console.log('JSON execution')\"\n            ]\n        }\n    \u003c/cc\u003e\n    \u003ch1\u003eThis heading will be styled in red with a font size of 24px\u003c/h1\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Example 4: Dynamically Change Background Color\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003ecc.js Example - Dynamically Change Background Color\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ccc\u003e\n            // Dynamically change background color\n            document.body.style.backgroundColor = 'lightblue';\n    \u003c/cc\u003e\n    \u003ch1\u003eWelcome to our website!\u003c/h1\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Example 5: Copy Text to Clipboard\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003ecc.js Example - Copy Text to Clipboard\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cbutton onclick=\"copyText()\"\u003eCopy Text\u003c/button\u003e\n    \u003ccc id=\"copyTextScript\"\u003e\n            // Function to copy text to clipboard\n            function copyText() {\n                ccRun.copyToClipboard('Text copied successfully!');\n            }\n    \u003c/cc\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Example 6: Typing Animation\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003ecc.js Example - Typing Animation\u003c/title\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/nelsenpro/cc/cc.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cp id=\"typingText\"\u003e\u003c/p\u003e\n    \u003ccc id=\"typingScript\"\u003e\n            // Function to type text with animation\n            ccRun.typeText(document.getElementById('typingText'), 'Hello, world!', 100);\n    \u003c/cc\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## API Reference\n\n### ccRun.execute()\n- Description: Executes JavaScript and applies CSS dynamically within HTML documents.\n- Syntax: `ccRun.execute()`\n\n### ccRun.copyToClipboard(text)\n- Description: Copies the specified text to the clipboard.\n- Parameters:\n  - `text` (string): The text to be copied.\n- Returns: `true` if copying was successful, `false` otherwise.\n\n### ccRun.typeText(element, text, delay)\n- Description: Types out text within a specified HTML element with a specified delay between characters.\n- Parameters:\n  - `element` (HTMLElement): The HTML element where the text will be typed.\n  - `text` (string): The text to be typed.\n  - `delay` (number): The delay (in milliseconds) between typing each character.\n\n## Author\ncc.js was created by Nelsen Niko.\n\n## License\n\ncc.js is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnelsenpro%2Fcc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnelsenpro%2Fcc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnelsenpro%2Fcc/lists"}