LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
/* Controls width of the widget */
.badge-container {width:700px; margin: 0 auto;}

/* Makes Badges display inline */
#badges li { display: inline;}

/* Controls badges row offset. THIS FUNCTION WILL CHANGE BASED ON THE NUMBER OF BADGES PER ROW */
/* Indent 30px every eleventh badge, repeat every 20 badges */
#badges li:nth-child(20n+11) {margin-left:30px;}

/* Controls badges size and alignment */
#badges li img {
  width: 60px; 
  margin:-17px 2px 0px 0px;
}

/* Controls Header Formatting */
.badge-container h1 {
  text-align:center; 
  font-family: 'Helvetica Neue'; 
  font-weight: bold; 
  -webkit-font-smoothing: antialiased;
}

/* Controls badges on-hover opacity */
#badges li img:hover {opacity:.7;}
JS
// When Document is ready, build treehouse Badge Widget 
$(document).ready(function () {

  // Replace the value for var 'e' with your Treehouse Username
  var e = "rileyhilliard",
  
  // Treehouse Json 
  t = "https://teamtreehouse.com/" + e + ".json",
  
  // Badges JQuery Identifier    
  n = $("#badges"),
  
  // Badges Array    
  r = [],
  
  // Badges Count
  i = 0;
  
  // Json Parse Treehouse User Badges Info
  $.getJSON(t, function (e) {
    
    // User Json Parse Select Badges Info
  	var t = e.badges;
    
    // Construct Each badge's HTML
  	$.each(t, function (e, t) {
  	 r += '
  • ' + t.name + '
  • '; i++ }); // Append Badge to #badges n.append(r); // Header Badges count generator $("#treehouse-count").append('I have earned ' + i + ' badges at Treehouse!'); }); });
    Host Instantly Drag and Drop Website Builder

     

    Description

    Automatically pulls user badge counts and display's them on an external website, such as a porfolio page.
    Term
    Mon, 11/27/2017 - 21:34

    Related Codes

    Pen ID
    Pen ID
    Pen ID