R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Clear.

Browse Source
This commit is contained in:
Artur Kolecki
2023-02-28 12:08:57 +01:00
parent 3f229219d6
commit a3c02dd905
1 changed files with 33 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
Frontend/tools/jsonFormatter.html
View File

@@ -11,53 +11,43 @@
<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">
<div class="tool-context">
<div class="headline">
<h1>Online JSON Formatter</h1>
<body>
<div class="container">
<div id="tool" class="tool rwd-expandable">
<div class="tool-context">
<div class="headline">
<h1>Online JSON Formatter</h1>
</div>
<p style="color: red" id="error"></p>
<pre>
<code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
</pre>
<button style="margin-top: 20px"
class="max-width block-label action-button active"
onclick="formatAndValidateJson('error')"
>Prettify JSON</button>
<button class="max-width block-label action-button active"
onclick="minimizeJson('error')"
>Minimize JSON</button>
</div>
<p style="color: red" id="error"></p>
<pre>
<code class="hightlight-json json-block" id="jsonBlock" contenteditable="True">{"enter": "your", "json": "here"}</code>
</pre>
<button style="margin-top: 20px"
class="max-width block-label action-button active"
onclick="formatAndValidateJson('error')"
>Prettify JSON</button>
<button class="max-width block-label action-button active"
onclick="minimizeJson('error')"
>Minimize JSON</button>
</div>
<div class="tooltip-window rwd-hideable">
<h2>What is this?</h2>
<p>This tool has 2 main functions:
<ul>
<li><strong>Prettify JSON</strong> to make it human-readable (add indentation etc.)</li>
<li><strong>Minimize JSON</strong> to make it more compact (exactly opposite to above)</li>
</ul>
</p>
</div>
</div>
<div class="tooltip-window rwd-hideable">
<h2>What is this?</h2>
<p>This tool has 2 main functions:
<ul>
<li><strong>Prettify JSON</strong> to make it human-readable (add indentation etc.)</li>
<li><strong>Minimize JSON</strong> to make it more compact (exactly opposite to above)</li>
</ul>
</p>
</div>
</div>
<script>
const input = document.querySelector('#jsonBlock');
input.addEventListener('div > div', function() {
hljs.highlightElement(input);
});
</script>
</body>
</html>