JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<div class="wrapper">
    	<h1>Cross Tabulation</h1>

    <div id="noty" class="hide"></div>
    <div class="row">
        <label class="inline vmiddle">Upload CSV file</label><!-- 
--><input type="file" id="file" class="inline mleft5" />
    </div>
    <div class="hide row">
        <select id="column"></select>
    </div>
    <div id="contents" class="row"></div>
    <div id="result"></div>
</div>

CSS

*{margin:0;padding:0;border:0;}
th,td{padding:3px;}
table,#noty,html,body{width:100%;}
html,body{height:100%;}
body{background-color:#EEE;font-family:calibri,arial;font-size:12px;}
table{table-layout:fixed;}
th{text-align:left;}
tr{background-color:#B1D7D9;}
tr:nth-of-type(odd){background-color:#FFF;}
#noty{position:fixed;font-weight:bold;cursor:pointer;color:#FFF;top:0;z-index:105;}
.padding-5{padding:5px;}
.tcenter{text-align:center;}
.hide{display:none;}
.error{background-color:#8E1212;}
.info{background-color:#029EC5;}
.success{background-color:#128E35;}
.wrapper{padding:10px;}
.mtop-20{margin-top:20px;}
.row{padding-top:10px;}
.inline{display:inline-block;}
.vmiddle{vertical-align:middle;}
.mleft5{margin-left:5px;}

JavaScript

$(document).ready(function () {
    var response = "";
    page_events();

    function clear() {
        $("#contents,#result").html("");
        $("#column").closest(".row").slideUp();
    }

    function page_events() {
        $("#file").change(function (e) {
            var th = this;
            clear();
            if ($(this).val().split(".").pop().toLowerCase() !== "csv") {
                noty("Please upload a CSV file..!!", "error");
            } else {
                if (e.target.files !== undefined) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        response = e.target.result;
                        if (response) {
                            response = response.trim();
                        }
                        show_table();
                    };
                    reader.readAsText(e.target.files.item(0));
                }
            }
        });
        $("#column").change(function () {
            var column = $(this).val();
            $("#result").html("");
            if (column) {
                calculate(column);
            }
        });
    }

    function noty(msg, type) {
        if (msg) {
            if ($("#noty").is(":visible")) {
                close_noty(function () {
                    show_noty(msg, type);
                });
            } else {
                show_noty(msg, type);
            }
        }
    }

    function show_noty(msg, type) {
        var div = "#noty";
        $(div).html("<div class='tcenter padding-5'>" + msg + "</div>").hide().addClass(type);
        $(div).slideDown();
        setTimeout(function () {
            close_noty();
        }, 40000);
        $(div).click(function () {
            close_noty(0);
        });
    }

    function close_noty(callback) {
        $("#noty").slideUp(function () {
            $(this).removeAttr("class").html("");
            if (callback) {
                callback();
    ...