JSFiddle - React, Tailwind, and code Playground

by jakelauer

HTML

A: <input id="a"/><br/><br/>
B: <input id="b"/><br/><br/>
C: <input id="c"/><br/><br/>
D: <input id="d"/><br/><br/>
E: <input id="e"/><br/><br/>
F: <input id="f"/><br/><br/>
G: <input id="g"/><br/><br/>

Answer:<br/>
<div class="finalString"></div>

JavaScript

var answerLetters = [
    ["b", 10],
    ["a", 4],
    ["c", 4],
    ["d", 22],
    ["e", 27],
    ["f", 17],
    ["b", 10],
    ["d", 15],
    ["d", 8],
    ["g", 3],
    ["d", 29],
    ["e", 19],
    ["a", 5],
    ["c", 13],
    ["e", 6],
    ["e", 34],
    ["g", 4],
    ["b", 12],
    ["f", 24],
    ["g", 8],
    ["d", 5],
    ["b", 4],
    ["d", 25],
    ["e", 16],
    ["c", 8],
    ["a", 3],
    ["e", 13],
    ["f", 6],
    ["c", 7],
    ["d", 41],
    ["f", 1],
    ["d", 19],
    ["b", 15],
    ["d", 31],
    ["a", 8],
    ["g", 5],
    ["e", 4],
];

$('input').on('keyup', function() {
    figureStrings();
});

var figureStrings = function() {
    var useLettersOnly = true;

    var theAnswer = "";

    var alLength = answerLetters.length;
    for (var i = 0; i < alLength; i++) {
        var letterArray = answerLetters[i];
        var theLetter = letterArray[0];
        var theIndex = letterArray[1];

        var stringToTest = $('#' + theLetter).val();
        if ($.trim(stringToTest) == "") {
            theAnswer += "_ ";
            continue;
        }
        if (useLettersOnly) {
            stringToTest = stringToTest.replace(/[^a-zA-Z0-9-]/g, '');
        }
        if (stringToTest.length + 1 > theIndex) {
            var letterFound = stringToTest[theIndex - 1];
            theAnswer += " " + letterFound;
        }
        else
        {
            theAnswer += "_ ";
        }
        theAnswer
    }
    $('.finalString').text(theAnswer);
};