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;font-family:calibri,arial;font-size:12px;}
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;}
.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;}

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-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();
            }
        });
    }

    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) {
                           ...