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 -> jsfiddle.net/d8c4z300 — adeneo
– adeneo, Commented Dec 31, 2014 at 21:00
Thanks! How do I actually go about pushing the time to the backend? — Aquarthur
– Aquarthur, Commented Dec 31, 2014 at 21:10

Community · Accepted Answer · 2017-05-23 12:12:49Z

1

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?

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Dec 31, 2014 at 20:57

rafaelasguerra

2,5955 gold badges29 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle Goode · Accepted Answer · 2014-12-31 21:04:35Z

1

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.

answered Dec 31, 2014 at 21:04

Kyle Goode

1,18611 silver badges15 bronze badges

Collectives™ on Stack Overflow

Building A Timer in Javascript/jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related