Material Design Textfield Counter

index.html

<header>
  <h1>Material Design Textfield Counter</h1>
</header>

<div id="wrapper">
  <input type="text" id="textField" name="input" placeholder="Type here..."/>
  <label for="input" id="counter">0/55</label>
</div> 

Material Design Textfield Counter.markdown

Material Design Textfield Counter

Forked from Frederik Jensen-Petersen's Pen Material Design Textfield Counter.

A Pen by Grace on CodePen.

License.

script.js

$(document).ready(function() {
  var input = $("#textField");
  var label = $("#wrapper label");
  var maxVal = 55;
  
  input.keyup(function() {
    var inputLength = input.val().length;
    var counter = $("#counter");
    
    $("#counter").html("");
    $("#counter").html(inputLength + "/55");
    
    if ( inputLength >= maxVal ) {
      label.css("background-color", "#F3493D");
      label.css("color", "#F3493D");
    } else {
      label.css("background-color", "#2A9AF2");
      label.css("color", "#999");
    }
  });
}); 

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300);
$roboto: 'Roboto', sans-serif;

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

header {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  
  background-color: #2A9AF2;
  
  h1 {
    display: block;
    position: relative;
    top: 20px;
    left: 0;
    margin: 0;
    padding: 0.5em;
    
    color: #fff;
    font-family: $roboto;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.5;
  }
  
  @media only screen and (max-width : 480px) {
    padding: 10px;
    
    h1 {
      top: 13px;
      font-size: 1.4em;
    }
  }
}

#wrapper {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 20em;
 
  #textField {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;
    outline: none;
    
    color: #000;
    font-family: $roboto;
    font-size: 16px;
    font-weight: 400;
    
    border: none;
  }
  
  label {
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    
    color: #999;
    font-family: $roboto;
    text-align: right;
    
    background-color: #2A9AF2;
  }
}