Created json formatter and validator. (#82)

Co-authored-by: mikolaj widla <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Co-authored-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Artur Kołecki <koleckiartur@icloud.com>
Reviewed-on: R11/release11-tools-web#82

Frontend/assets/css/json.css

@@ -0,0 +1,4 @@
+.json-block {
+  height: 600px;
+  width: 100%;
+}

Frontend/assets/scripts/tools/json.js

@@ -0,0 +1,29 @@
+function formatAndValidateJson(errorElement) {
+  const input = document.querySelector('#jsonBlock');
+  const errorOutput = document.getElementById(errorElement);
+
+  try {
+    const obj = JSON.parse(input.textContent);
+    input.innerHTML = JSON.stringify(obj, null, 2);
+    errorOutput.innerText = "";
+    hljs.highlightElement(input);
+  } catch (error) {
+    errorOutput.innerText = error;
+    console.error("Error: ", error)
+  }
+}
+
+function minimizeJson(errorElement) {
+  const input = document.querySelector('#jsonBlock');
+  const errorOutput = document.getElementById(errorElement);
+
+  try {
+    const obj = JSON.parse(input.textContent);
+    input.innerHTML = JSON.stringify(obj);
+    errorOutput.innerText = "";
+    hljs.highlightElement(input);
+  } catch (error) {
+    errorOutput.innerText = error;
+    console.error("Error: ", error)
+  }
+}

Frontend/assets/scripts/tools/scripts.js

@@ -43,6 +43,10 @@ function setDefaultContent(element, text) {
             element.style.color = color_grey;
             element.value = text;
         }
+        if (id == "jsonArea") {
+            element.style.color = color_grey;
+            element.value = text;
+        }
     }
 }