Skip to content

Instantly share code, notes, and snippets.

@akinozgen akinozgen/index.html
Last active Jan 17, 2019

Embed
What would you like to do?
jamaljs character counter
<div id="app"></div>
/**
* http://jamal.js.org
* Akın Özgen <akinozgen17@outlook.com>
* Latest Version: https://unpkg.com/jamal@latest/build/src.min.js
*/
const _ = Jml;
_.initialize();
const context = _.form(
{ class: 'container', style: 'margin-top: 50px' },
_.div({ class: 'form-group' }, [
_.label({ for: 'about' }, ['About You ', _.small('Maximum 50 characters')]),
_.textarea({
class: 'form-control',
target: '#counter',
id: 'about',
_onInput: function () {
const el = document.querySelector( this.attributes['target'].value );
el.innerText = this.value.length;
if (this.value.length > 50) {
el.style.color = 'red';
el.style.fontWeight = 'bold';
} else {
el.style.color = 'inherit';
el.style.fontWeight = 'inherit';
}
}
}),
_.small(['You entered ', _.span({ id: 'counter' }, '0'), ' characters.'])
])
);
const app = _.create('#app', context);
app.render();
<script src="https://unpkg.com/jamal@latest/build/src.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.