{"id":28576490,"url":"https://github.com/arsybai/javascript-kit","last_synced_at":"2025-06-10T23:41:25.326Z","repository":{"id":188311152,"uuid":"678509711","full_name":"Arsybai/JavaScript-Kit","owner":"Arsybai","description":"Empowering Web Development with JavaScript","archived":false,"fork":false,"pushed_at":"2023-08-15T13:55:32.000Z","size":229,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-09T23:48:30.655Z","etag":null,"topics":["code-snippets-library","implementation","modern-web-technologies","responsive-web-development","tutorials-and-guides","versatility-across-projects"],"latest_commit_sha":null,"homepage":"","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/Arsybai.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}},"created_at":"2023-08-14T18:06:10.000Z","updated_at":"2023-12-25T16:52:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"e9639140-5c75-4e21-8d16-586f802aeb50","html_url":"https://github.com/Arsybai/JavaScript-Kit","commit_stats":null,"previous_names":["arsybai/javascript-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arsybai%2FJavaScript-Kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arsybai%2FJavaScript-Kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arsybai%2FJavaScript-Kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arsybai%2FJavaScript-Kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arsybai","download_url":"https://codeload.github.com/Arsybai/JavaScript-Kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arsybai%2FJavaScript-Kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259172170,"owners_count":22816514,"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":["code-snippets-library","implementation","modern-web-technologies","responsive-web-development","tutorials-and-guides","versatility-across-projects"],"created_at":"2025-06-10T23:40:57.654Z","updated_at":"2025-06-10T23:41:25.305Z","avatar_url":"https://github.com/Arsybai.png","language":"JavaScript","readme":"# JavaScript-Kit\nI make this actualy for personal use, but you can use it also.\n\nis a comprehensive and dynamic collection of JavaScript resources designed to empower web developers with the tools they need to create interactive and engaging web experiences. With a vast array of code snippets, libraries, and tutorials, JavaScript-Kit serves as a go-to hub for developers seeking to harness the power of JavaScript to enhance their projects. Whether you're a beginner exploring the world of web development or an experienced coder seeking new techniques, JavaScript-Kit provides a wealth of knowledge to elevate your skills and create modern, feature-rich websites and applications.\n\n## How to use it\nI'll describe all of this one by one\n\n### Notification\nSimply create notification\n```html\n\u003cscript src=\"/notification/script.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    notify(title=\"Hello World\", body=\"Test Notification\", icon=\"https://avatars.githubusercontent.com/u/33319709?v=4\");\n\u003c/script\u003e\n```\n\n### Dragable\nYou can drag or move around some element with this\n```html\n\u003clink rel=\"stylesheet\" href=\"/dragable/style.css\"\u003e\n\u003cscript src=\"/dragable/script.js\"\u003e\u003c/script\u003e\n\u003cdiv class=\"draggable\"\u003e\n    Drag me around!\n\u003c/div\u003e\n\u003cdiv class=\"draggable\"\u003e\n    Drag this too!\n\u003c/div\u003e\n```\n\n### native_splash\ncreate a custom \"splash-like\" effect in your web application using JavaScript and CSS, you can do so by creating an overlay that appears while the page is loading, and then fades out when the content is ready.\n```html\n\u003clink rel=\"stylesheet\" href=\"/native_splash/style.css\"\u003e\n\u003cscript src=\"/native_splash/script.js\"\u003e\u003c/script\u003e\n\u003cdiv class=\"splash\" id=\"splash\"\u003e\n    \u003cdiv class=\"splash-content\"\u003e\n        Loading...\n    \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"content\" id=\"content\"\u003e\n    \u003c!-- Your main content goes here --\u003e\n    \u003ch1\u003eHello World\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n### google_map_widget\nA JavaScript plugin that provides a widget to help implement Google Maps in my application.\n```html\n\u003c!-- Include the Google Maps JavaScript API with your API key --\u003e\n\u003cscript src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY\u0026callback=initMap\" async defer\u003e\u003c/script\u003e\n\u003cscript src=\"/google_map_widget/script.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"map\" style=\"width: 100%; height: 400px;\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    // Create a new GoogleMapsWidget instance\n    const mapWidget = new GoogleMapsWidget('map', {\n        apiKey: 'YOUR_API_KEY', // Replace with your Google Maps API key\n        center: { lat: 34.0522, lng: -118.2437 }, // Centered at Los Angeles\n        zoom: 12\n    });\n\n    // You can use the public methods to update the map\n    mapWidget.setCenter({ lat: 40.7128, lng: -74.0060 }); // Set new center\n    mapWidget.setZoom(14); // Change the zoom level\n\u003c/script\u003e\n```\n\n### pull_to_refresh\nupdates by pulling from the top down on the device and performs the loading.\n```html\n\u003clink rel=\"stylesheet\" href=\"/pull_to_refresh/style.css\"\u003e\n\u003cscript src=\"/pull_to_refresh/script.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"refreshContainer\" class=\"refresh-container\"\u003e\n    \u003cdiv class=\"refresh-content\"\u003e\n        \u003c!-- Your main content goes here --\u003e\n        \u003ch1\u003eWelcome to My Web App\u003c/h1\u003e\n        \u003cp\u003ePull down to refresh\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    const refreshContainer = document.getElementById(\"refreshContainer\");\n    \n    // Initialize the pull-to-refresh plugin\n    const pullToRefresh = new PullToRefresh(refreshContainer, {\n        refreshCallback: function() {\n            // Perform the refresh action here\n            console.log(\"Refreshing...\");\n            // Simulate refreshing for 2 seconds\n            setTimeout(function() {\n                // After the refresh is complete, call the done() method\n                pullToRefresh.done();\n                console.log(\"Refresh completed\");\n            }, 2000);\n        }\n    });\n\u003c/script\u003e\n```\n\n### audio_player\nCreating a comprehensive audio player as a JavaScript plugin involves handling audio playback, user interactions, controls, and audio source management.\n```html\n\u003clink rel=\"stylesheet\" href=\"/audio_player/style.css\"\u003e\n\u003cscript src=\"/audio_player/script.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"audioPlayerContainer\" class=\"audio-player\"\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    // Initialize the audio player plugin\n    const audioPlayer = new AudioPlayer('audioPlayerContainer', {\n        source: '/audio_player/sample.mp3' // Replace with the URL to your audio file\n    });\n\u003c/script\u003e\n```\n\n### drawer\nofc. for make a drawer\n```html\n\u003clink rel=\"stylesheet\" href=\"/drawer/style.css\"\u003e\n\u003cscript src=\"/drawer/script.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"app\"\u003e\n    \u003cbutton id=\"openDrawerButton\"\u003eOpen Drawer\u003c/button\u003e\n    \u003cdiv id=\"drawer\" class=\"drawer\"\u003e\n        \u003cdiv class=\"drawer-content\"\u003e\n            \u003c!-- Drawer content goes here --\u003e\n            \u003ch2\u003eDrawer Content\u003c/h2\u003e\n            \u003cp\u003eThis is the content of the drawer.\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    const drawer = new Drawer('drawer', 'openDrawerButton');\n\u003c/script\u003e\n```\n\n### bottom_nav\nA beautiful and animated bottom navigation. The navigation bar use your current theme, but you are free to customize it.\n```html\n\u003clink rel=\"stylesheet\" href=\"/bottom_nav/style.css\"\u003e\n\u003cscript src=\"/bottom_nav/script.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"app\"\u003e\n    \u003cdiv class=\"content\"\u003e\n        \u003c!-- Your main content goes here --\u003e\n        \u003ch1\u003eWelcome to My App\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cnav class=\"bottom-navigation\"\u003e\n        \u003ca href=\"#\" class=\"nav-item active\"\u003e\n            \u003cspan class=\"icon\"\u003e🏠\u003c/span\u003e\n            \u003cspan class=\"label\"\u003eHome\u003c/span\u003e\n        \u003c/a\u003e\n        \u003ca href=\"#\" class=\"nav-item\"\u003e\n            \u003cspan class=\"icon\"\u003e📷\u003c/span\u003e\n            \u003cspan class=\"label\"\u003eGallery\u003c/span\u003e\n        \u003c/a\u003e\n        \u003ca href=\"#\" class=\"nav-item\"\u003e\n            \u003cspan class=\"icon\"\u003e🔍\u003c/span\u003e\n            \u003cspan class=\"label\"\u003eSearch\u003c/span\u003e\n        \u003c/a\u003e\n        \u003ca href=\"#\" class=\"nav-item\"\u003e\n            \u003cspan class=\"icon\"\u003e👤\u003c/span\u003e\n            \u003cspan class=\"label\"\u003eProfile\u003c/span\u003e\n        \u003c/a\u003e\n    \u003c/nav\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    const bottomNav = new BottomNavigation('bottom-navigation');\n\u003c/script\u003e\n```\n### toast\nMake a toast. a simple message in bottom\n```html\n\u003clink rel=\"stylesheet\" href=\"/toast/style.css\"\u003e\n\u003cscript src=\"/toast/script.js\"\u003e\u003c/script\u003e\n\u003cbody\u003e\n\u003cscript\u003e\n    const toast = new Toast();\n    toast.show(\"This is a toast message\", 3000); // Message, duration in milliseconds\n\u003c/script\u003e\n\u003c/body\u003e\n```\n\n### click_to_copy\nwith the \"copy\" class and using the Clipboard API to copy the text within that element.\n```html\n\u003cp class=\"copy\"\u003eClick to copy this text.\u003c/p\u003e\n\u003cp class=\"copy\"\u003eCopy me too!\u003c/p\u003e\n\u003cscript src=\"/click_to_copy/script.js\"\u003e\u003c/script\u003e\n```\n\n### share_button\nMake floating button for share the page.\n```html\n\u003cscript src=\"/share_button/script.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const shareButton = new ShareButtonPlugin();\n\u003c/script\u003e\n```\n\n### cookie_consent\nJavaScript popup for cookie consent that appears in the bottom right corner of the screen involves creating the popup element, adding content and buttons, handling user interactions, and storing user preferences (accept or decline) in local storage.\n```html\n\u003clink rel=\"stylesheet\" href=\"/cookie_consent/style.css\"\u003e\n\u003cscript src=\"/cookie_consent/script.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const cookiePopup = new CookieConsentPopup(\"This website uses cookies to improve your experience.\");\n\u003c/script\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farsybai%2Fjavascript-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farsybai%2Fjavascript-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farsybai%2Fjavascript-kit/lists"}