JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div id="output"></div>

JavaScript

window.clothes = JSON.parse('{ "shirts": { "red": { "items": [ "Red Flannel", "That Other Red Flannel" ], "matches": { "pants": [ "navy", "khaki" ], "sweaters": [ "navy", "grey" ], "ties": [ "all" ] } } }, "pants": { "khaki": { "items": [ "Light Khaki", "Dark Khaki" ], "matches": { "sweaters": [ "navy", "grey" ], "shoes": [ "brown" ], "ties": [ "all" ] } }, "navy": { "items": [ "Navy Khaki" ], "matches": { "sweaters": [ "grey" ], "shoes": [ "tan" ], "ties": [ "all" ] } } }, "sweaters": { "navy": { "items": [ "Navy Wool Crewneck" ], "matches": { "ties": [ "all" ] } }, "grey": { "items": [ "Grey V-Neck", "Grey Wool Fair Isle" ], "matches": { "ties": [ "all" ] } } }, "shoes": { "brown": { "items": [ "Brown Desert Boots", "Brown Suede Desert Boots", "Brown Penguins" ] }, "tan": { "items": [ "Tan Desert Boots", "Tan Sperry Topsiders" ] } }, "ties": { "navy": { "items": [ "Anchor Tie" ] }, "striped_navy": { "items": [ "Striped Blue/Navy Tie" ] } } }');

var colors = clothes.shirts;
for (var color in colors) {
    $("#color").append("<option>" + color + "</option>");
}

function randomArrayValue(array) {
    return~~ (Math.random() * array.length);
}

function randomObjectValue(obj) {
    var keys = [];
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            keys.push(prop);
        }
    }
    return keys[randomArrayValue(keys)];
}

function randomClothes(times, color, sweater, tie) {
    $("#output").html("");
    // Variables for everything
    var shirts = clothes.shirts,
        pants = clothes.pants,
        sweaters = clothes.sweaters,
        ties = clothes.ties,
        shoes = clothes.shoes;
    // Run as many times as specified
    for (var x = 0; x < times; x++) {
        var startShirt = (color) ? shirts[color] : startShirt = shirts[randomObjectValue(shirts)];
        shirt_optionsPants = startShirt.matches.pants;
        shirt_optionsSweaters = startShirt.matches.sweaters;
        shirt_optionsTies = startShirt.matches.ties;
       ...