From 2c947a0dfad879094c5365a9557a5f31d1e1df66 Mon Sep 17 00:00:00 2001 From: Kilian Hofmann Date: Fri, 24 May 2024 10:59:55 +0200 Subject: [PATCH] Textarea Progress --- tasks/guestBook/components/comment.php | 2 +- tasks/guestBook/components/newComment.php | 44 ++--------- tasks/guestBook/data.json | 94 ++++++++++++++++++++++- tasks/guestBook/index.php | 2 +- tasks/guestBook/textarea.js | 35 ++++----- 5 files changed, 114 insertions(+), 63 deletions(-) diff --git a/tasks/guestBook/components/comment.php b/tasks/guestBook/components/comment.php index 8a4c6e7..7b1748f 100644 --- a/tasks/guestBook/components/comment.php +++ b/tasks/guestBook/components/comment.php @@ -1,7 +1,7 @@
-
title ?>
+
title ?>
name ?>
diff --git a/tasks/guestBook/components/newComment.php b/tasks/guestBook/components/newComment.php index b5da39d..d5c87bf 100644 --- a/tasks/guestBook/components/newComment.php +++ b/tasks/guestBook/components/newComment.php @@ -1,30 +1,3 @@ -

Leave a Comment!

@@ -40,20 +13,15 @@ Please enter a name.
-
-
- -
- Please enter text. -
- - 0/250 - -
+
+
Please enter text.
- +
+
+
+
\ No newline at end of file diff --git a/tasks/guestBook/data.json b/tasks/guestBook/data.json index 74f1b0f..cb47af9 100644 --- a/tasks/guestBook/data.json +++ b/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."}] \ No newline at end of file +[ + { + "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" + } +] diff --git a/tasks/guestBook/index.php b/tasks/guestBook/index.php index 28f8906..9b90e7a 100644 --- a/tasks/guestBook/index.php +++ b/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("."); diff --git a/tasks/guestBook/textarea.js b/tasks/guestBook/textarea.js index ee6a606..36b59ce 100644 --- a/tasks/guestBook/textarea.js +++ b/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 > maxLength - 50) { - counter.classList.remove("text-muted"); - counter.classList.add("text-danger"); + if (length >= 50) { + counter.innerText = `${length}/${maxLength}`; } else { - counter.classList.remove("text-danger"); - counter.classList.add("text-muted"); + counter.innerText = ""; } - }; + counter.style.width = `${(length / maxLength) * 100}%`; - 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; - - if (commentHeight + 0.5 * counterHeight < comment.scrollHeight) { - comment.style.height = `${comment.scrollHeight + counterHeight}px`; + 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"); - 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();