JSFiddle - React, Tailwind, and code Playground

by lucasprus

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<p>Checking availability of: <span id="skus"></span>

</p>
<button id="check-availability">Start</button>
<div class="container" id="main">
    <div id="available" class="container inner">
         <h3>Available</h3>

    </div>
    <div id="unavailable" class="container inner">
         <h3>Unavailable</h3>

    </div>
</div>
<div class="container clear">
    <p>Randomly selected available ID:</p>
    <p id="random-sku"></p>
</div>

CSS

#main {
    background-color: lightblue;
    overflow: hidden;
}
.container {
    border:1px solid #000;
    padding: 20px;
}
.inner {
    float:left;
    width:200px;
    margin-right:20px;
    background-color: #fff;
}
.clear {
    clear:both;
}
#random-sku {
    margin-left: 50%;
    margin-right: 50%;
}

JavaScript

jQuery(function ($) {

    var skus = ["6270002277", "4552982500", "4552981877", "4552982136", "4513108434", "4552982677", "4552662036", "4552982000", "4513106947", "4552980901", "4563073472", "4552982333"];

    var submitted = false;

    // Select 7 at random
    skus = _.sample(skus, 7);

    $("#skus").text(skus);

    $("#check-availability").click(function () {
        if (submitted === true) {
            console.log("Resubmission");
            return;
        }
        var url = "http://staging.me-tail.net/api/3.0/retailer/4/garmentsAvailable?guid=" + skus.toString();
        $.get(url, function (data, status) {
            if (status === "success") {

                submitted = true;

                var availableSkus = data.AvailableSkus;
                var unavailableSkus = _.difference(skus, availableSkus);

                // Available one-off
                (function () {
                    var doc = document.createDocumentFragment();
                    for (var i = 0, l = availableSkus.length; i < l; i += 1) {
                        var el = document.createElement('p');
                        var txt = document.createTextNode(availableSkus[i]);
                        el.appendChild(txt);
                        doc.appendChild(el);
                    }
                    document.getElementById('available').appendChild(doc);
                })();

                // Unavailable one-off
                (function () {
                    var doc = document.createDocumentFragment();
                    for (var i = 0, l = unavailableSkus.length; i < l; i += 1) {
                        var el = document.createElement('p');
                        var txt = document.createTextNode(unavailableSkus[i]);
                        el.appendChild(txt);
                        doc.appendChild(el);
                    }
                    document.getElementById('unavailable').appendChild(doc);
                })();

                // Timeout for...