JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<div id="status"></div>

<h1>Chart 1: Demolition &amp; Structural Changes</h1>

<div class="tableHeader">
    <div>Item</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<div id="table1" class="table">
    <div class="columnLabel">
        <div>Kitchen access</div>
        <div>Flooring removal</div>
        <div>Wall removal</div>
        <div>Ceiling removal</div>
        <div>Wall changes</div>
        <div>New windows</div>
        <div>New exterior doors</div>
        <div>New interior doors</div>
        <div>New ceilings</div>
    </div>
    <div class="column">
        <div class="cell">Direct; less than 3 ft. above grade</div>
        <div class="cell">Flooring to remain</div>
        <div class="cell">All walls to remain </div>
        <div class="cell">Ceiling to remain</div>
        <div class="cell">No changes</div>
        <div class="cell">None; or 1 new aluminum slider, mill finish</div>
        <div class="cell">No new doors</div>
        <div class="cell">None; or 1 paint-grade hollow-core prehung</div>
        <div class="cell">None; or an 8-ft. flat drywall ceiling</div>
    </div>
    <div class="column">
        <div class="cell">Direct; one story above grade</div>
        <div class="cell">Remove sheet vinyl or linoleum</div>
        <div class="cell">1–2 partition walls</div>
        <div class="cell">Remove 8-ft. to 9-ft. drywall ceiling</div>
        <div class="cell">1 opening in interior partition wall</div>
        <div class="cell">1–2 new aluminum or economy-grade white vinyl </div>
        <div class="cell">1 site-finished wood or metal; or aluminum slider, mill finish</div>
        <div class="cell">1 stain-grade, hollow-core prehung</div>
        <div class="cell">9-ft. flat drywall with soffit above cabinets</div>
    </div>
    <div class="column">
        <div class="cell">Indirect; less than 3 ft. above grade</div>
        <div class="cell">Remove tile on mortar bed</div>
     ...

CSS

body {
    font-family: arial;
    margin-top: 90px;
}
h1 {
    clear: both;
}

.column, .columnLabel {
    float:left;
}
.selectedCell {
    background-color:yellow;
}

.column div, .columnLabel div {
    border:1px solid #ccc;
    padding:4px;
    width:155px;
    height:60px;
    text-align:left;
    cursor:pointer;
    font-size: 11px;
    vertical-align: middle !;
}

.tall {
    height: 90px;
}

.columnLabel div, .tableHeader div:first-child {
    width:100px;
    font-weight: bold;
    font-size: 12px;
}

.tableHeader, .table {
    float: left;
}

.tableHeader {
    background: -webkit-linear-gradient(left, #FFF2F4 0%,#AA2947 100%); 
}

.tableHeader div {
    text-align: center;
    font-size: 18px;
    height: 20px;
    float: left;
    width: 155px;
    height: 20px;
    border: 1px solid #333;
    padding: 4px;
}

.tableHeader div:first-child {
    font-size: 12px;
}

#status {
    background-color: rgba(255, 210, 74, .75);
    padding:10px;
    border:1px solid #666;
    position: fixed;
    top: 0px;
    left:  0px;
    width: 1000px;
}    

.tall {
    height: 100px !important;
}

JavaScript

$(document).ready(function(){
    
        var column1 = 0;
        var column2 = 0;
        var column3 = 0;
        var column4 = 0;
        var column5 = 0;
        
        var totalSelected = 0;
        var totalScore = 0;
        var average = 0;
    
        function update_counts(){
            $('#status').html('');
            var _parent = '';
            var i = 0;
            var selected_map = '';
            $('.column').each(function(){
                if($(this).parent().attr('id') != _parent)
                {
                    _parent = $(this).parent().attr('id');
                    i = 0;
                }
                var selected_count = $(this).find('.selectedCell').length;
                
                //$('#status').append(selected_count + ' selected cells in ' + _parent + '-> column ' + (i + 1) + '<br />');
                i++;
                $('#' + _parent).data('col' + i, selected_count);
            }); 
            
            // Example, lets see how many are selected in #table one, column 4
            //alert($('#table1').data('col4'));
            column1 = $('#table1').data('col1') + $('#table2').data('col1') + $('#table3').data('col1');
            column2 = $('#table1').data('col2') + $('#table2').data('col2') + $('#table3').data('col2');
            column3 = $('#table1').data('col3') + $('#table2').data('col3') + $('#table3').data('col3');
            column4 = $('#table1').data('col4') + $('#table2').data('col4') + $('#table3').data('col4');
            column5 = $('#table1').data('col5') + $('#table2').data('col5') + $('#table3').data('col5');
            
            
            totalSelected = column1 + column2 + column3 + column4 + column5;
            
            totalScore = (1*column1) + (2*column2) + (3*column3) + (4*column4) + (5*column5);
            
            var average = 0;
            if (totalSelected > 0){
             average = totalScore/totalSelected;
             }
             average...