be-observant (👀)

be-observant is an HTML enhancement that reflects peer elements or the host's properties to data-* attributes. This is useful for styling, among other reasons.

<label>
    a: <input id=a>
</label>
<label>
    b: <input id=b type=checkbox>
</label>
<label>
    c: <input id=c type=number>
</label>
<label>
    d: <input id=d type=date>
</label>
<div be-observant="of #a and #b and #c and #d"></div>

What this does:

sets data-[id] of the adorned element to the value of the input element:

<div data-a=... data-b=... data-c=... data-d=...>

For more compact notation, consider importing an alternative name via the reference 'be-observant/👀.js'. Also, the word and is optional. So this also works:

<label>
    a: <input id=a>
</label>
<label>
    b: <input id=b type=checkbox>
</label>
<label>
    c: <input id=c type=number>
</label>
<label>
    d: <input id=d type=date>
</label>
<div 👀="of #a #b #c and #d"></div>

Viewing Demos Locally

Any web server that can serve static files with server side includes will do, but...

1. Install git.
2. Fork/clone this repo.
3. Install node.js.
4. Install python 3 or later.
5. Open command window to folder where you cloned this repo.

6. npm install

7. npm run serve

8. Open http://localhost:8000/demo/ in a modern browser.

Running Tests

> npm run test

Using from ESM Module:

import 'be-observant/emc.js';

or

import 'be-observant/🔭.js';

Using from CDN:

<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-observant';
</script>