Textarea Progress

tasks/guestBook/components/comment.php

@@ -1,7 +1,7 @@
 <div class="col">
   <div class="card h-100">
     <div class="card-header">
-      <h5 class="card-title"><?= $comment->title ?></h5>
+      <h5 class="card-title text-truncate"><?= $comment->title ?></h5>
       <h6 class="card-subtitle mb-2 text-muted"><?= $comment->name ?></h6>
     </div>
     <div class="card-body">

tasks/guestBook/components/newComment.php

@@ -1,30 +1,3 @@
-<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>
@@ -40,20 +13,15 @@
         Please enter a name.
       </div>
     </div>
-    <div class="mb-3">
+    <div class="mb-1">
-      <div class="position-relative">
+      <textarea class="form-control" id="comment" name="comment" maxlength="250" required placeholder="Comment here"></textarea>
-        <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>
       <div class="invalid-feedback">
         Please enter text.
       </div>
     </div>
-    <button class="btn btn-primary mb-3">Comment</button>
+    <div class="progress mb-3">
+      <div class="progress-bar" id="comment-count" style="width: 0;"></div>
+    </div>
+    <button type="submit" class="btn btn-primary mb-3">Comment</button>
   </div>
 </form>

tasks/guestBook/data.json

@@ -1 +1,93 @@
-[{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715337098,"title":"The first","name":"Kilian","comment":"The first comment on here."},{"time":1715338181,"title":"","name":"asd","comment":"sad"},{"time":1715338381,"title":"sdf","name":"dsaf","comment":"dsg"},{"time":1715339761,"title":"Witzige Aufgabe","name":"Kilian","comment":"nun ja, also das funktioniert ja schon recht gut gell."}]
+[
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  {
+    "time": 1715337098,
+    "title": "The first",
+    "name": "Kilian",
+    "comment": "The first comment on here."
+  },
+  { "time": 1715338381, "title": "sdf", "name": "dsaf", "comment": "dsg" },
+  {
+    "time": 1715339761,
+    "title": "Witzige Aufgabe",
+    "name": "Kilian",
+    "comment": "nun ja, also das funktioniert ja schon recht gut gell."
+  },
+  {
+    "time": 1716539658,
+    "title": "Progress Bar",
+    "name": "Kilian",
+    "comment": "Jetzt auch mit einem etwas geileren Progress Bar der einem die Character-Anzahl anzeigt.\r\nWesentlich geiler, wesentlich nicer, und Bootstraped"
+  }
+]

tasks/guestBook/index.php

@@ -23,7 +23,7 @@
   $_SESSION["error"] = [];
 
   $string = file_get_contents("data.json") ?? "[]";
-  $json = json_decode($string);
+  $json = array_reverse(json_decode($string));
 
   if (isset($_GET["p"]) && !is_numeric($_GET["p"])) {
     Headers::redirect(".");

tasks/guestBook/textarea.js

@@ -7,37 +7,28 @@ document.addEventListener("DOMContentLoaded", () => {
     const maxLength = comment.maxLength;
     const counter = document.getElementById("comment-count");
 
-    counter.innerText = `${length}/${maxLength}`;
+    if (length >= 50) {
-
+      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.innerText = "";
-      counter.classList.add("text-muted");
     }
-  };
+    counter.style.width = `${(length / maxLength) * 100}%`;
 
-  const handlerSize = () => {
+    if (length === maxLength) {
-    const scroll = window.scrollY;
+      counter.classList.remove("bg-warning");
-    const comment = document.getElementById("comment");
+      counter.classList.add("bg-danger");
-    const counter = document.getElementById("comment-count");
+    } else if (length > maxLength - 50) {
-    const commentHeight = comment.clientHeight;
+      counter.classList.remove("bg-danger");
-    const counterHeight = counter.clientHeight;
+      counter.classList.add("bg-warning");
-
+    } else {
-    if (commentHeight + 0.5 * counterHeight < comment.scrollHeight) {
+      counter.classList.remove("bg-warning");
-      comment.style.height = `${comment.scrollHeight + counterHeight}px`;
+      counter.classList.remove("bg-danger");
     }
   };
 
   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();