How to display your Team Treehouse badges on your website

Published: Tue 31 July 2018

I'm a big advocate of being a perpetual student. To me, learning something new everyday is what excites me and helps me drag myself out of bed in the morning.

That's why I decided to show off my Team Treehouse badges with pride on my website. Not as a way of bragging about my achievement, but as a way of showing potential clients and employers that I'm not afraid to learn something new and actively seek out the challenge to improve myself and my abilities.

It's at this point I should probably mention what Team Treehouse is, just in case you don't know. Team Treehouse is an online learning platform for those that are looking to learn web / software development. They are not just another online coding platform, however. For starters, it's not free. Which is great. The quality of the content is higher than most (if not all) of the free platforms I've come across, and they take you a little further than most, also. The subscription based service lets you dip in and out of learning as you see fit, but also lets you (and often encourages) you to binge as much content as you can for your monthly fee. They also have an active community willing to help you if you get stuck with any quizzes or coding challenges along the way.

Getting Started

Team Treehouse provides a handy API for students to tap into that has much much more than what badges you have earned. But once you understand how to use it to get your own badges on your website, you'll easily be able to pull all other kinds of data, too. I will be using jQuery to make the AJAX requests to the API.

HTML

First things first, lets get a basic HTML page crated. You'll likely already have one (your website), but for demo purposes heres mine.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Treehouse Badges</title>

    <!-- The style sheet I'll be using later -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Random Header, just because... -->
    <h1>My Treehouse Badges</h1>

    <div id="badges">
        <!-- This is where our badges will be displayed... -->
    </div>

    <!-- jQuery CDN link -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Our JavaScript file -->
    <script src="badges.js"></script>
</body>
</html>

Important things to note: Make sure the jQuery CDN link is above the badges.js script tag. We need jQuery to load first before we can use it. Seems basic I know, but we've all done it...

You can go ahead and make blank badges.js and style.css files. The div in which we will be displaying our badges has been give the id of badges. We will use this to target the correct div to display our badges.

JavaScript

Now to the fun stuff.

First we need to find out the endpoint for the API call. Treehouse makes this easy. It is simply their web address https://teamtreehouse.com/ followed by your username. You can find out your username URL by logging into your Treehouse account and going to account settings. You should see your Treehouse Profile URL listed there. Now add .json on the end and you now have your endpoint.

var url = "https://teamtreehouse.com/your-username.json"

Now we use jQuery to fetch the data. We'll be using the getJSON() shorthand method (here's the docs).

$.getJSON(url, function (data) {
        var badges = data.badges;
        parseData(badges);
    })

Let's break it down. We are making the call to the JSON endpoint using jQuery. It takes two arguments, in this case, the url and a callback function. The function will always return a response, and in this case it will be the JSON data we are after. So I intelligently called that response data. We don't want all the data though, just the badges section. As the data returned is JSON, we can use JavaScript's dot notation to select this and assign it to a variable with var badges = data.badges;

Next we are going to parse the badges data and pull out the badge name and icon properties. We will do this with the parseData() function. So lets write that next.

function parseData(data) {
    for (let i = 0; i < data.length; i++) {
        let name = data[i].name;
        let icon = data[i].icon_url;
        $('#badges').prepend('<img class="th-badge" src="' + icon + '" title="' + name + '"/>')
    }
}

So what's happening in this function? Let's again break it down. We start by declaring our function. It takes one argument: data. The data we pass to this will be the badges variable we created earlier.

Time for a loop! In JSON we fetched from Treehouse, the badges value holds an array of objects. So we need to loop through the array and collect the name and icon_url values of each object. We will assign them to var name and var icon respectively.

Now we have what we need, we have to add them to the DOM! Time for more jQuery. We start by selecting the div's id we created earlier with $('#badges). Now to add each badge inside of the div, we can use either the append() or prepend() methods. As the JSON endpoint lists the oldest badge first, if you use append() you will view the badges in the order you acquired them. I prefer to show the latest badges first, so I used prepend(). If you would rather show them in chronological order, then go ahead and use append() instead.

Now I'll pass the HTML I want to render into to prepend() method. I'm creating an <img> tag for each badge, with the class of th-badge. The src attribute is simply the icon_url which is saved to the icon variable. I have then used the name variable as the title attribute for the image.

CSS

Now when you run this you'll find that each badge will be the size of you browser window. Not ideal. So lets make them a more manageable size.

.th-badge {
    height: 50px;
    width: 50px;
}

You should now see something like this:

Finished Badges Page

Okay, it's not the prettiest thing in the world, but you get the idea. You can add Bootstrap responsive classes or another frontend framework to make it prettier. But the chances are you are already doing so on your website, anyway.

That's a Wrap

That's it for this tutorial. If you have any problems making this work leave a comment below and I'll help to the best of my abilities.

If you are not already signed up to Team Treehouse but would like to give it a go you can use this link to get yourself a 7-day FREE trial.