Little changes in json formatter. (#83)

Co-authored-by: Artur Kołecki <koleckiartur@icloud.com>
Reviewed-on: R11/release11-tools-web#83
This commit is contained in:
2023-02-28 14:08:26 +01:00
parent 4d7c0d6acd
commit d6c2c863eb
2 changed files with 20 additions and 9 deletions

View File

@@ -1,29 +1,39 @@
function formatAndValidateJson(errorElement) {
const input = document.querySelector('#jsonBlock');
const errorOutput = document.getElementById(errorElement);
const processInfo = document.getElementById(errorElement);
try {
const start = new Date();
const obj = JSON.parse(input.textContent);
input.innerHTML = JSON.stringify(obj, null, 2);
errorOutput.innerText = "";
processInfo.innerText = "";
hljs.highlightElement(input);
const end = new Date();
processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
} catch (error) {
errorOutput.innerText = error;
processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
console.error("Error: ", error)
}
}
function minimizeJson(errorElement) {
const input = document.querySelector('#jsonBlock');
const errorOutput = document.getElementById(errorElement);
const processInfo = document.getElementById(errorElement);
try {
const start = new Date();
const obj = JSON.parse(input.textContent);
input.innerHTML = JSON.stringify(obj);
errorOutput.innerText = "";
processInfo.innerText = "";
hljs.highlightElement(input);
const end = new Date();
processInfo.innerHTML = "<b style='color: black'>Validation and formatting time:</b> <span style='color: green'>" + (end.getMilliseconds() - start.getMilliseconds()) + "ms</span>";
} catch (error) {
errorOutput.innerText = error;
processInfo.innerHTML = "<b style='color: red'>" + error + "</b>";
console.error("Error: ", error)
}
}

View File

@@ -11,6 +11,7 @@
<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>
@@ -21,7 +22,7 @@
<h1>Online JSON Formatter</h1>
</div>
<p style="color: red" id="error"></p>
<p style="margin-bottom: -30px" id="processInfo"></p>
<pre>
<code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
@@ -29,11 +30,11 @@
<button style="margin-top: 20px"
class="max-width block-label action-button active"
onclick="formatAndValidateJson('error')"
onclick="formatAndValidateJson('processInfo')"
>Prettify JSON</button>
<button class="max-width block-label action-button active"
onclick="minimizeJson('error')"
onclick="minimizeJson('processInfo')"
>Minimize JSON</button>
</div>
</div>