Kaiserhaynes/charcount.html

## charcount.html
<! doc type html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact me</title>
  <!-- jQuery script -->
  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="js/scripts.js"></script>

<!--[if lt IE 9]><script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- stylesheets below here -->
<link rel="stylesheet" href="css/styles.css">

</head>
<body class="background">

  <!-- Navigation -->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand">
          <a href="index.html">David Haynes</a>
        </div>
      </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="contact.html">Contact Me</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="faq.html">F.A.Q</a></li>
            <li><a href="about.html">About Me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

    <!-- Content -->
<div class="container-fluid" id="contact">
  <div class="contact-header">
    <h1>David Haynes</h1>
    <p>Contact Me</p>
  </div>
  <div class="container-fluid">
    <div class="row" id="contact-form">
      <div class="col-md-7 col-md-5">
        <div class="text_transbox">
          <p class="contact-text">I am here to help you with your web project from beginning to completion. If you would like to get in contact with me to start a project that would best suit your needs. Do not hesitate to send me an email:</p>
          <a href="mailto:donovan@donovanclarke.com"><span class="glyphicon glyphicon-envelope" data-toggle="tooltip" title="Email me"></span></a>
          <p class="contact-text">davidhaynesjoseph@gmail.com</p>
        </div>
      </div>
      <div class="col-md-7 col-md-5">
        <h3>Talk to me!</h3>
        <p id="visible-comment"></p>
        <form>
          <div class="form-group">
            <label for="name">Name*</label>
            <input type="text" class="form-control" id="name" placeholder="Enter name">
          </div>
          <div class="form-group">
            <label for="tel">Telephone number (optional)</label>
            <input type="tel" class="form-control" id="tel" placeholder="Enter phone number (optional)">
          </div>
            <div class="form-group">
              <label for="email">Email address*</label>
              <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
              <div class="form-group">

                <label for="message">Your message below.</label><br>
                <textarea style="resize:none" cols="40" rows="5" placeholder="Your message here" class="message-box" id="message" minlength=5></textarea>
                <p id="visible-comment"></p>
                <p id="char-count"></p>

              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-default" id="button">Submit</button>
              </div>

            </form>

      </div>
    </div>
  </div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap Core JS -->

</body>
</html>

## charcount.js
$(document).ready(function(){
  $(".message-box").css("background-color", "pink");
  $("#button").on("click", function() {
    var comment = $(".message-box").val();
    comment = comment.toUpperCase();
    $("#visible-comment").html(comment);
    console.log(comment);
    var addTooComment = (comment + " !!!!!");
    console.log(addTooComment);

  return false;
      // no code here.
  }); // this closes the function.
  $(".message-box").on("keyup", function() {
    console.log("keyup happened");
    var charCount = $(".message-box").val().length;
    console.log(charCount);
    $("#char-count").html((charCount) + " Characters." );
    if(charCount > 50) {
      $("#char-count").css("color", "red");
    } else {
      $("#char-count").css("color", "black");
    };
   });
}); // here we close the document ready. no more code below here
	<! doc type html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Contact me</title>
	<!-- jQuery script -->
	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script src="js/scripts.js"></script>

	<!--[if lt IE 9]><script src="dist/html5shiv.js"></script>
	<![endif]-->
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<!-- stylesheets below here -->
	<link rel="stylesheet" href="css/styles.css">

	</head>
	<body class="background">

	<!-- Navigation -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle Navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<div class="navbar-brand">
	<a href="index.html">David Haynes</a>
	</div>
	</div>
	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav navbar-right">
	<li><a href="contact.html">Contact Me</a></li>
	<li><a href="portfolio.html">Portfolio</a></li>
	<li><a href="faq.html">F.A.Q</a></li>
	<li><a href="about.html">About Me</a></li>
	</ul>
	</div>
	</div>
	</div>
	</nav>

	<!-- Content -->
	<div class="container-fluid" id="contact">
	<div class="contact-header">
	<h1>David Haynes</h1>
	<p>Contact Me</p>
	</div>
	<div class="container-fluid">
	<div class="row" id="contact-form">
	<div class="col-md-7 col-md-5">
	<div class="text_transbox">
	<p class="contact-text">I am here to help you with your web project from beginning to completion. If you would like to get in contact with me to start a project that would best suit your needs. Do not hesitate to send me an email:</p>
	<a href="mailto:donovan@donovanclarke.com"><span class="glyphicon glyphicon-envelope" data-toggle="tooltip" title="Email me"></span></a>
	<p class="contact-text">davidhaynesjoseph@gmail.com</p>
	</div>
	</div>
	<div class="col-md-7 col-md-5">
	<h3>Talk to me!</h3>
	<p id="visible-comment"></p>
	<form>
	<div class="form-group">
	<label for="name">Name*</label>
	<input type="text" class="form-control" id="name" placeholder="Enter name">
	</div>
	<div class="form-group">
	<label for="tel">Telephone number (optional)</label>
	<input type="tel" class="form-control" id="tel" placeholder="Enter phone number (optional)">
	</div>
	<div class="form-group">
	<label for="email">Email address*</label>
	<input type="email" class="form-control" id="email" placeholder="Enter email">
	</div>
	<div class="form-group">

	<label for="message">Your message below.</label><br>
	<textarea style="resize:none" cols="40" rows="5" placeholder="Your message here" class="message-box" id="message" minlength=5></textarea>
	<p id="visible-comment"></p>
	<p id="char-count"></p>

	</div>
	<div class="form-group">
	<button type="submit" class="btn btn-default" id="button">Submit</button>
	</div>

	</form>

	</div>
	</div>
	</div>
	</div>
	<!-- jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<!-- Bootstrap Core JS -->

	</body>
	</html>
	$(document).ready(function(){
	$(".message-box").css("background-color", "pink");
	$("#button").on("click", function() {
	var comment = $(".message-box").val();
	comment = comment.toUpperCase();
	$("#visible-comment").html(comment);
	console.log(comment);
	var addTooComment = (comment + " !!!!!");
	console.log(addTooComment);

	return false;
	// no code here.
	}); // this closes the function.
	$(".message-box").on("keyup", function() {
	console.log("keyup happened");
	var charCount = $(".message-box").val().length;
	console.log(charCount);
	$("#char-count").html((charCount) + " Characters." );
	if(charCount > 50) {
	$("#char-count").css("color", "red");
	} else {
	$("#char-count").css("color", "black");
	};
	});
	}); // here we close the document ready. no more code below here