JSFiddle - React, Tailwind, and code Playground

by Brock Whittaker

HTML

Correct Word:
<input id='actual_input' type='text'></input>
<br />Entered Word:
<input id='user_input' type='text'></input>
<br />
<span></span>

CSS

input {
    width: 250px;
    height: 40px;
    background-color: rgba(20, 20, 20, 0.4);
    border: none;
    outline: none;
    font-family: Helvetica Neue, sans-serif;
    font-weight: 100;
    color: white;
    transition: all 1s ease;
    text-align: center;
    font-size: 16pt;
}
input:hover {
    color: orange;
    background-color: rgba(20, 20, 20, 0.7);
}
body {
    font-family: Helvetica Neue, Sans-Serif;
    font-weight: 100;
    font-size: 24pt;
    text-align: center;
}

JavaScript

function stringMatch(i, a) {
    counter = 0;
    consecutive_counter = 0;
    off_consecutive_counter = 0;
    for (x = 0; x < a.length; x++) {
        if (i.charAt(x) === a.charAt(x)) {
            counter += 10; // reward 10 points for a full match
        } else {
            if (i.charAt(x) === 'c' && a.charAt(x) === 'k' || i.charAt(x) === 'k' && a.charAt(x) === 'c' || i.charAt(x) === 's' && a.charAt(x) === 'c' || i.charAt(x) === 'c' && a.charAt(x) === 's' || i.charAt(x) === 'g' && a.charAt(x) === 'j' || i.charAt(x) === 'j' && a.charAt(x) === 'g' || i.charAt(x) === 's' && a.charAt(x) === 'z' || i.charAt(x) === 'z' && a.charAt(x) === 's') {
                counter += 7; // reward 7 points for a commonly mispelled letter
            } else {
                if (i.charAt(x - 1) === a.charAt(x) || i.charAt(x + 1) === a.charAt(x)) {
                    counter += 6; // reward 5 points for the letter being off one place.
                    // this is important because if they add an additional letter you don't want none of the correct lettters to be placed.
                        // eg. (additionally vs aditionally)
                } else {
                    if (i.charAt(x - 2) === a.charAt(x) || i.charAt(x + 2) === a.charAt(x)) {
                        counter += 2;
                    } else {
                    }
                }
            }
        }
    }
    counter -= Math.abs(a.length - i.length) * 3;
    accuracy_metric = counter / a.length;
}

$("#user_input").on("input", function () {
    user_input = $("#user_input").val();
    actual = $("#actual_input").val();
    stringMatch(user_input, actual);
    if (accuracy_metric > 6) {
        $("span").text("Match!" + " Accuracy: " + accuracy_metric.toPrecision(2));
    } else {
        $("span").text("No match." + " Accuracy: " + accuracy_metric.toPrecision(2));
    }
});