Twitt

Treehouse Badges Widget

I started this project after posting about a pretty simple widget I had been working on, to see if anyone else had thought about embedding their "Report Card" on their personal site/blog. Since there seemed to be some interest in a Report Card, I have been working on this current version as a side project for a number of months now. It has finally come together pretty well, and I am stoked to announce version 1.0 of the Coding Report Card! If you have any questions about anything, let me know.

DemoDownload via GitHub »

This widget is dependent on jQuery 1.9+
  1. Download the source.
  2. Make sure the folder "reportcard" is in your site's JS directory
  3. Add
    <link rel="stylesheet" href="{{your-root-to}}/js/reportcard/css/badges.css">
    just before the closing </head> tag.
  4. Add
    <script src="{{your-root-to}}/js/reportcard/js/reportcard.js"></script>
    to bottom of document, before the closing </body> tag.
  5. Add
    <div class="report-card treehouse"></div>
    inside whatever container you want the badges widget to load.
  6. Add
    <script>
    $('.report-card.treehouse').reportCard({
        userName: 'rileyhilliard',
        site: 'treehouse',
        badgesAmount: 7
    });
    </script>
                                
    after reportcard.js to invoke the widget. Replace the paramiters to customize your widget to your school credentials. the "site" param currently supports treehouse and codeschool.

CodePen.io Example

See the Pen JYLjZX by Riley Hilliard (@rileyhilliard) on CodePen.