[Practice] Tweet Box Using jQuery

[Practice] Tweet Box Using jQuery.markdown

[Practice] Tweet Box Using jQuery

http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

A Pen by TOBY on CodePen.

License.

index.html

div.well.clearfix
  textarea.form-control
  br
  span 140
  button.js-tweet-button.btn.btn-primary.pull-right(disabled) Tweet
  button.js-add-photo-button.btn.btn-default.pull-right Add Photo

script.js

// ref. http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

$("textarea").on("input", (event) => {
  // Show text count
  if ($(".js-add-photo-button").hasClass("is-on")) {
    $("span").text(140 - 23 - $(event.target).val().length);
  } else {
    $("span").text(140 - $(event.target).val().length);
  }
  
  if ($(event.target).val().length > 0 
      || $(".js-add-photo-button").hasClass("is-on")) {
    $(".js-tweet-button").prop("disabled", false);  
  } else {
    $(".js-tweet-button").prop("disabled", true);  
  }

});

$(".js-add-photo-button").on("click", function(event){
  if ($(event.target).hasClass("is-on")) {
    $(event.target)
      .removeClass("is-on")
      .text("Add Photo");
    
    $("span").text(140 - $("textarea").val().length);
    
    if ($("textarea").val().length === 0) {
      $(".js-tweet-button").prop("disabled", true);
    }
  } else {
    $(event.target)
      .addClass("is-on")
      .text("✔ Photo Added");
    
    $("span").text(140 - 23 - $("textarea").val().length);
    $(".js-tweet-button").prop("disabled", false);
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />