qOjdNj

index.html

<div id="response">
  
</div>

qOjdNj.markdown

qOjdNj

A Pen by Kevin Dench on CodePen.

License.

script.js

$.ajax({
  url: "http://www.behance.net/v2/users/kdench/projects?api_key=BcO2sz2y46Ucak6mICBdOwhX0UCF6ylM",

  // The name of the callback parameter, as specified by the YQL service
  jsonp: "callback",

  // Tell jQuery we're expecting JSONP
  dataType: "jsonp",

  // Tell YQL what we want and that we want JSON
  data: {
    format: "json"
  },

  // Work with the response
  success: function(response) {
    var html = "";
    $(response.projects).each(function(index) {
      html += "<div id='"+this.id+"' class='wrapper'>";
      html += "<img src='"+this.covers[404]+"' />";
      html += "<p>Project: "+this.name+"</p>";
      html += "<p>Views: "+this.stats.views+"</p>";
      html += "<p>Appreciations: "+this.stats.appreciations+"</p>";
      html += "</div>";
    });
    $("#response").append(html);
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background-color: white;
}

.wrapper {
  margin: 15px;
  background-color: lighten(grey, 40%);
  border-radius: 5px;
  padding: 20px;
  display: inline-block;
  width: 400px;
}