diff --git a/index.html b/index.html
index 5e7f7f4..a0d55d9 100755
--- a/index.html
+++ b/index.html
@@ -159,7 +159,8 @@ <h1>Textarea <span style="font-weight: normal;">awesomeness</span></h1>
         <div class="row-fluid">
           <div class="span6 offset3">
             <div class="form-group">
-              <textarea id="countTextarea" placeholder="Start typing.." rows="4"></textarea>
+              <textarea id="countTextarea" placeholder="Start typing.." rows="4" maxlength="100"></textarea>
+              <p class="pull-right" style="color: rgb(248, 248, 248); margin-right: -20px;"><span id="characterCounter"></span> characters remaining</p>
             </div>
           </div>
         </div>
diff --git a/js/demo.js b/js/demo.js
index bfad77a..09734d6 100644
--- a/js/demo.js
+++ b/js/demo.js
@@ -137,13 +137,18 @@ document.getElementById("saveButton").onclick = function() {
 }
 
 var textareaCount = document.getElementById("countTextarea");
-textareaCount.onkeyup = function() {
-  //console.log(this.value.length);
+var characterCounter = document.getElementById("characterCounter");
+
+function countCharacters() {
   var prgjs = progressJs("#countTextarea").setOptions({ theme: 'blackRadiusInputs' }).start();
+  
+  var length = textareaCount.value.length;
+  var maxLength = textareaCount.getAttribute("maxlength");
+  var progress = length / maxLength * 100;
+  
+  prgjs.set(progress);
+  characterCounter.textContent = maxLength - length;
+}
 
-  if (this.value.length <= 100) {
-    prgjs.set(this.value.length);
-  } else {
-    this.value = this.value.substring(0 ,100);
-  }
-};
\ No newline at end of file
+textareaCount.onkeypress = textareaCount.onkeyup = countCharacters;
+countCharacters();
\ No newline at end of file