Typing-tutor basic

by Ashish Mishra

HTML

<div data-key='125' ></div>
<div id='res'></div>
<div id='dynm' ></div>

CSS

.keyeater{
    width:50px; height:50px;background:red;
   position:absolute;
    text-align:center; font-size:30px;
        border-radius:50%;
}
body{
    overflow:hidden;
    
}
#dynm{
    
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

JavaScript

$(document).keypress(function(e){
    str = String.fromCharCode(e.which);
 
//alert(str.charCodeAt(0) +" : "+str+'<br>');
    $('a').each(function(elm,i){
    
        if(e.which==$(this).attr('key')){
        $(this).remove();
    }
    
    });
    
    
});



setInterval(function(){
    keyarr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmonpqrstuvwxyz1234567890-=[]{};':\"\\|/?><.,!@#$%^&*()_+`~";
    keyarr = keyarr.split("");
    key = Math.round(Math.random()*keyarr.length)
    key = keyarr[key];
   var lft = Math.round(Math.random()*$('#dynm').width());
  var t = lft
  if(lft > $('#dynm').width()-50){ lft=lft-50 }
    $('#res').text(lft + " : "+t);
        if(key){
    var keyeater = $('<a/>',{'class':'keyeater','key':key.charCodeAt(0)});
            keyeater.text(key).css({'left':lft,'top':$(window).height()+60}).animate({top:-50},5000);
    $('#dynm').append(keyeater);
        }
    try{
$('a').each(function(elm,i){
    
        if($(this).position().top<-45){
        $(this).remove();
    }
    
    });
    }
    catch(e){
}   
},1000);