This serves as a good introductory example of fetching data from a JSON file (in this case, from an inline variable), which can be quite a pain to figure out, if you haven't already.
A Pen by Steven Ventimiglia on CodePen.
<div id="mainContainer"> | |
<div class="page"> | |
<div class="wrapper"> | |
<div class="content"> | |
<div id="treehouse"></div> | |
</div> | |
</div> | |
</div> | |
</div> |
// ================================================================================ | |
// Simply place your Treehouse ID into this function | |
// Remember to make it a string like the example below. | |
viewJSON('stevenventimiglia'); | |
// ================================================================================ | |
// Pull and apply JSON data | |
// In this case, it's your profile data from Treehouse | |
function viewJSON(id) { | |
var xhr = new XMLHttpRequest(); | |
xhr.onreadystatechange = function() { | |
if (xhr.readyState === 4) { | |
// This will turn the JSON feed into a array you can view | |
data = JSON.parse(xhr.responseText); | |
// This calls the function below to format and display the data | |
viewProfile(); | |
// This displays the array in your console, and can be removed | |
console.log(data); | |
} | |
}; | |
// This will call your profile from the 'id' variable you defined previously | |
xhr.open('GET', 'https://teamtreehouse.com/' + id + '.json'); | |
xhr.send(); | |
} | |
// ================================================================================ | |
// View Treehouse Profile | |
function viewProfile() { | |
view = '<h2>' + data.name + '</h2>'; | |
view += '<ul>'; | |
// Notice we used .reverse() to list them from your most recent badge | |
for (i=0; i < data.badges.reverse().length; i++) { | |
view += '<li class="group">'; | |
view += '<div style="float: left;"><img src="' + data.badges[i].icon_url + '" width="20" alt="' + data.badges[i].name + '"/></div>'; | |
view += '<div style="float: left;margin-left: 10px;line-height: 22px;">' + data.badges[i].name + '</div>'; | |
view += '</li>'; | |
} | |
view += '</ul>'; | |
document.getElementById('treehouse').innerHTML = view; | |
console.log(view); | |
} |
// Sass | |
$space: 20px; | |
$color: #000; | |
$light: lighter($color, 50%); | |
$darker: darker($color, 50%); | |
// General | |
*, | |
*:before, | |
*:after { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
body { | |
color: #333; | |
font-size: 14px; | |
line-height: 1.25; | |
font-family: Arial, Helvetica, sans-serif; | |
background: #999; | |
min-width: 320px; | |
overflow-x: hidden; | |
} | |
#mainContainer { | |
padding: $space; | |
} | |
.wrapper { | |
width: 100%; | |
max-width: 980px; | |
margin: 0 auto; | |
} | |
.page { | |
min-height: $space*20; | |
} | |
.content { | |
padding: $space; | |
} | |
.group { | |
&:before, | |
&:after { | |
content: ""; | |
display: table; | |
} | |
&:after { | |
clear: both; | |
} | |
} | |
// Pen | |
#treehouse { | |
h2 { | |
font-size: 2.25em; | |
margin-bottom: $space; | |
} | |
ul { | |
text-align: left; | |
border: 1px solid #666; | |
background: #eee; | |
li { | |
padding: $space/2; | |
&:nth-child(odd) { | |
background: rgba(0,0,0,0.05); | |
} | |
} | |
} | |
} |
This serves as a good introductory example of fetching data from a JSON file (in this case, from an inline variable), which can be quite a pain to figure out, if you haven't already.
A Pen by Steven Ventimiglia on CodePen.