JSFiddle - React, Tailwind, and code Playground

by Michael Lajlev

HTML

<label for="myInput">Write something here:</label>
<input type="text" id="myInput" maxlength="20" /> 
<span id="counter_number" class="counter">20</span> Remaining chars

JavaScript

$('myInput').addEvent('keyup', function() {
max_chars = 20;
/* get the current value of the input field */
current_value = $('myInput').value;
/* get current value lenght */
current_length = current_value.length;
/* calculate remaining chars */
remaining_chars = max_chars-current_length;
$('counter_number').innerHTML = remaining_chars;
});