{"id":26339185,"url":"https://github.com/codingtuto/codingintrojs","last_synced_at":"2025-03-16T03:16:35.066Z","repository":{"id":281390361,"uuid":"945129979","full_name":"codingtuto/CodingIntroJS","owner":"codingtuto","description":"A lightweight library for interactive guided tours with a stylish spotlight effect.","archived":false,"fork":false,"pushed_at":"2025-03-08T18:24:40.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-08T19:26:36.172Z","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/codingtuto.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":"2025-03-08T18:17:01.000Z","updated_at":"2025-03-08T18:24:43.000Z","dependencies_parsed_at":"2025-03-08T19:36:42.404Z","dependency_job_id":null,"html_url":"https://github.com/codingtuto/CodingIntroJS","commit_stats":null,"previous_names":["codingtuto/codingintrojs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingtuto%2FCodingIntroJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingtuto%2FCodingIntroJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingtuto%2FCodingIntroJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingtuto%2FCodingIntroJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codingtuto","download_url":"https://codeload.github.com/codingtuto/CodingIntroJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243818130,"owners_count":20352629,"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-03-16T03:16:34.616Z","updated_at":"2025-03-16T03:16:35.057Z","avatar_url":"https://github.com/codingtuto.png","language":"JavaScript","readme":"# CodingIntroJS - Your Super-Easy Guide to Interactive Website Tours\n\n![Logo](https://i.imgur.com/YtdMwBN.png)\n\n👋 **Welcome to CodingIntroJS!** Want to guide your users through your website in a fun and interactive way? This lightweight JavaScript library lets you create guided tours with smooth spotlight effects, making your site more engaging and user-friendly.\n\n---\n\n## Features\n\n| Feature               | Description                                                                 |\n|-----------------------|-----------------------------------------------------------------------------|\n| 🎯 **Spotlight Magic** | Highlight important elements with a smooth blur effect to focus user attention.|\n| ✨ **Customizable Tooltips** | Customize tooltip colors, titles, and content to fit your website’s style.  |\n| 🚀 **Simple Setup**    | Easy to implement by just including the script and defining your tour steps.|\n| ⌨️ **Keyboard Navigation** | Allows users to navigate using the keyboard for better accessibility.      |\n| 📱 **Responsive Design**  | Works seamlessly across all screen sizes (desktop, tablet, mobile).        |\n| ⚡ **Lightweight \u0026 Fast** | No extra bloat—keep your site fast and lean.                                |\n\n---\n\n## Installation\n\n### CDN Installation\n\nTo quickly get started, you can use the CDN version of `CodingIntroJS`. Add the following lines to your HTML:\n\n```html\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/codingintrojs/dist/codingintrojs.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n---\n\n## Usage\n\n### Step 1: Define Your Tour Steps\n\nCreate an array of objects to define each tour step, including which elements to spotlight and the tooltip content.\n\n```javascript\nconst tourSteps = [\n  {\n    selector: '#main-title', \n    title: 'Welcome!', \n    content: 'This is the main title of our website.'\n  },\n  {\n    selector: '.nav-link', \n    title: 'Navigation Links',\n    content: 'Use these links to navigate the site.',\n    tooltipPosition: 'bottom'\n  },\n  {\n    selector: '#cta-button', \n    title: 'Call to Action!',\n    content: 'Click this button to get started!',\n    tooltipPosition: 'top'\n  }\n];\n```\n\n### Step 2: Create and Initialize the Tour\n\nAfter defining the tour steps, create a new instance of `CodingIntroJS` and start the tour:\n\n```javascript\nconst tour = new CodingIntroJS(tourSteps);\ntour.init();\n```\n\nOptionally, you can customize the look by passing an options object:\n\n```javascript\nconst tour = new CodingIntroJS(tourSteps, {\n  tooltipBackgroundColor: '#f0f0f0',\n  tooltipTitleColor: '#333',\n  tooltipContentColor: '#555',\n  animationSpeed: 500, // Slower animations\n  allowClose: false,   // Disable close button\n  onFinish: function() {\n    alert(\"Tour finished! You're now a website pro!\");\n  }\n});\ntour.init();\n```\n\n---\n\n## Customization Options\n\nYou can tweak many aspects of the tour to match your style and preferences. Here are the available options:\n\n| Option                   | Description                                                                 |\n|--------------------------|-----------------------------------------------------------------------------|\n| `spotlightPadding`        | Extra space around the spotlighted element (default: 20px).                 |\n| `overlayOpacity`          | Transparency of the overlay (range: 0 to 1, default: 0.92).                |\n| `tooltipBackgroundColor`  | Background color of the tooltip (default: dark gradient).                   |\n| `tooltipTitleColor`       | Title text color in the tooltip (default: #4285f4).                         |\n| `animationSpeed`          | Speed of animations (in milliseconds, default: 300).                        |\n| `keyboardNavigation`      | Enable/disable keyboard navigation (default: true).                         |\n| `onStart`, `onFinish`     | Functions to call when the tour starts/ends.                               |\n\nExample of using options:\n\n```javascript\nconst tour = new CodingIntroJS(tourSteps, {\n  overlayOpacity: 0.8,\n  tooltipBackgroundColor: '#f0f0f0',\n  tooltipTitleColor: '#333',\n  animationSpeed: 500,\n  allowClose: false,\n  onFinish: function() {\n    alert(\"You're now a website pro!\");\n  }\n});\ntour.init();\n```\n\n---\n\n## Example\n\nHere’s a minimal example to help you get started quickly. Copy and paste the code into your `index.html` file, and open it in your browser!\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\u003eMy Demo Website\u003c/title\u003e\n  \u003cstyle\u003e\n    body { font-family: sans-serif; }\n    nav ul { list-style: none; padding: 0; }\n    nav li { display: inline-block; margin-right: 20px; }\n    nav a { text-decoration: none; color: #007bff; }\n    button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n  \u003ch1 id=\"main-title\"\u003eWelcome to My Demo Website!\u003c/h1\u003e\n\n  \u003cnav\u003e\n    \u003cul\u003e\n      \u003cli\u003e\u003ca href=\"#\" class=\"nav-link\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#\" class=\"nav-link\"\u003eProducts\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#\" class=\"nav-link\"\u003eServices\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#\" class=\"nav-link\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\n  \u003cp\u003eHere’s some content, we’ll guide you through it with a tour.\u003c/p\u003e\n\n  \u003cbutton id=\"cta-button\"\u003eLearn More\u003c/button\u003e\n\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/codingintrojs/dist/codingintrojs.min.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    document.addEventListener('DOMContentLoaded', function() {\n      const tourSteps = [\n        { selector: '#main-title', title: 'Hello!', content: 'This is our main title.' },\n        { selector: 'nav', title: 'Navigation', content: 'Use these links to navigate the site.' },\n        { selector: '#cta-button', title: 'Click Me!', content: 'Click this button to learn more!' }\n      ];\n      const tour = new CodingIntroJS(tourSteps);\n      tour.init();\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n---\n\n## Contributing\n\nWe welcome contributions! If you have ideas for improvements, bug fixes, or new features, feel free to open an issue or submit a pull request. Here's how you can contribute:\n\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature-name`).\n3. Commit your changes (`git commit -am 'Add new feature'`).\n4. Push to the branch (`git push origin feature-name`).\n5. Open a pull request.\n\n---\n\n## License\n\nThis project is licensed under the MIT License. Feel free to use it in your personal and commercial projects.\n\n---","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingtuto%2Fcodingintrojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingtuto%2Fcodingintrojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingtuto%2Fcodingintrojs/lists"}