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
This commit is contained in:
		
							
								
								
									
										53
									
								
								Frontend/tools/jsonFormatter.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										53
									
								
								Frontend/tools/jsonFormatter.html
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,53 @@ | ||||
| <!DOCTYPE html> | ||||
| <html> | ||||
|  | ||||
| <head> | ||||
|   <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="../assets/css/json.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> | ||||
| </head> | ||||
|  | ||||
| <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> | ||||
|     </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> | ||||
| </body> | ||||
| </html> | ||||
		Reference in New Issue
	
	Block a user