JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<div id="header">Testing for English Language Analyzer</div>
<div id="input"><input id="letter" type="text" placeholder="What Letter?"/><input id="go" type="button" value="Go!"/></div>
<div id="output"></div>
<div id="screen"></div>

CSS

#header {
    font-size:20pt;
    font-weight:bold;
}

JavaScript

function sortArray(obj) {
    var tuples = [];
    for (var key in obj) tuples.push([key, obj[key]]);
    tuples.sort(function(a, b) { return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0 });
    return tuples;
}

var input = '';
var string = input.replace(/[^A-Za-z ]/g,"").toLowerCase();
var words = string.split(" ");
$("#screen").html(string);
var letters = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

// Create English Array With Letter Values

E = {}, R = {"aL":{},"bL":{}};

$.each(letters, function(a,b){
    E[b] = {};
    $.each(letters, function(c,d){
        E[b][d] = 0;
    });
});

$.each(words, function(a,word){
    $.each(word, function(b,letter){
        if (b > 0) E[word[b-1]][letter]++;
    });
});

// Create Letter Rankings Array (After + Before)

$.each(letters, function(a,letter){
    R["aL"][letter] = sortArray(E[letter]);
});

console.log('E',E);
console.log('R',R);

$("#go").click(function(){
    var letter = $("#letter").val();
    if (letter.length < 1) return;
    $("#output").empty();
    $("#output").append("After <b>" + letter + "</b><br/>");
    $.each(R["aL"][letter], function(a,b){
        $("#output").append(a+1 + ") <b>" + b[0] + "</b> - " + b[1] + "<br/>");
    });
});