From 0625502d3249140e205be17c818ed39354e00f7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20Ko=C5=82ecki?= <koleckiartur@icloud.com>
Date: Mon, 27 Feb 2023 12:05:44 +0100
Subject: [PATCH] Final commit.

---
 Frontend/tools/jsonFormatter.html | 46 ++++++++++---------------------
 1 file changed, 15 insertions(+), 31 deletions(-)
diff --git a/Frontend/tools/jsonFormatter.html b/Frontend/tools/jsonFormatter.html
index 92bd8cf..24d4e97 100644
--- a/Frontend/tools/jsonFormatter.html
+++ b/Frontend/tools/jsonFormatter.html
@@ -2,18 +2,17 @@
 <html>
 
 <head>
-  <link rel="stylesheet" href="../assets/css/tools/r11form.css">
-  <script src="../assets/scripts/tools/scripts.js"></script>
-  <script src="../assets/scripts/tools/json.js"></script>
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
-  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8" />
+
+  <link rel="stylesheet" href="../assets/css/tools/r11form.css">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+  <script src="../assets/scripts/tools/scripts.js"></script>
+  <script src="../assets/scripts/tools/json.js"></script>
   <script>hljs.highlightAll();</script>
-
 </head>
 
-
 <body onload="init();">
 <div class="container">
   <div id="tool" class="tool rwd-expandable">
@@ -23,30 +22,23 @@
         </h1>
       </div>
 
-      <h4 style="color: red" id="error"></h4>
+      <p style="color: red" id="error"></p>
 
       <pre>
         <code class="hightlight-json jsonBlock" style="height: 600px; width: 1000px;" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
       </pre>
 
-<!--      <label for="jsonArea"><b>Insert your JSON:</b></label>
-      <textarea id="jsonArea"
-                name="jsonArea"
-                rows="15"
-                class="textarea-700 bordered-field vertically-resizeable max-width"></textarea>-->
-
       <button style="margin-top: 20px"
               class="max-width block-label action-button active"
-              onclick="formatAndValidateJson('error')">
-        Prettify JSON
-      </button>
+              onclick="formatAndValidateJson('error')"
+      >Prettify JSON</button>
 
       <button class="max-width block-label action-button active"
-              onclick="minimizeJson('error')">
-        Minimize JSON
-      </button>
+              onclick="minimizeJson('error')"
+      >Minimize JSON</button>
     </div>
   </div>
+
   <div class="tooltip-window rwd-hideable">
     <h2>What is this?</h2>
     <p>This tool has 2 main functions:
@@ -60,20 +52,12 @@
 </div>
 
 <script>
-  const textArea = document.querySelector('#textArea');
-  textArea.addEventListener('input', function() {
-    textArea.innerHTML = hljs.highlight('json', textArea.value).value;
+  const input = document.querySelector('#jsonBlock');
+  input.addEventListener('div > div', function() {
+    hljs.highlightElement(input);
   });
 </script>
 
-<script>
-  function init() {
-    //Handle clicks in whole form and set info in tooltip
-    setDefaultContent(document.getElementById("jsonArea"), 'Insert JSON here');
-    console.log("init")
-  }
-</script>
-
 </body>
 
 </html>
