Click Counts

Count the number of clicks

HTML

<div id="jumbo">
     <h1>Mouse Click Tester</h1>

    <p>This page has been designed to count the number of times your mouse has pressed the "Click Me" button. To test if you mouse has a damaged micro switch, IE random double clicking, please do the following.</p>
    <ol>
        <li>Press "Click Me" 10 times.</li>
        <li>If the resulting count is 10, please hit "Reset" and try a few more times to further evaluate the situation, since the error may not be consistent.</li>
        <li>If the final count is above 10, then you definitely have a damaged mouse, but you need to verify.</li>
        <li>To verify please disconnect your mouse and try another mouse, such as a coworkers mouse and attempt the test once again. If after a few tried, the counts are perfect, you can be assured your mouse is the culprit. If the counts are still off, try with a 3rd mouse again. If the counts are still off there may be a deeper issus with your operating system which is out of the scope of this page.</li>
    </ol>
</div>
<div id="boxer">
    <button type="button" class="click">Click Me</button> <span id="counter">0</span>

    <button type="butotn" class="reset">Reset</button>
    <div id="events"></div>
</div>

CSS

#jumbo {
    width:90%;
    margin-top:1em;
    margin-left:5%;
    border:1px solid black;
    padding:4px;
}
#jumbo h1 {
    margin:0;
    text-align:center;
}
#boxer {
    margin-top:1em;
    width:50%;
    margin-left:25%;
    border:1px solid black;
    text-align:center;
}
#events {
    margin-top:4px;
    font-size:10px;
}

JavaScript

$(function () {

    var b = $('#boxer button.click'),
        r = $('#boxer button.reset'),
        c = $('#counter'),
        e = $('#events'),
        count = 0;

    r.on('click', function () {
        e.empty();
        count = 0;
        c.text(count);
    })

    b.on('click', function () {
        count = count + 1;
        $('<div class="event"></div>')
            .text("Mouse Click (" + count + ") @ " + (new Date()).toString())
            .appendTo(e);
        c.text(count);
    });

});