peterekepeter/code-check.html

## code-check.html
<!-- a very basic code quality reporter -->
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            document.addEventListener('DOMContentLoaded', main);

            function escape(line){
                return line
                 .replace(/&/g, "&amp;")
                 .replace(/</g, "&lt;")
                 .replace(/>/g, "&gt;")
                 .replace(/"/g, "&quot;")
                 .replace(/'/g, "&#039;");
            }

            function algorithm(code){

                console.log('input:', code);

                var table=[];

                var blacklist = { ' ':true, '\t':true, '\n':true, '\r':true };

                var code = '\n' + code + '\n';

                for (var i=0; i<code.length; i++){
                    var digram = code.substr(i, 2);
                    if (!blacklist[digram[0]] && !blacklist[digram[1]]){
                        table[digram] = (table[digram] || 0) + 1;
                    }
                }
                var sum = 0;
                var count = 0;
                for (let key in table){
                    sum += table[key];
                    count += 1;
                }
                var avg = sum/count;
                //console.log(avg);

                var outp = [];
                var heat = 0;
                var lastNewline = 0
                for (var i=0; i<code.length; i++){
                    var digram = code.substr(i, 2);
                    var value = table[digram];
                    var char = code[i];
                    if (!blacklist[digram[0]] && !blacklist[digram[1]]){
                        heat += value - avg;
                    }
                    if (char === '\n')
                    {
                        heat/=i-lastNewline;
                        //console.log(heat);
                        let style='ht' + Math.max(0, Math.min(Math.floor(heat),20));
                        var line = code.substr(lastNewline+1, i-lastNewline);
                        outp.push(`<div class="${style}">${escape(line)}</div>`);
                        lastNewline = i;
                        heat = 0;
                    }
                }

                viewContent.innerHTML = `<code>${outp.join('')}</code>`;
            }

            function pasted(event){
                console.log('pasted');
                setTimeout(timeout => {
                    const code = localStorage['lastPasted'] = area.value;
                    algorithm(code);
                    area.value = '';
                }, 100);
            }

            function main(){
                document.body.addEventListener('paste', pasted);
                document.addEventListener('click', () =>{
                    console.log('refocus');
                    area.focus();
                })
                const code = localStorage['lastPasted'] || "Paste some code here!";
                algorithm(code);
            }
        </script>
        <style>
            body{
                font-family: monospace; white-space:pre;
                background: #000;
            }
            html, body{
                min-width: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
            }
            .ht0 { color:#8f8; background:#000 }
            .ht1 { color:#cfc; background:#000 }
            .ht2 { color:#fff; background:#000 }
            .ht3 { color:#ffc; background:#000 }
            .ht4 { color:#ffa; background:#000 }
            .ht5 { color:#fe9; background:#000 }
            .ht6 { color:#bd8; background:#000 }
            .ht7 { color:#cc7; background:#000 }
            .ht8 { color:#db6; background:#000 }
            .ht9 { color:#ea5; background:#000 }
            .ht10{ color:#f94; background:#100 }
            .ht11{ color:#f83; background:#100 }
            .ht12{ color:#f72; background:#200 }
            .ht13{ color:#f61; background:#210 }
            .ht14{ color:#f50; background:#310 }
            .ht15{ color:#f40; background:#310 }
            .ht16{ color:#f30; background:#410 }
            .ht17{ color:#f20; background:#420 }
            .ht18{ color:#f10; background:#520 }
            .ht19{ color:#f08; background:#520 }
            .ht20{ color:#f0f; background:#630 }
            textarea{ position: absolute; left:-400px; }
        </style>
    </head>
    <body>
        <div id="viewContent"></div>
        <textarea id="area"></textarea>
    </body>
</html>
	<!-- a very basic code quality reporter -->
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<script>
	document.addEventListener('DOMContentLoaded', main);

	function escape(line){
	return line
	.replace(/&/g, "&")
	.replace(/</g, "<")
	.replace(/>/g, ">")
	.replace(/"/g, """)
	.replace(/'/g, "'");
	}

	function algorithm(code){

	console.log('input:', code);

	var table=[];

	var blacklist = { ' ':true, '\t':true, '\n':true, '\r':true };

	var code = '\n' + code + '\n';

	for (var i=0; i<code.length; i++){
	var digram = code.substr(i, 2);
	if (!blacklist[digram[0]] && !blacklist[digram[1]]){
	table[digram] = (table[digram] \|\| 0) + 1;
	}
	}
	var sum = 0;
	var count = 0;
	for (let key in table){
	sum += table[key];
	count += 1;
	}
	var avg = sum/count;
	//console.log(avg);

	var outp = [];
	var heat = 0;
	var lastNewline = 0
	for (var i=0; i<code.length; i++){
	var digram = code.substr(i, 2);
	var value = table[digram];
	var char = code[i];
	if (!blacklist[digram[0]] && !blacklist[digram[1]]){
	heat += value - avg;
	}
	if (char === '\n')
	{
	heat/=i-lastNewline;
	//console.log(heat);
	let style='ht' + Math.max(0, Math.min(Math.floor(heat),20));
	var line = code.substr(lastNewline+1, i-lastNewline);
	outp.push(`<div class="${style}">${escape(line)}</div>`);
	lastNewline = i;
	heat = 0;
	}
	}

	viewContent.innerHTML = `<code>${outp.join('')}</code>`;
	}

	function pasted(event){
	console.log('pasted');
	setTimeout(timeout => {
	const code = localStorage['lastPasted'] = area.value;
	algorithm(code);
	area.value = '';
	}, 100);
	}

	function main(){
	document.body.addEventListener('paste', pasted);
	document.addEventListener('click', () =>{
	console.log('refocus');
	area.focus();
	})
	const code = localStorage['lastPasted'] \|\| "Paste some code here!";
	algorithm(code);
	}
	</script>
	<style>
	body{
	font-family: monospace; white-space:pre;
	background: #000;
	}
	html, body{
	min-width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	}
	.ht0 { color:#8f8; background:#000 }
	.ht1 { color:#cfc; background:#000 }
	.ht2 { color:#fff; background:#000 }
	.ht3 { color:#ffc; background:#000 }
	.ht4 { color:#ffa; background:#000 }
	.ht5 { color:#fe9; background:#000 }
	.ht6 { color:#bd8; background:#000 }
	.ht7 { color:#cc7; background:#000 }
	.ht8 { color:#db6; background:#000 }
	.ht9 { color:#ea5; background:#000 }
	.ht10{ color:#f94; background:#100 }
	.ht11{ color:#f83; background:#100 }
	.ht12{ color:#f72; background:#200 }
	.ht13{ color:#f61; background:#210 }
	.ht14{ color:#f50; background:#310 }
	.ht15{ color:#f40; background:#310 }
	.ht16{ color:#f30; background:#410 }
	.ht17{ color:#f20; background:#420 }
	.ht18{ color:#f10; background:#520 }
	.ht19{ color:#f08; background:#520 }
	.ht20{ color:#f0f; background:#630 }
	textarea{ position: absolute; left:-400px; }
	</style>
	</head>
	<body>
	<div id="viewContent"></div>
	<textarea id="area"></textarea>
	</body>
	</html>