JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<div class="icons"></div>
<div class="response"></div>
<div class="debug"></div>

CSS

.response {
    /* css3 drop shadow */
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    
    /* css3 border radius */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    padding:20px;
    background:#eee;
    /* styling of the dialog box, i have a fixed dimension for this demo */
    width:200px;
    text-align:center;
    
    /* make sure it has the highest z-index */
    position:absolute; 
    bottom:10px;
    right:10px;
    z-index:5000; 
    
    /* hide it by default */
    display:none;
}

html {
    margin: 0;
    padding: 0;
    background: #14395e url(http://www.dezinecss.co.uk/lab/grain-bg.jpg) repeat left top;
}

body {
    margin: 0;
    padding: 15px;
    font-family: "Arial", arial, sans-serif;
    min-width: 800px;
    min-height: 446px;
    background: transparent url(http://www.dezinecss.co.uk/lab/shade.png) repeat-x left top;
}

JavaScript

// Global vars
var siteArray = [];

function showSites() {

    $.each(siteArray, function(index, value) {
        $('.icons').append('<a href="http://' + value + '" title="' + value + '"><img src="http://www.google.com/s2/favicons?domain=' + value + '" alt="' + value + '" /></a>').hide().delay(100).fadeIn();
    });
}

function StoreSite() {
    // Empty Array
    var tmpArray = [];

    // Get the base domain
    var referrerDomain = document.referrer;
    referrerDomain = referrerDomain.replace("http://", "");
    referrerDomain = referrerDomain.replace("https://", "");
    referrerDomain = referrerDomain.split("/");
    referrerDomain = referrerDomain[0];

    if ($.inArray(referrerDomain, siteArray)) {
        // Add the base domain to the array
        tmpArray[0] = referrerDomain;
        siteArray[siteArray.length] = referrerDomain;

        // Store the new site in the JSON-P database
        var siteVar = {
            "site": tmpArray
        };

        $.getJSON('http://jsonpdb.appspot.com/add?iconSites2=' + JSON.stringify(siteVar) + '&jsonp=?', function(data) {
            $(".response").append("Saved").show().fadeOut(3000);

            // Now we can show the sites
            // Show all the favicons
            showSites();
        });
    } else {
        // Site is already in array so just show them all
        showSites();
    }
}

function GetSites() {
    // Retrieve all the sites stored up in the public database
    $.getJSON('http://jsonpdb.appspot.com/get?iconSites2=*&jsonp=?', function(data) {
        // Run through all results
        $.each(data, function(index, value) {
            if ($.inArray(value.site.toString(), siteArray) && value.site.toString()!="") {
                siteArray[siteArray.length] = value.site.toString();
            }
        });
        // Store this site referral
        StoreSite();
    });
}






// Get the JSON value sort it out
GetSites();