"use strict";

document.addEventListener("DOMContentLoaded", () => {
  const handler = (event) => {
    console.log(event.target);
    const length = event.target.value.length;
    const maxLength = event.target.maxLength;
    const counter = document.getElementById("comment-count");

    counter.innerText = `${length}/${maxLength}`;

    if (length > maxLength - 50) {
      counter.classList.remove("text-muted");
      counter.classList.add("text-danger");
    } else {
      counter.classList.remove("text-danger");
      counter.classList.add("text-muted");
    }
  };

  const addValidation = () => {
    const textarea = document.getElementById("comment");

    textarea.addEventListener("keyup", handler);
  };

  addValidation();
});