https://github.com/milesbarr/html-enhancer
A lightweight JavaScript library that provides progressive enhancements for HTML.
https://github.com/milesbarr/html-enhancer
html html5 javascript javascript-vanilla progressive-enhancement vanilla-javascript
Last synced: about 1 year ago
JSON representation
A lightweight JavaScript library that provides progressive enhancements for HTML.
- Host: GitHub
- URL: https://github.com/milesbarr/html-enhancer
- Owner: milesbarr
- License: mit
- Created: 2025-03-08T17:28:52.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-29T16:21:41.000Z (about 1 year ago)
- Last Synced: 2025-03-29T17:27:00.630Z (about 1 year ago)
- Topics: html, html5, javascript, javascript-vanilla, progressive-enhancement, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML Enhancer
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
```
```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
```
### Invalid Inputs
Automatically set the `aria-invalid` attribute to `false` when an input changes.
```html
```
### AJAX
Allow for form submissions and link navigation with AJAX using
`data-ajax-replace`
```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).