JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<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" id="btnPost"><div class= "glyphicon glyphicon-pencil" ></div></a></div>
</div>
<ul class="posts"></ul>
</div>
CSS
html, body {
font-family: courier, sans-serif;
color: #404040;
background-color: #eee;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
padding: 5px;
}
.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;
}
li > i {
float: right;
}
JavaScript
var main = function () {
//btnPost
$('#btnPost').click(function () {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts').append($('<i class="glyphicon glyphicon-trash btnDelete"></i>'));
$('.status-box').val('');
$('.counter').text('140');
$('#btnPost').addClass('disabled');
});
$('.status-box').keyup(function () {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if (charactersLeft < 0) {
$('#btnPost').addClass('disabled');
} else if (charactersLeft == 140) {
$('#btnPost').addClass('disabled');
} else {
$('#btnPost').removeClass('disabled');
}
});
$('#btnPost').addClass('disabled');
//btnDelete
$('body').on('click', '.btnDelete', function () {
$(this).closest('li').remove();
});
}
$(document).ready(main);