JSFiddle - React, Tailwind, and code Playground

by Parag Bhayani

HTML

<div id="info"></div>
<div class="text">
    <br/>
    Enter JSON information that you get from other pages in this field to show breakup...
    <br/>
    Type below code in console of other browser and copy text and paste that text in the field
    <br/>
    <pre>	JSON.stringify(performance.timing);</pre>
    <br/>
</div>
<textarea id="jsoninfo"></textarea >
<input type="button" id="submit" value="Submit"></input>

CSS

td{
    padding:0px 10px;
}
thead {
    height:20px;
    color: teal;
    font-size: large;
    font-weight: bold;
}
.text {
    color: teal;
    font-size: large;
    font-weight: bold;
}
.time {
    text-align:right;
}

JavaScript

// JS Code
function sortObject(obj) {
    var arr = [];
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            arr.push({
                'key': prop,
                'value': obj[prop]
            });
        }
    }
    arr.sort(function(a, b) { return a.value - b.value; });
    return arr;
}

function showPerformance(object){
    var timing;
    if(!object) {
        timing = performance.timing;
    } else {
        timing = object;
    }
    var objectKeys = ["connectStart", "connectEnd", "domainLookupStart", "domainLookupEnd", "fetchStart", "redirectStart", "redirectEnd", "requestStart", "responseStart", "domLoading", "unloadEventStart", "unloadEventEnd", "responseEnd", "domInteractive", "domContentLoadedEventStart", "domContentLoadedEventEnd", "domComplete", "loadEventStart", "loadEventEnd"];
    
    var objectInfo = {
        'connectStart':			'Time just before server connection begins.',
        'connectEnd':			'Time when server connection is finished.',
        'domainLookupStart':	'Time just before domain name lookup.',
        'domainLookupEnd':		'Time after domain name lookup.',
        'fetchStart':			'Time when the resource starts being fetched.',
        'redirectStart':		'Time of fetch that initiated a redirect.',
        'redirectEnd':			'Time after last redirect response ends.',
        'requestStart':			'Time just before a server request.',
        'responseStart':		'Time just before the start of a response.',
        'domLoading':			'Time just before readiness set to loading.',
        'unloadEventStart':		'Time just before the unload event is fired.',
        'unloadEventEnd':		'Time after the previous document is unloaded.',
        'responseEnd':			'Time after the end of a response or connection.',
        'domInteractive':		'Time just before readiness set to interactive.',
        'domContentLoadedEventStart':	'Time just before DOMContentLoaded starts.',
        'domContentLoadedEventEnd':		'Time after...