From 54e43f4318930e332f50c07b5bbc77cccf04c354 Mon Sep 17 00:00:00 2001 From: Kilian Hofmann Date: Fri, 10 May 2024 13:26:42 +0200 Subject: [PATCH] Guest Book --- tasks/guestBook/comment.php | 45 +++++++++ tasks/guestBook/data.json | 1 + tasks/guestBook/formValidation.js | 22 +++++ tasks/guestBook/index.php | 146 ++++++++++++++++++++++++++++++ tasks/guestBook/textarea.js | 28 ++++++ 5 files changed, 242 insertions(+) create mode 100644 tasks/guestBook/comment.php create mode 100644 tasks/guestBook/data.json create mode 100644 tasks/guestBook/formValidation.js create mode 100644 tasks/guestBook/index.php create mode 100644 tasks/guestBook/textarea.js diff --git a/tasks/guestBook/comment.php b/tasks/guestBook/comment.php new file mode 100644 index 0000000..53360bc --- /dev/null +++ b/tasks/guestBook/comment.php @@ -0,0 +1,45 @@ + 0) { + Headers::redirect("."); + return; +} + +$string = file_get_contents("data.json") ?? "[]"; +$json = json_decode($string); + +array_push($json, ["time" => $time, "title" => $title, "name" => $name, "comment" => $comment]); + +file_put_contents("data.json", json_encode($json)); + +Headers::redirect("."); diff --git a/tasks/guestBook/data.json b/tasks/guestBook/data.json new file mode 100644 index 0000000..74f1b0f --- /dev/null +++ b/tasks/guestBook/data.json @@ -0,0 +1 @@ +[{"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 diff --git a/tasks/guestBook/formValidation.js b/tasks/guestBook/formValidation.js new file mode 100644 index 0000000..95c9195 --- /dev/null +++ b/tasks/guestBook/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(); +}); diff --git a/tasks/guestBook/index.php b/tasks/guestBook/index.php new file mode 100644 index 0000000..ebde3f3 --- /dev/null +++ b/tasks/guestBook/index.php @@ -0,0 +1,146 @@ + + + + + + + + Guest Book + + + + + + + + + + $maxPage) { + Headers::redirect("./?p=$maxPage"); + return; + } + + $data = array_slice($json, $page * 9, 9); + + Headers::html(); + ?> + +
+ + + + + + + + +
+
+ +
+ + + + + +
+ +
+
+ +
+ +
+
+
+
title ?>
+
name ?>
+
+
+

comment ?>

+
+
+ + time) ?> + +
+
+
+ +
+ + + +
+ +
+
+

Leave a Comment!

+
+ +
+ Please enter a title. +
+
+
+ +
+ Please enter a name. +
+
+
+ + + 0/250 + +
+ Please enter text. +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/tasks/guestBook/textarea.js b/tasks/guestBook/textarea.js new file mode 100644 index 0000000..ecc98c8 --- /dev/null +++ b/tasks/guestBook/textarea.js @@ -0,0 +1,28 @@ +"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(); +});