JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<div class="container"></div>

JavaScript

$(document).ready(function(){
    var classes = ['red', 'blue', 'green', 'orange', 'purple'];
    //console.log(classes);
    
    // double the array
    var length = classes.length;
    for(var i = 0; i < length; i++) {
        classes.push(classes[i]);
    }
    
   var html = '';
    //console.log(classes);
    
    // looping through again, pick one out at random and then throw it away so it can't be used twice
    length = classes.length;
    
    for(var i=0; i< length; i++) {
        
        var index = Math.floor(Math.random() * classes.length)
        var card = classes[index];
        //classes.slice(index);
        classes.splice(index, 1);
        console.log(classes);
        console.log(card);
        html += '<div class="card ' + card + '"></div>';
    }
    
    console.log(html);
    $('.container').html(html);
});