JSFiddle - React, Tailwind, and code Playground

by mrcactu5

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://dl.dropbox.com/u/17949100/color-thief.js"></script>
<script src="http://dl.dropbox.com/u/17949100/quantize.js"></script>
<div id="apple"></div>
<div id="color0"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>

CSS

#apple {}
.color {width:25px; height:25px; background-color:#F0F0F0;  float:left;}
#color0 {width:250px; height:25px; background-color:#F0F0F0; }

JavaScript

key = 'MvI8PQOlercBuKfCER0CKyarzA4e8VI2iazTaojO4ciVjSFoQD';

q = 'apples';
url = 'http://api.tumblr.com/v2/tagged?tag=' + q + '&api_key=MvI8PQOlercBuKfCER0CKyarzA4e8VI2iazTaojO4ciVjSFoQD&callback=?';

imgs = Array();
$.getJSON(url, function(data) { 
    for(var i = 0; i < data.response.length; i++){
        if(data.response[i].photos != undefined){
            console.log(data.response[i].photos[0].alt_sizes[0].url);
            imgs.push(data.response[i].photos[0].alt_sizes[0].url);
        }
    /*if(data.response[0].photos != undefined){
        console.log("abcd");
    } else {console.log("no photos");}*/
    }
}).success( function(){nuance(imgs); });

function nuance(imgs){
    console.log(imgs.length + 17);
    
    var image = new Image();
    image.crossOrigin = 'http://urbanext.illinois.edu/fruit/images/apple1.jpg';
    image.src = imgs[0];
    image.width=200;
    
    $('#apple').prepend(image);
    
    myImage = image;
    dominantColor = getDominantColor(myImage);
    paletteArray = createPalette(myImage, 10); // 2nd argument sets # of colors in palette 
    
    $('#color0').css("background-color", "rgb(" + dominantColor[0] + "," + dominantColor[1] + "," +dominantColor[2] + ")");
    for(var k = 0; k < 10; k++){
    $('.color').eq(k).css("background-color", "rgb(" + paletteArray[k][0] + "," +  paletteArray[k][1] + ","+ paletteArray[k][2] + ")");
    }
}