LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Team Treehouse Achievements

0 points have been earned

CSS
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: #222222;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

body {
  font-family: "Open Sans", Arial;
  background: #f9f9f9;
}
body a {
  text-decoration: none;
}
body .team-treehouse h1, body .team-treehouse h2 {
  text-align: center;
}
body .team-treehouse h2 {
  font-weight: normal;
}

.pieChart {
  width: 25.5em;
  margin: 0 auto;
  padding-top: 1em;
}

.pie {
  height: 12.5em;
  width: 12.5em;
  position: relative;
  float: left;
}
.pie::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 7.5em;
  height: 7.5em;
  background: #f9f9f9;
  border-radius: 50%;
  top: 2.5em;
  left: 2.5em;
}

.slice {
  position: absolute;
  width: 12.5em;
  height: 12.5em;
  clip: rect(0px, 12.5em, 12.5em, 6.25em);
  animation: bake-pie 1s;
}
.slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 12.5em;
  height: 12.5em;
  border-radius: 50%;
  clip: rect(0px, 12.5em, 12.5em, 6.25em);
}

.legend {
  width: 13em;
  padding-left: 1em;
  float: left;
}
.legend ul {
  list-style-type: none;
  list-style-position: inside;
  font-size: 0.8em;
}
.legend li {
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.legend em {
  font-style: normal;
}
.legend span {
  float: right;
  font-weight: bold;
}
JS
// edit username here
$.ajax('https://teamtreehouse.com/ethanneff.json')
  .done(function(data) {
 // pull was a success
  var items = [];
  $.each( data, function( key, val ) {
    if (key.toLowerCase() === 'points') {
      $.each(val, function( key2, val2 ) {
        if (val2 !== 0) {
          if (key2.toLowerCase() !== 'total') {
            items.push([key2,val2]);
          } else {
            $('strong.total').text(val2);
          } 
        }
      });
    }
  });

  // sort
  var sorted = [];
  if (items.length === 0) {
    sorted = items;
  } else {
    sorted = [items.shift()];
  }

  while (items.length > 0) {
    for (i = 0; i < sorted.length; i++) {
      if (items[0][1] > sorted[i][1]) {
        sorted.splice(i,0,items.shift());
        break;
      }
      if (i === sorted.length-1) {
        sorted.push(items.shift());
        break;
      }   
    }
  }
  // make into html
  html = [];
  html.push("
    "); for (s in sorted) { html.push("
  • "); html.push("" + sorted[s][0] + ""); html.push("" + sorted[s][1] + ""); html.push("
  • "); } html.push("
"); // make legend $('.legend').append(html.join("")); // make pie createPie(".legend", ".pie"); }) .fail(function() { $('.team-treehouse > a > h2').text("Could not connect. Username my be incorrect."); }) function sliceSize(dataNum, dataTotal) { return (dataNum / dataTotal) * 360; } function addSlice(sliceSize, pieElement, offset, sliceID, color) { $(pieElement).append("
"); var offset = offset - 1; var sizeRotation = -179 + sliceSize; $("."+sliceID).css({ "transform": "rotate("+offset+"deg) translate3d(0,0,0)" }); $("."+sliceID+" span").css({ "transform" : "rotate("+sizeRotation+"deg) translate3d(0,0,0)", "background-color": color }); } function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) { var sliceID = "s"+dataCount+"-"+sliceCount; var maxSize = 179; if(sliceSize<=maxSize) { addSlice(sliceSize, pieElement, offset, sliceID, color); } else { addSlice(maxSize, pieElement, offset, sliceID, color); iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color); } } function createPie(dataElement, pieElement) { var listNames = []; var listData = []; $(dataElement+" li").each(function() { listNames.push($(this).children('em').html()); listData.push(Number($(this).children('span').html())); }); var listTotal = 0; for(var i=0; i
Host Instantly Drag and Drop Website Builder

 

Description

Displays the points in a circular pie chart for a given Team Treehouse user.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID