Textarea character counter

count the characters typed and decrease the number on the counter

by Kurenaikunai

HTML

<div class="wrap">
<textarea onKeyUp="count_it()" id="textarea" name="text"
 maxlength="500"></textarea>
<span id="count" class="counter"></span>
</div>

CSS

.wrap {
    position: relative;
    display: inline-block;
}
.wrap span {
    position: absolute;
    bottom: 5px;
    right: 0px;
    }
.counter{
    background-color: #5dc991;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    line-height: 12px;
    height: 14px;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    font-weight: 400;
}

JavaScript

var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length - this.value.length);
};
/*
#898989 - grey
*/