letterfrequency.html

<!doctype htmtl>
<textarea style="height:300px;width:300px;">
With an urgent, careful stare
I see panic in those eyes
If I see you lying there
Thinking this was the last time
If you hear a distant sound
And some footsteps by your side
When the world comes crashing down
I will find you if you hide
If you wish it, wish it now
If you wish it, wish it loud
If you want it, say it now
If you want it, say it loud
We all make mistakes
Here's your lifeline
If you want it, I want to
We all make mistakes
Here is a lifeline
If you want it, I want to
There's a field near the dream
I watched it grow with widest eyes
I watched us all reach out and read
For the strength as we touched the sky
If you hear a distant sound
And some footsteps by your side
If you feel like coming round
I will take you for a ride
If you wish it, wish it now
If you wish it, wish it loud
If you want it, say it now
If you want it, say it loud
We all make mistakes
Here's your lifeline
If you want it, I want to
We all make mistakes
Here's your lifeline
If you want it, I want to
If you want I want too
(Yeah oh oh oh oh) If you want I want too
(Yeah oh oh oh oh) If you want I want too
(Yeah oh oh oh oh) If you want I want too
(Yeah oh oh oh oh) If you want I want too
(Yeah oh oh oh oh) If you want I want too
(Yeah oh oh oh oh) If you want I want too
(Yeah oh oh oh oh) If you want I want too
</textarea>
<br>
d 42
l 72
r 70
f 26
g 15
t 103

<br>
<table border="1" cellspacing="2" cellpadding="0" class="bargraph">
	<tr>
<script>
var text = document.getElementsByTagName('textarea')[0].value.split('');

var alphabet = {'a':0,'b':0,'c':0,'d':0,'e':0,'f':0,'g':0,'h':0,'i':0,'j':0,'k':0,'l':0,'m':0,'n':0,'o':0,'p':0,'q':0,'r':0,'s':0,'t':0,'u':0,'v':0,'w':0,'x':0,'y':0,'z':0};
var a = [];

for(var i=0;i<text.length;i++){
  if(text[i]=='\'');
  else if(text[i]=='\'');
  else if(text[i]=='\'');
  if(alphabet[text[i]]!==undefined){
    alphabet[text[i]]++;
  }
}
document.write('<br>');
for(var i in alphabet){
  document.write(i + ' '+alphabet[i] +' ' );
}

</script>
</tr></table>
<script>
function rgb2hsv (r, g, b) {
    let rabs, gabs, babs, rr, gg, bb, h, s, v, diff, diffc, percentRoundFn;
    rabs = r / 255;
    gabs = g / 255;
    babs = b / 255;
    v = Math.max(rabs, gabs, babs),
    diff = v - Math.min(rabs, gabs, babs);
    diffc = c => (v - c) / 6 / diff + 1 / 2;
    percentRoundFn = num => Math.round(num * 100) / 100;
    if (diff == 0) {
        h = s = 0;
    } else {
        s = diff / v;
        rr = diffc(rabs);
        gg = diffc(gabs);
        bb = diffc(babs);

        if (rabs === v) {
            h = bb - gg;
        } else if (gabs === v) {
            h = (1 / 3) + rr - bb;
        } else if (babs === v) {
            h = (2 / 3) + gg - rr;
        }
        if (h < 0) {
            h += 1;
        }else if (h > 1) {
            h -= 1;
        }
    }
    return {
        h: Math.round(h * 360),
        s: percentRoundFn(s * 100),
        v: percentRoundFn(v * 100)
    };
}
function isGreen(r,g,b){
  h = rgb2hsv(r,g,b).h;
  if(h >= 69 && h <= 181){
    return (true);
  }
  return false;
}
function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  var colors = hexToRgb(color);
  if(isGreen(colors.r,colors.g,colors.b)){
    return getRandomColor(); 
  }
  return color;
}
function graph(t){
  t.style.borderCollapse='collapse';
  t=t.rows[0];
  for(var i=0;i<t.children.length;i++){
    t.children[i].style.textAlign = 'center';
    t.children[i].innerHTML = "<div style='display:inline-block;background:"+getRandomColor()+";width:20px;height:"+t.children[i].innerHTML+"px'></div><br>"+t.children[i].innerHTML;
    t.children[i].style.verticalAlign = 'bottom';
  }
}
window.onload = function(){
  var t = document.getElementsByClassName('bargraph');
  for(var i=0;i<t.length;i++)graph(t[i]);
  
}
</script>