https://github.com/milesbarr/html-enhancements
A lightweight JavaScript library that provides progressive enhancements for HTML.
https://github.com/milesbarr/html-enhancements
html html5 javascript javascript-vanilla progressive-enhancement vanilla-javascript
Last synced: 10 months ago
JSON representation
A lightweight JavaScript library that provides progressive enhancements for HTML.
- Host: GitHub
- URL: https://github.com/milesbarr/html-enhancements
- Owner: milesbarr
- License: mit
- Created: 2025-03-08T17:28:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-08T17:32:29.000Z (about 1 year ago)
- Last Synced: 2025-03-08T18:26:47.267Z (about 1 year ago)
- Topics: html, html5, javascript, javascript-vanilla, progressive-enhancement, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML Enhancements
A lightweight JavaScript library that provides progressive enhancements for HTML
forms and user interactions. This library adds functionality while maintaining
zero dependencies and graceful degradation.
## Setup
Include the required files:
```html
```
## Usage
### Form Confirmations
Add confirmation dialogs to form submissions using the `data-confirm` or
`data-formconfirm` attributes.
```html
```
### Unsaved Changes Warning
Warn users about unsaved form changes with the `data-warn-unsaved` attribute.
```html
```
### Share Buttons
Add share buttons with the `data-share` attribute.
```html
Share
```
### Copy Buttons
Add copy buttons with the `data-copy` attribute.
```html
Copy
```
### File Upload Previews
Preview images for file inputs using the `data-preview-for` attribute.
```html
![]()
```
### Character Counter
Show the remaining character count for controls with the
`data-chars-remaining-for` attribute.
```html
```
### Auto-resizable Textareas
Automatically resize textareas based on their content using the
`data-auto-resize` attribute.
```html
```
### Smooth Scrolling
Enable smooth scrolling for anchor links (links starting with #) automatically.
```html
Go to section
Content
```
### Invalid Inputs
Automatically set the `aria-invalid` attribute to `false` when an input changes.
```html
```
### Drag-and-Drop File Uploads
Add drag-and-drop file uploads with the `data-drop-zone` attribute.
```html
```
### AJAX
Allow for form submissions and link navigation with AJAX using the
`data-ajax-replace` attribute.
```html
```
## Graceful Degradation
All features are implemented as progressive enhancements, meaning the basic
functionality will work even if JavaScript is disabled.
## License
This project is licensed under the [MIT License](LICENSE).