Treehouse Badges

Simple JSON and YQL script to pull in badges from Team Treehouse

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<div id="title"><h3>Badges Earned on TreeHouse</h3></div>
<div id="holder">
    <ul id="badges"></ul>
</div>

CSS

#title{
    text-align: center;
}
ul#badges li {
    width: 50px;
    display: inline-block;
    margin: -9px;
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 500ms;
}

ul#badges li:hover {
    transform:translateY(-20px) translateX(-20px) rotate(10deg) scale(1.5);
    transition-timing-function: ease-out;
    transition-duration: 500ms;
    -webkit-transform:translateY(-20px) translateX(-20px) rotate(10deg) scale(1.5);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 500ms;
    -ms-transform:translateY(-20px) translateX(-20px) rotate(10deg) scale(1.5);
    -ms-transition-timing-function: ease-out;
    -ms-transition-duration: 500ms;
    -moz-transform:translateY(-20px) translateX(-20px) rotate(10deg) scale(1.5);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 500ms;
}

JavaScript

$(document).ready(function() {
    // Setup our query ( username is the identifier for your treehouse profile page i.e. http://teamtreehouse.com/psyne )
    var username = 'psyne', 
    yql = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fteamtreehouse.com%2F' + username + '%22&format=json&diagnostics=false&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=?', 
    badges = $('#badges'),
    fragment = []; 

    // Pull in the elements from YQL using jQuery
    $.getJSON(yql, function(results) {

        // This part can be a bit tricky if you are just learning JSON my suggestion is to use a viewer such as http://jsonviewer.stack.hu/   
        var resultArr = results.query.results.body.div[1].div.div[0].div[1].div.ul.li;

        $.each(resultArr, function(i, val) {
            fragment += '<a href="http://teamtreehouse.com/' + username + '" target="_blank"><li><img src="' + val.img.src + '" alt="' + val.img.alt + '" title="' + val.img.alt + '"/></li></a>';
        });
        badges.append( fragment );
    });
});