https://www.nfuonline.com/scripts/textAreaMaxLength.js

1class Count {
2    constructor() {
3        this.textArea = document.querySelector(".count__textarea")
4        this.counter = document.querySelector(".count__counter")
5        /* if maxLength is set in the view, use value else default to 350 characters */
6        this.maxChars = this.textArea.maxLength > 0 ? this.textArea.maxLength : 350
7
8        /* bind(this) is used to make sure that the this keyword inside the method refers to the Count class */
9        window.addEventListener("load", this.countCharacters.bind(this))
10        this.textArea.addEventListener("input", this.countCharacters.bind(this))
11    }
12
13    countCharacters = () => {
14        this.enteredChars = this.textArea.value.length;
15        this.count = this.maxChars - this.enteredChars;
16        this.counter.textContent = (this.count <= 0 ? 0 : this.count) + "/" + this.maxChars;
17
18        /* Stops any overwriting */
19        this.textArea.value = this.textArea.value.substring(0, this.maxChars);
20
21        if ((this.enteredChars / this.maxChars * 100) >= 90) {
22            /* switch to danger at 92% full */
23            this.counter.classList.add('text-danger')
24            this.counter.classList.remove('text-muted')
25            this.counter.classList.remove('text-warning')
26        } else if ((this.enteredChars / this.maxChars * 100) >= 50) {
27            /* switch to warning at 55% full */
28            this.counter.classList.add('text-warning')
29            this.counter.classList.remove('text-muted')
30            this.counter.classList.remove('text-danger')
31        } else {
32            /* default is text-muted */
33            this.counter.classList.add('text-muted')
34            this.counter.classList.remove('text-warning')
35            this.counter.classList.remove('text-danger')
36        }
37    }
38}
39
40new Count() // create a new instance of the Count class