Skip to content

Instantly share code, notes, and snippets.

@DavidGoussev

DavidGoussev/status_update.js

Created December 6, 2015 05:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save DavidGoussev/f507cf302a0e0599c3d2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save DavidGoussev/f507cf302a0e0599c3d2 to your computer and use it in GitHub Desktop.
Download ZIP
status_update jquery
Raw
status_update.js
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 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);
@DavidGoussev
Copy link
Copy Markdown
Author

DavidGoussev commented Dec 6, 2015

index.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'>
    <link href="style.css" rel="stylesheet">
  </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 src="app.js"></script>

  </body>
</html>

@DavidGoussev
Copy link
Copy Markdown
Author

DavidGoussev commented Dec 6, 2015

style.css

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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment