Try to fix textarea

tasks/guestBook/components/newComment.php

@@ -1,3 +1,30 @@
+<style>
+  #comment {
+    resize: none;
+    overflow: hidden;
+  }
+
+  #comment-count {
+    right: 3px;
+    bottom: 0;
+  }
+
+  @supports selector(:has(html)) {
+    .was-validated .position-relative:has(:invalid)~.invalid-feedback {
+      display: block;
+    }
+
+    .was-validated :invalid~.invalid-feedback {
+      display: none !important;
+    }
+  }
+
+  @supports not selector(:has(html)) {
+    .was-validated :invalid~#comment-count {
+      display: none;
+    }
+  }
+</style>
 <form action="comment.php" method="post" class="needs-validation row m-0" novalidate>
   <div class="col">
     <h4 class="mb-3">Leave a Comment!</h4>
@@ -15,8 +42,11 @@
     </div>
     <div class="mb-3">
       <div class="position-relative">
-        <textarea class="form-control" id="comment" name="comment" rows="3" maxlength="250" required placeholder="Comment here"></textarea>
-        <small class="text-muted position-absolute" id="comment-count" style="right: 20px; bottom: 0;">
+        <textarea class="form-control" id="comment" name="comment" maxlength="250" required placeholder="Comment here"></textarea>
+        <div class="invalid-feedback">
+          Please enter text.
+        </div>
+        <small class="text-muted position-absolute" id="comment-count">
           0/250
         </small>
       </div>

tasks/guestBook/textarea.js

@@ -1,10 +1,10 @@
 "use strict";
 
 document.addEventListener("DOMContentLoaded", () => {
-  const handler = (event) => {
-    console.log(event.target);
-    const length = event.target.value.length;
-    const maxLength = event.target.maxLength;
+  const handlerCounter = (event) => {
+    const comment = event.target;
+    const length = comment.value.length;
+    const maxLength = comment.maxLength;
     const counter = document.getElementById("comment-count");
 
     counter.innerText = `${length}/${maxLength}`;
@@ -18,10 +18,26 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   };
 
-  const addValidation = () => {
-    const textarea = document.getElementById("comment");
+  const handlerSize = () => {
+    const scroll = window.scrollY;
+    const comment = document.getElementById("comment");
+    const counter = document.getElementById("comment-count");
+    const commentHeight = comment.clientHeight;
+    const counterHeight = counter.clientHeight;
 
-    textarea.addEventListener("keyup", handler);
+    if (commentHeight + 0.5 * counterHeight < comment.scrollHeight) {
+      comment.style.height = `${comment.scrollHeight + counterHeight}px`;
+    }
+  };
+
+  const addValidation = () => {
+    const comment = document.getElementById("comment");
+    const counter = document.getElementById("comment-count");
+    comment.style.height = `${comment.scrollHeight + counter.style.height}px`;
+
+    comment.addEventListener("input", handlerCounter);
+    comment.addEventListener("input", handlerSize);
+    window.addEventListener("resize", handlerSize);
   };
 
   addValidation();