ricardosiri68/index.html

## index.html
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>cuenta teclas</title>
        <script language="javascript" type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <ul id="key_count">
        </ul>
    </body>
</html>

## script.js
var Keyboardpush = function(){
    this.keyCountBlck = document.getElementById('key_count');
    window.addEventListener('keypress', this.pushed.bind(this), false);
};

Keyboardpush.prototype = {
    keys: {},
    total: 0,
    pushed: function(e){
        var charKey = String.fromCharCode(e.charCode);
        if (!this.keys.hasOwnProperty(charKey)) {
            this.keys[charKey] = 1;
        } else {
            this.keys[charKey]++;
        }
        this.total++;
        this.render();
    },
    percent: function(value){
        return (value * 100) / this.total;
    },
    render: function(){
        var list_item, key;
        this.keyCountBlck.innerHTML = '';

        for(key in this.keys) {
            if (this.keys.hasOwnProperty(key)) {
                list_item = document.createElement('li');
                this.keyCountBlck.appendChild(list_item);
                list_item.innerText = key + ' ' + this.percent(this.keys[key]).toFixed(2) + '%';
            }
        }
    }
};


window.addEventListener('load', function(){ var keypush = new Keyboardpush(); }, false);
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>cuenta teclas</title>
	<script language="javascript" type="text/javascript" src="script.js"></script>
	</head>
	<body>
	<ul id="key_count">
	</ul>
	</body>
	</html>
	var Keyboardpush = function(){
	this.keyCountBlck = document.getElementById('key_count');
	window.addEventListener('keypress', this.pushed.bind(this), false);
	};

	Keyboardpush.prototype = {
	keys: {},
	total: 0,
	pushed: function(e){
	var charKey = String.fromCharCode(e.charCode);
	if (!this.keys.hasOwnProperty(charKey)) {
	this.keys[charKey] = 1;
	} else {
	this.keys[charKey]++;
	}
	this.total++;
	this.render();
	},
	percent: function(value){
	return (value * 100) / this.total;
	},
	render: function(){
	var list_item, key;
	this.keyCountBlck.innerHTML = '';

	for(key in this.keys) {
	if (this.keys.hasOwnProperty(key)) {
	list_item = document.createElement('li');
	this.keyCountBlck.appendChild(list_item);
	list_item.innerText = key + ' ' + this.percent(this.keys[key]).toFixed(2) + '%';
	}
	}
	}
	};


	window.addEventListener('load', function(){ var keypush = new Keyboardpush(); }, false);