Alisha Ramos alishalisha

	name	value
	Guinea	648
	Liberia	136
	Sierra Leone	556

Checking the State of Your States

If applicable, make sure your design component accounts for all these states. This is basically copied from the Nine States of Design Medium article. 😛

Initial state: What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.
Loading state: Have you accounted for when a user will be waiting for something to happen? What does that look like?
Empty state: Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).
One state: You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).
Some data state: This is usually what you think

	<form action="/" id="id-name">
	<fieldset>
	<label for="name">Your Name</label>
	<input type="text" id="name" placeholder="Jane Doe" />
	</fieldset>
	<fieldset>
	<label for="email">Your Email</label>
	<input type="email" id="email" placeholder="[email protected]" />
	</fieldset>
	<fieldset>

	// generate a random integer to add on to our unique namespace parameter
	ad.enable_log = true;

	var videoNamespace = ad.slug.toUpperCase()
	var videoPlaying = false;

	var ooyalaScript = document.createElement('script');
	ooyalaScript.src = 'http://player.ooyala.com/v3/8c6bc9de76f3488cb79e4080758a0db6?namespace=' + videoNamespace;

	var firstScriptTag = document.getElementsByTagName('script')[0];

	@mixin vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	}

	.element p {
	@include vertical-align;

	(function($){
	var $articles = $('article');
	var $activeArticle = $('article.active');
	// these get setup later
	var $previousArticle = null;
	var $nextArticle = null;
	var $prevButton = $("#navigation a.prev");
	var $nextButton = $("#navigation a.next");
	var $twitterShareButton = $('[data-share-via="twitter"]');
	var $facebookShareButton = $('[data-share-via="facebook"]');

	1. Go to Preferences
	2. Go to Sidebar Theme
	3. Paste this into the custom theme field:
	#FFE8F4,#FF9FC3,#78204C,#FFFFFF,#FE82CD,#731A3E,#96C761,#FF59BC