JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<div class="ws-css-table">
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">A</div>
        <div class="ws-css-table-td">B</div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">C</div>
        <div class="ws-css-table-td">D</div>
    </div>
</div>

    </br>
<div class='show_div_info'>Show info</div>

CSS

.ws-css-table {
    display: table;
}
.ws-css-table-tr {
    display: table-row;
}
.ws-css-table-td {
    display: table-cell;
    border:1px solid #000;
    width: 15px;
    height:15px;
    text-align:center;
    vertical-align:middle;
}

JavaScript

var words = ["dog", "cat","duck"];

var lets = {
  '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
};

 alert (words[2])

function commonlets(){

 var i; var word=""; var s;
 for (let in lets) {
  // var thelet =  lets[let]
// alert (let)
   for (s=0; s <words.length; s++){    
     word = words[s].toUpperCase();
     //alert ("checking for: "+let+" in " + word)
     if (word.indexOf(let) !=  -1) {
        lets[let]++;
        alert ("adding "+ let + " to " + word)
      }

 //    if (!(word.charAt(s) in lets))
 //     lets[word.charAt(s)]  = 1;
  //   else lets[word.charAt(s)] ++;
   
  }
//     lets.push({name: word.charAt(s), val: 1});   
    // lets[word.charAt(s)]++; obj.b == 6;
// }
} 
}
 
commonlets();

for (i=0; i<lets.length; i++)
  alert (lets[i])


//alert (lets['Z'])

//lets.sort(function(a,b){return a[0]-b[0]});
/*
lets.sort(function(a,b) {
    return a.val - b.val;
});
*/



var count = 0
for (x in lets) {
  alert (x + "  "+ lets[x])
    count++;
}

// alert (count)

 $(".show_div_info").click(function(){
  alert($('.ws-css-table')[0].innerHTML);
}); 

//340