Simple Word Counter

index.html

<div class="container text-center">
  <h1>Character Restrictor</h1>
<form>
  <textarea name="count" rows="10" placeholder="Write Here" onkKeyDown="textCounter(this.form.count,this.form.countDisplay);" onKeyUp="textCounter(this.form.count,this.form.countDisplay);"></textarea><br>
  <input class="text-center" readonly type="text" name="countDisplay" size="20" value="300"> Characters Remaining
</form>
  </div>

script.js

var max = 300;

function textCounter(x, y) {
  if(x.value.length > max) {
    x.value = x.value.substring(0, max);
  }
  else {
    y.value = max - x.value.length;
  }
}

scripts

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

simple-word-counter.markdown

Simple Word Counter

A Pen by Terron Johnson on CodePen.

License.

style.css

body {
  margin-top: 50px;
  padding-bottom: 50px;
  background: beige;
}
textarea {
  width: 100%;
    padding: 10px;
  font-size: 2em;
  border: solid 8px gray;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />