RectJS Based Text box Word Limit Animation

RectJS Based Text box Word Limit Animation: BY Daniel7 Jan,2021; Tags:
RectJS

Introduction

Today we want to introduce you to a more practical web page text box tool, the text box is characterized by the input of text can be real-time text word limit, not only in the lower right corner to show the number of words remaining, but also in the text box below the color of the progress bar tips. This text box word limit animation is based on RectJS and animate.css animation library, which is very easy to implement after referencing the script library.

RectJS Based Text box Word Limit Animation

Instructions

HTML Body Code

function TextLoader() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, TextLoader);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TextLoader.__proto__ || Object.getPrototypeOf(TextLoader)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      lettersCount: 0,
      inputValue: '',
      countLimit: _this.props.limit,
      loaderCompleted: 0,
      errorLimit: false
    }, _this.handleType = function (e) {
      var val = e.target.value;
      if (val.length <= _this.state.countLimit) {
        _this.setState(function (prev) {
          return {
            lettersCount: val.length,
            inputValue: val,
            errorLimit: false,
            loaderCompleted: Math.floor(val.length / prev.countLimit * 100, 2)
          };
        });
      } else {
        _this.setState(function (prev) {
          return {
            inputValue: prev.inputValue,
            errorLimit: true
          };
        });
      }
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

Css Code

h1 {
  font-size: 27px;
  margin-bottom: 10px;
  color: #272727;
}
.container {
  background: #76daff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: fixed;
}
/* loader Styles started*/
.loader-wrapper {
  display: inline-block;
  margin: 10px;
  width: 550px;
}
.input-wrapper {
  border-width: 5px;
  border-style: solid;
  border-color: #9be4ff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: block;
  position: relative;
}

VIEW NOW