Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aaronleocooper/html-app
Create interactive web pages with HTML and JavaScript easily!
https://github.com/aaronleocooper/html-app
html javascript library webapp
Last synced: 8 days ago
JSON representation
Create interactive web pages with HTML and JavaScript easily!
- Host: GitHub
- URL: https://github.com/aaronleocooper/html-app
- Owner: AaronLeoCooper
- Created: 2019-01-02T13:49:07.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:13:02.000Z (about 2 years ago)
- Last Synced: 2025-01-20T13:31:59.792Z (about 1 month ago)
- Topics: html, javascript, library, webapp
- Language: JavaScript
- Homepage: https://html-app.com
- Size: 1020 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTMLApp
[](https://www.npmjs.com/package/html-app)
[](https://bundlephobia.com/result?p=html-app)
[](https://david-dm.org/aaronleocooper/html-app)
[](https://circleci.com/gh/AaronLeoCooper/html-app/tree/master)
[](https://www.npmjs.com/package/html-app)Need just a sprinkling of JS to enhance your HTML pages? β¨
Create a HTML page, stick this JavaScript somewhere and off you go. Simple web apps done *simply*.
[Check out the docs!](https://html-app.com).
## Example
Define your view with HTML:
```html
```
Define your app logic with JavaScript:
```js
// app.js
new HTMLApp({
eventHandlers: [
{
id: 'userName',
onChange: function(e, el, app) {
if (!e.target.value) {
app.getEl('userNameError').setText('This field is required!');
el.addClass('has-error');
} else {
app.getEl('userNameError').setText('');
el.removeClass('has-error');
}
}
}
]
});
```Job done! π
## Features
- HTML is your view, JavaScript is your controller/model (the way we used to do web development!)
- Easily react to as many events as required with no drop in performance
- Thin DOM element wrappers provide just the right amount of helper methods for your app logic
- Dependency-free and super small: [less than 2kb gzipped](https://bundlephobia.com/result?p=html-app)
- No build/transpilation/configuration setup neededβ stick it in a HTML page and off you go! π## Installation
The compressed library JavaScript file can downloaded and included in your HTML pages, or
linked to directly via the Unpkg CDN:```html
```
Or alternatively if you're compiling your JS files with a bundler like Parcel or Webpack, it
can be installed via NPM and included as an ES6 import in your JavaScript files:```bash
npm i html-app
``````js
import HTMLApp from 'html-app';
```