https://github.com/arsybai/javascript-kit
Empowering Web Development with JavaScript
https://github.com/arsybai/javascript-kit
code-snippets-library implementation modern-web-technologies responsive-web-development tutorials-and-guides versatility-across-projects
Last synced: 8 months ago
JSON representation
Empowering Web Development with JavaScript
- Host: GitHub
- URL: https://github.com/arsybai/javascript-kit
- Owner: Arsybai
- License: mit
- Created: 2023-08-14T18:06:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-15T13:55:32.000Z (over 2 years ago)
- Last Synced: 2025-06-09T23:48:30.655Z (8 months ago)
- Topics: code-snippets-library, implementation, modern-web-technologies, responsive-web-development, tutorials-and-guides, versatility-across-projects
- Language: JavaScript
- Homepage:
- Size: 224 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JavaScript-Kit
I make this actualy for personal use, but you can use it also.
is 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.
## How to use it
I'll describe all of this one by one
### Notification
Simply create notification
```html
notify(title="Hello World", body="Test Notification", icon="https://avatars.githubusercontent.com/u/33319709?v=4");
```
### Dragable
You can drag or move around some element with this
```html
Drag me around!
Drag this too!
```
### native_splash
create 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.
```html
Loading...
```
### google_map_widget
A JavaScript plugin that provides a widget to help implement Google Maps in my application.
```html
// Create a new GoogleMapsWidget instance
const mapWidget = new GoogleMapsWidget('map', {
apiKey: 'YOUR_API_KEY', // Replace with your Google Maps API key
center: { lat: 34.0522, lng: -118.2437 }, // Centered at Los Angeles
zoom: 12
});
// You can use the public methods to update the map
mapWidget.setCenter({ lat: 40.7128, lng: -74.0060 }); // Set new center
mapWidget.setZoom(14); // Change the zoom level
```
### pull_to_refresh
updates by pulling from the top down on the device and performs the loading.
```html
Welcome to My Web App
Pull down to refresh
const refreshContainer = document.getElementById("refreshContainer");
// Initialize the pull-to-refresh plugin
const pullToRefresh = new PullToRefresh(refreshContainer, {
refreshCallback: function() {
// Perform the refresh action here
console.log("Refreshing...");
// Simulate refreshing for 2 seconds
setTimeout(function() {
// After the refresh is complete, call the done() method
pullToRefresh.done();
console.log("Refresh completed");
}, 2000);
}
});
```
### audio_player
Creating a comprehensive audio player as a JavaScript plugin involves handling audio playback, user interactions, controls, and audio source management.
```html
// Initialize the audio player plugin
const audioPlayer = new AudioPlayer('audioPlayerContainer', {
source: '/audio_player/sample.mp3' // Replace with the URL to your audio file
});
```
### drawer
ofc. for make a drawer
```html
Open Drawer
Drawer Content
This is the content of the drawer.
const drawer = new Drawer('drawer', 'openDrawerButton');
```
### bottom_nav
A beautiful and animated bottom navigation. The navigation bar use your current theme, but you are free to customize it.
```html
const bottomNav = new BottomNavigation('bottom-navigation');
```
### toast
Make a toast. a simple message in bottom
```html
const toast = new Toast();
toast.show("This is a toast message", 3000); // Message, duration in milliseconds
```
### click_to_copy
with the "copy" class and using the Clipboard API to copy the text within that element.
```html
Click to copy this text.
Copy me too!
```
### share_button
Make floating button for share the page.
```html
const shareButton = new ShareButtonPlugin();
```
### cookie_consent
JavaScript 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.
```html
const cookiePopup = new CookieConsentPopup("This website uses cookies to improve your experience.");
```