bran921007 · January 2, 2015 03:05
diff --git a/gistfile1.txt b/gistfile1.txt
 <!doctype html>
 <html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <style>
              html,body {
              font-family: 'Roboto', sans-serif;
              color: #404040;
              background-color: #eee;
            }

            .container {
              width: 520px;
              margin-top: 20px;
            }

            .button-group {
              margin-bottom: 20px;
            }

            .counter {
              display: inline;
              margin-top: 0;
              margin-bottom: 0;
              margin-right: 10px;
            }

            .posts {
              clear: both;
              list-style: none;
              padding-left: 0;
              width: 100%;
            }

            .posts li {
              background-color: #fff;
              border: 1px solid #d8d8d8;
              padding-top: 10px;
              padding-left: 20px;
              padding-right: 20px;
              padding-bottom: 10px;
              margin-bottom: 10px;
              word-wrap: break-word;
              min-height: 42px;
            }
    </style>
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
        </div>
      </form>
      <div class="button-group pull-right">
        <p class="counter">140</p>
        <a href="#" class="btn btn-primary">Post</a>
      </div>
    
      <ul class="posts">
      </ul>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      var main = function(){
    \$('.btn').click(function(){
        var post = \$('.status-box').val();
        \$('<li>').text(post).prependTo('.posts');
        \$('.status-box').val('');
        \$('.counter').text(140);
        \$('.btn').addClass('disabled');
    });
    \$('.status-box').keyup(function(){
        var postLength = \$(this).val().length;
        var characterLeft =  140 - postLength;
        \$('.counter').text(characterLeft);
        
        if(characterLeft <0){
        \$('.btn').addClass('disabled');
        }
        else if(characterLeft == 140){
        \$('.btn').addClass('disabled');
        }    
        else{
         \$('.btn').removeClass('disabled');    
        }
        });
        
        \$('.btn').addClass('disabled');
 }


 \$(document).ready(main);

    </script>
    
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
	<style>
	html,body {
	font-family: 'Roboto', sans-serif;
	color: #404040;
	background-color: #eee;
	}

	.container {
	width: 520px;
	margin-top: 20px;
	}

	.button-group {
	margin-bottom: 20px;
	}

	.counter {
	display: inline;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 10px;
	}

	.posts {
	clear: both;
	list-style: none;
	padding-left: 0;
	width: 100%;
	}

	.posts li {
	background-color: #fff;
	border: 1px solid #d8d8d8;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	word-wrap: break-word;
	min-height: 42px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<form>
	<div class="form-group">
	<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
	</div>
	</form>
	<div class="button-group pull-right">
	<p class="counter">140</p>
	<a href="#" class="btn btn-primary">Post</a>
	</div>

	<ul class="posts">
	</ul>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	var main = function(){
	\$('.btn').click(function(){
	var post = \$('.status-box').val();
	\$('<li>').text(post).prependTo('.posts');
	\$('.status-box').val('');
	\$('.counter').text(140);
	\$('.btn').addClass('disabled');
	});
	\$('.status-box').keyup(function(){
	var postLength = \$(this).val().length;
	var characterLeft = 140 - postLength;
	\$('.counter').text(characterLeft);

	if(characterLeft <0){
	\$('.btn').addClass('disabled');
	}
	else if(characterLeft == 140){
	\$('.btn').addClass('disabled');
	}
	else{
	\$('.btn').removeClass('disabled');
	}
	});

	\$('.btn').addClass('disabled');
	}


	\$(document).ready(main);

	</script>

	</body>
	</html>