New folder structure

tasks/guestBook/js/formValidation.js

@@ -0,0 +1,22 @@
+"use strict";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const handler = (event) => {
+    if (!event.target.checkValidity()) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    event.target.classList.add("was-validated");
+  };
+
+  const addValidation = () => {
+    const forms = document.querySelectorAll(".needs-validation");
+
+    Array.from(forms).forEach((form) => {
+      form.addEventListener("submit", handler, false);
+    });
+  };
+
+  addValidation();
+});

tasks/guestBook/js/textarea.js

@@ -0,0 +1,35 @@
+"use strict";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const handlerCounter = (event) => {
+    const comment = event.target;
+    const length = comment.value.length;
+    const maxLength = comment.maxLength;
+    const counter = document.getElementById("comment-count");
+
+    if (length >= 50) {
+      counter.innerText = `${length}/${maxLength}`;
+    } else {
+      counter.innerText = "";
+    }
+    counter.style.width = `${(length / maxLength) * 100}%`;
+
+    if (length === maxLength) {
+      counter.classList.remove("bg-warning");
+      counter.classList.add("bg-danger");
+    } else if (length > maxLength - 50) {
+      counter.classList.remove("bg-danger");
+      counter.classList.add("bg-warning");
+    } else {
+      counter.classList.remove("bg-warning");
+      counter.classList.remove("bg-danger");
+    }
+  };
+
+  const addValidation = () => {
+    const comment = document.getElementById("comment");
+    comment.addEventListener("input", handlerCounter);
+  };
+
+  addValidation();
+});