Building A Timer in Javascript/jQuery

Question

I'm currently working on a website which would work somewhat like this one:

http://www.keyhero.com/free-typing-test/

I'd like to build a timer which starts on the user's first key press, and ends when the user presses 'Enter'. When the timer ends, I'd want to get the resulting time and push it off to the backend (Django for me) where the WPM will be calculated. However, I have no idea how to get started on this, as I have little experience with jQuery and Javascript and haven't been able to find useful pages.

So my question is, how would I do this? I can post some of my Django files if a better picture of what I am asking is needed.

Shouldn't be very hard, something like this -> **http://jsfiddle.net/d8c4z300/** — adeneo, Dec 31 '14 at 21:00
Thanks! How do I actually go about pushing the time to the backend? — Aquarthur, Dec 31 '14 at 21:10

score 1 · Answer 1 · edited May 23 '17 at 12:12

You manage the key events with .keypress() for know when the person click in the keyboard. http://api.jquery.com/keypress/

And for key = "ENTER", you just need to validate if is equal to key 13

$('#id_tag').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    alert("Clicked on enter");
    return false;  
  }
});

I see that post too, that are using keyup(): JQuery Event for user pressing enter in a textbox?

score 1 · Answer 2 · answered Dec 31 '14 at 21:04

Well you're going to have to capture the keypress/keydown/keyup event in a jQuery event, then start a setInterval and have that function increment a counter variable of sorts. Then you just reference that variable whenever you want to see how many seconds have passed. A crude example would be:

window.secondsSinceTyped = 0;

$('#textbox').one('keypress', function (e) {
    window.setInterval(function () {
        window.secondsSinceTyped++;
    }, 1000);
});

Then just reference the variable secondsSinceTyped whenever you want to check the time. Note that I used the jquery one binding which will only bind the event once so that every time you type it doesn't rebind the event.

Building A Timer in Javascript/jQuery

2 Answers2