A question from a Rookie to all the JavaScript Marvels out there

So here are the basics. The following bit of code refers to a reaction game where the user clicks on a randomly appearing object as they show up in the browser it then out puts the time it took them to click on it.

function appearAfterDelay() {
        setTimeout(makeShapeAppear, Math.random() * 2000);

    }

    appearAfterDelay();

        document.getElementById("shape").onclick = function() {
            document.getElementById("shape").style.display = "none";

            var end = new Date().getTime();

            var timeTaken = (end - start) /1000;

            document.getElementById("timeTaken").innerHTML = timeTaken + "s";

            appearAfterDelay();
    }

(and if any of you know of shorter or cleaner way to write code that you see me posting here or in future posts please let me know, since I am new I'd like to know if what I'm doing is clean and readable or not, and if there is a faster way to do it, then I'm all for it)

Back to the Main topic though.
I've been looking around to find code that will allow me to capture their fastest time (in a time limit of, lets say 2 minutes for the user to try their luck) and then store it in a side bar as a record allowing them to enter in their name along side, once the timer ends, and also (lets say it holds the top ten records) to compare it to those ten and if it beats one or more of them to then position it correctly and get rid of the record that would then move to the eleventh spot.

So if you have ideas on this or know of a place where I can read up about this please let me know or am I just trying to do something that isn't possible? Because in the the places I know to look I haven't come across anything that I can see that would help (although that's probably because I just don't know what exactly one would call such pieces of code any way)

Any hints,tips and ideas would be much appreciated. Thanks.

Comments

[Yaphi Berhanu]

Nice work so far! The reason it's tough to find code to do what's asked is that there are a lot of pieces rolled into one.

Here's a breakdown of the pieces:

• Hold a list of high scores (use an array, possibly with objects if you want to have a name and a score for each)

var highScores = [
    {name: 'alice', score: 9001},
    {name: 'bob', score: 9000},
    {name: 'corey', score: 200}
];

• Enter name (get value of html input tag when submit button is clicked)

• Put the latest score in, sort the array, and remove the bottom item (this can be optimized, but start with whatever method works for you)

• If you want to keep track of the scores in the user's browser after they leave the page, use window.localStorage

I hope this helps!

I recommend starting with Max's explanation before this one though.

[Glen McLean]

Thanks a million. yes I have started reading up on what Max said and the links he gave me to go check out and trying to put it together. That's what I was wanting realy didn't mean to imply that I was wanting the actual code for it because then I wouldn't learn much, just needed to know realy what the heck I should look for, thanks for that last point I'll definitely go read up about window.localstorage, did not think about that at all.

[Yaphi Berhanu]

Glad it was helpful!

[Glen McLean]

Thanks for the site link, I'll go do some reading there now.