JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<label for="password">password:</label>
<input type="password" id="password">
<div id="out"></div>

CSS

.good { color: green; }
.bad { color: red; }

body {
    font-size: 20px;
    text-align: center;
    padding: 2em 0;
}

JavaScript

pwd1 = prompt("Enter a password to test:");

$(function() {
    var out = $('#out');
    var attempts = [];
    var start = 0;
    
    var updateStats = function() {
        out.empty();
        
        var correct = 0;
        var time = 0;
        
        for (var i = 0; i < attempts.length; i++) {
            var a = attempts[i];
            var d = $('<div />').text(a.text + ': ' + a.time/1000);
            time += a.time/1000;
            if (a.text == pwd1) {
                correct++;
                d.addClass('good');
            } else {
                d.addClass('bad');
            }
            out.append(d);
        }
        
        var n = attempts.length;
        
        out.append('<hr />');
        out.append(
            $('<div />').text(
                n + " tries, average: " + correct*100/attempts.length
                + "% right, " + time/attempts.length + "s on average.")
        );
    };
    
    $('#password').keydown(function(e) {
        if (start == 0) {
            start = (new Date()).getTime();
        }
        if (e.keyCode == 13) {
            attempts.push({
                text: $(this).val(),
                time: (new Date()).getTime() - start
            });
            $(this).val('').focus();
            
            start = 0;
            
            updateStats();
        }
    });
    
    $('#password').focus();
});