JSFiddle - React, Tailwind, and code Playground

by Daniel Brose

HTML

<div id='output'>output</div>

JavaScript

// Stackoverflow example for http://stackoverflow.com/questions/33769657/frequency-images-start-in-the-center-of-table-homework-javascript#33769756

function generateTable(input) {
    var frequency = new Array(26);
    var letters = new Array(26);
    var freqPos = 0;
    var newInput = input.toUpperCase();
    var max = 0;
    var myHeight = 0;
    var test = 9000;
    // var image = new Image();
    // image.src = "https://placehold.it/350x150"; //"orange.gif";
    for (i = 65; i < 91; i++) {
        //looks at how many times each character occurs and stores its value
        frequency[freqPos] = newInput.split(String.fromCharCode(i)).length -
            1;
        freqPos++;
    }
    //checks which letter occured the most
    for (i = 0; i < frequency.length - 1; i++) {
        if (frequency[i] > max) {
            max = frequency[i];
        }
    }

    table = input + "<table border='1'>";
    //first row 
    table += "<tr>";
    table += "<td>Letter Frequency 100px</td>";
    for (i = 0; i < frequency.length; i++) {
        //somehow have to use myHeight to change the height of the image that I make here. 
        myHeight = (frequency[i] / max) * 100;
        myHeight = parseInt(myHeight, 10);
        //console.log(i + ": " + myHeight + "<br \>");
        table += '<td height = "100" width = "8"><img src = "https://placehold.it/350x150" id = "orange" alt = "25" height = "'+myHeight+'" width = "8"></td>';
    }
    table += "</tr>";
    //second row
    table += "<tr>";
    table += "<td></td>";
    for (i = 65; i < 91; i++) {
        table += "<td>" + String.fromCharCode(i) + "</td>";
    }
    table += "</tr>";
    table += "</table>";
    return table;
}

document.getElementById('output').innerHTML = generateTable('aaaabbc');