[Vanilla JS, JSON, SCSS] Treehouse Profile/Badges

index.html

<div id="mainContainer">
	<div class="page">
		<div class="wrapper">
			<div class="content">
				<div id="treehouse"></div>
			</div>
		</div>
	</div>
</div>

script.js

// ================================================================================

// 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);
}

style.scss

// 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);
			}
		}
	}
}

vanilla-js-json-scss-treehouse-profile-badges.markdown

[Vanilla JS, JSON, SCSS] Treehouse Profile/Badges

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.

License.