cferdinandi/who-should-drive.html

## who-should-drive.html
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Who should drive?</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Styles -->
		<style type="text/css">
			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
				font-size: 112.5%;
				margin-left: auto;
				margin-right: auto;
				max-width: 40em;
				width: 88%;
			}

			/**
			 * Visually hide an element, but leave it available for screen readers
			 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
			 * @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
			 */
			.screen-reader {
				border: 0;
				clip: rect(0 0 0 0);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				white-space: nowrap;
				width: 1px;
			}
		</style>
	</head>

	<body>

		<h1>Who should drive?</h1>

		<ul id="names">
		</ul>

		<label class="screen-reader" for="potential-driver">Name of driver</label>
		<input id="potential-driver" placeholder="Name of driver...">
		<button id="add-driver">Add Driver</button>
		<button id="pick-driver">Who's driving?</button>
		<button id="clear">Clear Drivers</button>

		<div id="driver"></div>


		<!-- Scripts -->
		<script>
			// Variables
			var add = document.querySelector('#add-driver');
			var pick = document.querySelector('#pick-driver');
			var names = document.querySelector('#names');
			var driver = document.querySelector('#driver');
			var newName = document.querySelector('#potential-driver');
			var clear = document.querySelector('#clear');
			var drivers = [];

			// Shuffle our array of drivers and pick one
			var shuffle = function (arr) {
				// Create a clone of the array so that we don't shuffle the original one
				var arrClone = arr.slice(0);
				// Shuffle the array
				return arrClone.sort(function() {
					return Math.random() - 0.5;
				})
			}

			// Add potential drivers
			add.addEventListener('click', function (event) {
				names.innerHTML += '<li>' + newName.value + ' <a data-remove="' + newName.value + '" href="#">&ndash;</a></li>';
				drivers.push(newName.value);
				newName.value = '';
				newName.focus();
				localStorage.setItem('whoShouldDrive', drivers.toString());
			}, false);

			// Select driver
			pick.addEventListener('click', function (event) {
				var randomize = shuffle(drivers);
				driver.innerHTML = randomize[0];
			}, false);

			// Clear all drivers
			clear.addEventListener('click', function (event) {
				names.innerHTML = '';
				drivers = [];
				localStorage.removeItem('whoShouldDrive');
			}, false);

			// Remove specific drivers
			document.addEventListener('click', function (event) {
				if ( !event.target.hasAttribute('data-remove') ) return;
				var index = drivers.indexOf(event.target.getAttribute('data-remove'));
				if (index > -1) {
					drivers.splice(index, 1);
				}
				names.innerHTML = '';
				for ( var i = 0; i < drivers.length; i++ ) {
					names.innerHTML += '<li>' + drivers[i] + ' <a data-remove="' + drivers[i] + '" href="#">&ndash;</a></li>';
				}
				localStorage.setItem('whoShouldDrive', drivers.toString());
			}, false);

			// Load drivers from local storage
			var savedDrivers = localStorage.getItem('whoShouldDrive');
			if ( savedDrivers ) {
				drivers = savedDrivers.split(',');
				for ( var i = 0; i < drivers.length; i++ ) {
					names.innerHTML += '<li>' + drivers[i] + ' <a data-remove="' + drivers[i] + '" href="#">&ndash;</a></li>';
				}
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Who should drive?</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Styles -->
	<style type="text/css">
	body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-size: 112.5%;
	margin-left: auto;
	margin-right: auto;
	max-width: 40em;
	width: 88%;
	}

	/**
	* Visually hide an element, but leave it available for screen readers
	* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
	* @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
	*/
	.screen-reader {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	}
	</style>
	</head>

	<body>

	<h1>Who should drive?</h1>

	<ul id="names">
	</ul>

	<label class="screen-reader" for="potential-driver">Name of driver</label>
	<input id="potential-driver" placeholder="Name of driver...">
	<button id="add-driver">Add Driver</button>
	<button id="pick-driver">Who's driving?</button>
	<button id="clear">Clear Drivers</button>

	<div id="driver"></div>


	<!-- Scripts -->
	<script>
	// Variables
	var add = document.querySelector('#add-driver');
	var pick = document.querySelector('#pick-driver');
	var names = document.querySelector('#names');
	var driver = document.querySelector('#driver');
	var newName = document.querySelector('#potential-driver');
	var clear = document.querySelector('#clear');
	var drivers = [];

	// Shuffle our array of drivers and pick one
	var shuffle = function (arr) {
	// Create a clone of the array so that we don't shuffle the original one
	var arrClone = arr.slice(0);
	// Shuffle the array
	return arrClone.sort(function() {
	return Math.random() - 0.5;
	})
	}

	// Add potential drivers
	add.addEventListener('click', function (event) {
	names.innerHTML += '<li>' + newName.value + ' <a data-remove="' + newName.value + '" href="#">–</a></li>';
	drivers.push(newName.value);
	newName.value = '';
	newName.focus();
	localStorage.setItem('whoShouldDrive', drivers.toString());
	}, false);

	// Select driver
	pick.addEventListener('click', function (event) {
	var randomize = shuffle(drivers);
	driver.innerHTML = randomize[0];
	}, false);

	// Clear all drivers
	clear.addEventListener('click', function (event) {
	names.innerHTML = '';
	drivers = [];
	localStorage.removeItem('whoShouldDrive');
	}, false);

	// Remove specific drivers
	document.addEventListener('click', function (event) {
	if ( !event.target.hasAttribute('data-remove') ) return;
	var index = drivers.indexOf(event.target.getAttribute('data-remove'));
	if (index > -1) {
	drivers.splice(index, 1);
	}
	names.innerHTML = '';
	for ( var i = 0; i < drivers.length; i++ ) {
	names.innerHTML += '<li>' + drivers[i] + ' <a data-remove="' + drivers[i] + '" href="#">–</a></li>';
	}
	localStorage.setItem('whoShouldDrive', drivers.toString());
	}, false);

	// Load drivers from local storage
	var savedDrivers = localStorage.getItem('whoShouldDrive');
	if ( savedDrivers ) {
	drivers = savedDrivers.split(',');
	for ( var i = 0; i < drivers.length; i++ ) {
	names.innerHTML += '<li>' + drivers[i] + ' <a data-remove="' + drivers[i] + '" href="#">–</a></li>';
	}
	}
	</script>
	</body>
	</html>