JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<div class="wrapper">
    <div id="noty" class="hide"></div>
    <input type="file" id="file" />
    <div id="result"></div>
</div>

CSS

* {
    margin:0;
    padding:0;
    border:0;
}
th, td {
    padding:3px;
}
#noty, html, body {
    width:100%;
}
html, body {
    height:100%;
}
body {
    background-color:#EEE;
}
table {
    width:70%;
    table-layout:fixed;
}
th {
    text-align:left;
}
tr {
    background-color:#B1D7D9;
}
tr:nth-of-type(even) {
    background-color:#FFF;
}
#noty {
    position:fixed;
    font-weight:bold;
    cursor:pointer;
    color:#FFF;
    top:0;
    z-index:105;
}
background-color: #029EC5;
 .padding-20 {
    padding:20px;
}
.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;
}

JavaScript

$(document).ready(function () {
    $("#file").change(function (e) {
        var th = this;
        $("#result").html("");
        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) {
                    calculate(e.target.result);
                };
                reader.readAsText(e.target.files.item(0));
            }
        }
    });

    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-20'>" + 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();
            }
        });
    }

    function calculate(response) {
        var all_lines = response.split(/\r\n|\n/),
            alen, i, txt = "",
            ary = [
                []
            ];
        alen = 0;
        i = 1;
        alen = all_lines.length;
        for (i; i < alen; i++) {
            var data = all_lines[i].split(","),
                len = data.length,
                j = 0;
            for (j; j < len; j++) {
                if (j === 0) {
                    if (data[j]) {
                        if (ary[j].indexOf(data[j]) < 0) {
                           ...