<div id="content_wrapper" class="row">
<div class="form-group col-md-6">
<textarea
class="form-control"
name="comment"
id="comment"
cols="30"
rows="5"
placeholder="Post your comment here"
></textarea>
<span id="minimum_count" class="">Minimum of 150 characters</span>
<span id="text_count" class="pull-right"></span>
<div class="clearfix"></div>
<button
class="btn btn-success form-control col-md-6"
id="submitBtn"
type="Submit"
>
Post Comment
</button>
</div>
</div>
#content_wrapper {
margin: 100px;
}
#submitBtn {
border-radius: 0;
}
#text_count {
float: right;
}
#minimum_count {
color: Red;
}
let total_count = 200;
let text_count_content = $("#text_count").html(
"Text remaining" + " " + total_count
);
$("#comment").keyup(function () {
let length = $("#comment").val().length;
let remaining = total_count - length;
$("#text_count").html("Text remaining" + " " + remaining);
if (length >= 150) {
$("#minimum_count").css("color", "green");
} else {
$("#minimum_count").css("color", "red");
}
});
External CSS
This Pen doesn't use any external CSS resources.