| <body> | |
| <div class="header"> | |
| <h2>Social Status Update Example</h2> | |
| <h5>Using jQuery to add posts and remove on click. By Matt Luker </h5> | |
| </div> | |
| <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> | |
| </body> | |
| </html> |
| var main = function() { | |
| $('.btn').click(function() { | |
| var post = $('.status-box').val(); | |
| $("<li>").text(post).prependTo('.posts'); | |
| $('.status-box').val(''); | |
| $('.counter').text('141'); | |
| $('.btn').addClass('disabled'); | |
| }); | |
| $('.status-box').keypress(function(event) { | |
| var post = $('.status-box').val(); | |
| if (event.which === 13) { | |
| event.preventDefault(); | |
| $("<li>").text(post).prependTo('.posts'); | |
| $('.status-box').val('').focus(); | |
| $('.counter').text('140'); | |
| $('.btn').addClass('disabled'); | |
| } | |
| }); | |
| $('ul').on('click', 'li', function() { | |
| $(this).remove(); | |
| }); | |
| $('.status-box').keyup(function() { | |
| var postLength = $(this).val().length; | |
| var charactersLeft = 140 - postLength; | |
| $('.counter').text(charactersLeft); | |
| if (charactersLeft <0) { | |
| $('.btn').addClass('disabled');} else if ( | |
| charactersLeft === 140) { | |
| $('.btn').addClass('disabled');} else { | |
| $('.btn').removeClass('disabled')}; | |
| }); | |
| $('.btn').addClass('disabled'); | |
| }; | |
| $(document).ready(main); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| color: #404040; | |
| background-color: #27ae60; | |
| } | |
| .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; | |
| } | |
| .header { | |
| background-color: #2ecc71; | |
| text-align: center; | |
| padding: 1px; | |
| } |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |