jamaljs character counter

index.html

<div id="app"></div>

jamaljs-character-counter.markdown

jamaljs character counter

A Pen by Akın Özgen on CodePen.

License.

script.js

/**
 * 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();

scripts

<script src="https://unpkg.com/jamal@latest/build/src.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />