Learn html, css, javascript online and how to make a webpage design

Make a beauty JSON tool only by Javascript + HTML + CSS

Thursday 4th of February 2021 05:47:11 PMJavascriptHTMLCSSBeauty json

Today we will learn how to create a tool to convert JSON data into a more readable and structured way. We just use javascript, html and css.

Step 1

Create a frame for the user to paste in the JSON string and a frame to display the data after it has been beautified

<div id="app">
    <div class="box">
        <div class="title">Make a beauty JSON tool only by Javascript + HTML + CSS</div>
        <div class="note">
            <textarea id="jsonstring" placeholder="Paste JSON string here"></textarea>
        </div>
        <h3>Result beauty JSON</h3>
        <div id="result"></div>
    </div>
</div>

 

Step 2

Create 2 beauty buttons and retry delete then listen to the event click on the 2 buttons above

<button onclick="beautyJSON()">Beaury JSON String</button>
<button onclick="cleardata()">Clear</button>

 

function beautyJSON(){
        try {
            let jsonstring = document.getElementById('jsonstring').value;
            let data = JSON.parse(jsonstring);
            let pre = document.createElement('pre');
            let code = document.createElement('code');
            code.innerHTML = syntaxHighlight(JSON.stringify(data, undefined, 4));
            pre.appendChild(code);
            let result = document.getElementById('result');
            result.innerHTML = '';
            result.appendChild(pre);
        }
        catch(err) {
            alert("Your JSON string is not valid a JSON !");
        }
    }
    
    function syntaxHighlight(json) {
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

    function cleardata(){
        document.getElementById('jsonstring').value = '';
        let result = document.getElementById('result');
            result.innerHTML = '';
    }

 

Step 3

The font color css format for the .key, .boolean, .string, .null data types

body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #433262;min-width: 600px;font-family: Arial, Helvetica, sans-serif;margin:0px;}
.box{width: 600px;padding:20px;background: #fff;border-radius: 20px;}
.box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
.box #result{position: relative;}
.box textarea{width:100%;height:200px;padding:10px;border:1px solid #ccc;outline:none;box-sizing: border-box;}
.box code{line-height:22px;}
.box .key{color:#986801;}
.box .boolean{color:blue;}
.box .string{color:#50a14f;}
.box .number{color:#f44336;}
.box .null{color:#ccc;}
.box button{margin-right:10px;}

 

The entire source code is as below:

<!DOCTYPE html>
<html>
<head>
    <title>Make a beauty JSON tool only by Javascript + HTML + CSS - HtmlcssDownload.com</title>
    <style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #433262;min-width: 600px;font-family: Arial, Helvetica, sans-serif;margin:0px;}
        .box{width: 600px;padding:20px;background: #fff;border-radius: 20px;}
        .box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .box #result{position: relative;}
        .box textarea{width:100%;height:200px;padding:10px;border:1px solid #ccc;outline:none;box-sizing: border-box;}
        .box code{line-height:22px;}
        .box .key{color:#986801;}
        .box .boolean{color:blue;}
        .box .string{color:#50a14f;}
        .box .number{color:#f44336;}
        .box .null{color:#ccc;}
        .box button{margin-right:10px;}
    </style>
</head>
<body>
<div id="app">
    <div class="box">
        <div class="title">Make a beauty JSON tool only by Javascript + HTML + CSS</div>
        <div class="note">
            <textarea id="jsonstring" placeholder="Paste JSON string here"></textarea>
        </div>
        <button onclick="beautyJSON()">Beaury JSON String</button><button onclick="cleardata()">Clear</button>
        <h3>Result beauty JSON</h3>
        <div id="result"></div>
    </div>
</div>
   
<script type="text/javascript">
    function beautyJSON(){
        try {
            let jsonstring = document.getElementById('jsonstring').value;
            let data = JSON.parse(jsonstring);
            let pre = document.createElement('pre');
            let code = document.createElement('code');
            code.innerHTML = syntaxHighlight(JSON.stringify(data, undefined, 4));
            pre.appendChild(code);
            let result = document.getElementById('result');
            result.innerHTML = '';
            result.appendChild(pre);
        }
        catch(err) {
            alert("Your JSON string is not valid a JSON !");
        }
    }
    
    function syntaxHighlight(json) {
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

    function cleardata(){
        document.getElementById('jsonstring').value = '';
        let result = document.getElementById('result');
            result.innerHTML = '';
    }
</script>
    
</body>
</html>

 

Result for example

 

 

We are Recommending you: