Ex. 17 JS charcount

index.html

<div class="contact_form col-md-5 col-lg-5">
        <form class="form-inline">
          <div class="form-group">
            <label for="name">First Name</label>
            <input type="text" maxlength="12" id="name" title="Enter your first name into the textbox" placeholder="Enter name here" class="form-control">     
          </div>
          <div class="form-group">
            <label for="phone">Phone Number</label>
            <input type="tel" maxlength="14" id="phone" title="Enter phone number" placeholder="Enter 10 digit phone #" class="form-control">
          </div>
        </form>
        <form>
          <div class="form-group">
            <label for="useremail">*Email</label>
            <input type="email" minlength="7" id="useremail" title="Enter your complete email address; check for correct spelling!" placeholder="Enter your email address" class="form-control" required="required">  
          </div>
          <div class="form-group">
            <label for="usermessage">*Your Message</label>
            <textarea minlength="25" id="usermessage" title="Leave a brief, but detailed message" placeholder="Your message here" class="textbox" required="required" style="resize:none" cols="65" rows="5"></textarea>
            <p id="char-count"></p>
            <p id="visible-comment"></p> 
            <button id="submit" type="submit" class="btn btn-default">Submit</button>
          </div> 
        </form>
      </div>

scripts.js

$(document).ready(function(){
  //all my code goes here
  $("#usermessage").css("background-color", "silver");
  $("#usermessage").on("keyup", function(){
    console.log("keyup works");
    var charCount = $("#usermessage").val().length;
      console.log(charCount);
  $("#char-count").html(charCount);
    if (charCount > 50) { $("#char-count").css("color", "red");
    } else {$("#char-count").css("color", "white")};
    });  
  $("#submit").on("click", function() {
  	console.log("clicked")
  	var comment = $("#usermessage").val();
  	  comment = comment.toUpperCase();
  	  console.log(comment)
  	  $("#visible-comment").html(comment);
      return false;
  });
}) //closed doc read. no code below here