<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CodePen</title>
</head>
<body>
<div class="card bg-light">
<div class="card-body text-right">
<textarea class="form-control"></textarea>
<br/>
<span>280</span>
<button class="js-tweet-button btn btn-primary" disabled>Tweet</button>
<button class="js-add-photo-button btn btn-secondary">Add Photo</button>
</div>
</div>
</body>
</html>
$("textarea").on("input", function() {
if ($(".js-add-photo-button").hasClass("is-on")) {
$("span").text(280 - 23 - $(this).val().length);
} else {
$("span").text(280 - $(this).val().length);
}
if ($(this).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() {
if ($(this).hasClass("is-on")) {
$(this)
.removeClass("is-on")
.text("Add Photo");
$("span").text(280 - $("textarea").val().length);
if ($("textarea").val().length === 0) {
$(".js-tweet-button").prop("disabled", true);
}
} else {
$(this)
.addClass("is-on")
.text("✓ Photo Added");
$("span").text(280 - 23 - $("textarea").val().length);
$(".js-tweet-button").prop("disabled", false);
}
});
