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', 
    badgeJson = 'http://teamtreehouse.com/' + username + '.json', 
    badges = $('#badges'),
    fragment = [],
    count = 0;

    // Pull in the elements from YQL using jQuery
    $.getJSON(badgeJson, 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.badges;

        $.each(resultArr, function(i, val) {
            fragment += '<li><a href="' + val.url + '" target="_blank"><img src="' + val.icon_url + '" alt="' + val.name + '" title="' + val.name + '"/></a></li>';
            count++;
        });
        badges.append( fragment );
        $('#title h3').prepend( count + ' ' );
    });
});