DOM manipulation

panel.js

function appendPanel(options) {

	var body = document.body,
		panel = createElement('.sd-panel'),
		desc = createElement('.sd-description'),
		title = createElement('.sd-title'),
		titlePara = createElement('p'),
		titleLink = createElement('a'),
		titleHead = createElement('h1'),
		legend = createElement('p.sd-legend'),
		tags = createElement('p.sd-tags'),
		tagsLink = createElement('a'),
		features = createElement('.sd-features'),
		featuresPara = createElement('p'),
		list = createElement('ul.sd-list'),
		button = createElement('button.sd-button');

	// Description

	titleLink.href = '/';
	titleLink.appendChild(document.createTextNode('SD'));

	titlePara.appendChild(titleLink);
	titleHead.appendChild(document.createTextNode(options.title));

	title.appendChild(titlePara);
	title.appendChild(titleHead);

	legend.appendChild(document.createTextNode(options.legend));

	for(var i=0, l=options.tags.length; i<l; i++) {
		var link = tagsLink.cloneNode(false),
			text = options.tags[i];
		link.href = '/'+ text +'/';
		link.appendChild(document.createTextNode(text));
		tags.appendChild(link);
	}

	desc.appendChild(title);
	desc.appendChild(legend);
	desc.appendChild(tags);

	// Features

	var maybeFeatures = options.features,
		nopeFeatures = [], yepFeatures = [],
		nopeDesc = 'Your browser doesn’t support all required features',
		yepDesc = 'Success! Your browser supports all required features!';

	for(var i=0, l=maybeFeatures.length; i<l; i++) {
		var feature = maybeFeatures[i];
		if(Modernizr[feature]) {
			yepFeatures.push(feature);
		} else {
			nopeFeatures.push(feature);
		}
	}

	var nopes = nopeFeatures.length,
		yeps = yepFeatures.length;

	featuresPara.appendChild(document.createTextNode( nopes ? nopeDesc : yepDesc ));
	features.classList.add( nopes ? 'sd-features-nope' : 'sd-features-yep' );
	features.appendChild(featuresPara);

	function createFeatures(featuresList) {
		var cloneList = list.cloneNode(false);
		for(var i=0, l=featuresList.length; i<l; i++) {
			var item = createElement('li'),
				link = createElement('a');
			link.href = 'http://caniuse.com/#search=' + encodeURI(featuresList[i]);
			link.appendChild(document.createTextNode(featuresList[i]));
			item.appendChild(link);
			cloneList.appendChild(item);
		}
		return cloneList;
	}

	if(nopes) {
		var nopeList = createFeatures(nopeFeatures);
			nopeList.classList.add('sd-list-nope');
		features.appendChild(nopeList);
	}

	if(yeps) {
		var yepList = createFeatures(yepFeatures);
			yepList.classList.add('sd-list-yep');
		features.appendChild(yepList);
	}

	button.appendChild(document.createTextNode('Hide'));
	button.addEventListener('click', function(){
		panel.classList.toggle('sd-panel-on');
	}, false);

	panel.appendChild(desc);
	panel.appendChild(features);
	panel.appendChild(button);
	body.appendChild(panel);
}

function createElement(query) {
	var query = query.split('.'),
		tag = query[0] || 'div',
		name = query[1];
	var e = document.createElement(tag);
		if(name) e.className = name;
	return e;
}