cferdinandi · January 30, 2019 15:04 · vasileVas · Jan 31, 2019
diff --git a/who-is-driving-refactor.html b/who-is-driving-refactor.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>

 		<div id="app" aria-live="polite"></div>

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


 		<!-- Scripts -->
 		<script>

 			//
 			// Data
 			//

 			var data = {
 				drivers: [],
 				selected: null
 			};


 			//
 			// Methods
 			//

 			// Create the markup string
 			var template = function () {

 				// Create driver items
 				var driverList = data.drivers.map(function (driver, index) {
 					return '<li>' + driver + ' <button data-remove-driver="' + index + '">Remove Driver</button></li>';
 				});

 				// Create page markup
 				var html = '';

 				if (driverList.length > 0) {
 					html += '<ul>' + driverList.join('') + '</ul>';
 				}

 				if (data.selected) {
 					html += '<p><strong>' + data.selected + ' is driving.</strong></p>';
 				}

 				return html;

 			};

 			// Emit a custom event
 			var emitEvent = function (elem, detail) {

 				// Create a new event
 				var event = new CustomEvent('render', {
 					bubbles: true,
 					cancelable: true,
 					detail: detail || {}
 				});

 				// Dispatch the event
 				elem.dispatchEvent(event);

 			};

 			// Render our template into the DOM
 			var render = function () {
 				var app = document.querySelector('#app');
 				if (!app) return;
 				app.innerHTML = template();
 				emitEvent(app, data);
 			};


 			// 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();
 				// Shuffle the array
 				return arrClone.sort(function() {
 					return Math.random() - 0.5;
 				});
 			};

 			// Get drivers from localStorage
 			var getDriversFromLocalStorage = function () {
 				var drivers = localStorage.getItem('whosDriving');
 				if (drivers) {
 					data.drivers = JSON.parse(drivers);
 				}
 			};

 			// Handle submit events
 			var submitHandler = function (event) {

 				// Make sure it was our add driver form
 				if (!event.target.matches('#add-driver')) return;

 				// Prevent default form behavior
 				event.preventDefault();

 				// Get the field
 				var driver = event.target.querySelector('#potential-driver');
 				if (!driver || driver.value.length < 1) return;

 				// Update our data and UI
 				data.drivers.push(driver.value);
 				render();

 				// Clear the field and refocus
 				driver.value = '';
 				driver.focus();

 			};

 			// Remove a driver from the list
 			var removeDriver = function (event) {
 				var index = event.target.getAttribute('data-remove-driver');
 				data.drivers.splice(index, 1);
 				render();
 			};

 			// Pick a driver
 			var pickDriver = function () {
 				var randomize = shuffle(data.drivers);
 				data.selected = randomize[0];
 				render();
 			};

 			// Clear all drivers from the list
 			var clearDrivers = function () {
 				data.drivers = [];
 				render();
 			};

 			// Handle click events
 			var clickHandler = function (event) {

 				if (event.target.matches('[data-remove-driver]')) {
 					removeDriver(event);
 				}

 				if (event.target.matches('#pick-driver')) {
 					pickDriver();
 				}

 				if (event.target.matches('#clear')) {
 					clearDrivers();
 				}

 			};

 			// Save to localStorage on render
 			var renderHandler = function (event) {
 				localStorage.setItem('whosDriving', JSON.stringify(event.detail.drivers));
 			};


 			//
 			// Inits and Event Listeners

 			// Event listeners
 			document.addEventListener('submit', submitHandler, false);
 			document.documentElement.addEventListener('click', clickHandler, false);
 			document.addEventListener('render', renderHandler, false);

 			// Initial render
 			getDriversFromLocalStorage();
 			render();

 		</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>

	<div id="app" aria-live="polite"></div>

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


	<!-- Scripts -->
	<script>

	//
	// Data
	//

	var data = {
	drivers: [],
	selected: null
	};


	//
	// Methods
	//

	// Create the markup string
	var template = function () {

	// Create driver items
	var driverList = data.drivers.map(function (driver, index) {
	return '<li>' + driver + ' <button data-remove-driver="' + index + '">Remove Driver</button></li>';
	});

	// Create page markup
	var html = '';

	if (driverList.length > 0) {
	html += '<ul>' + driverList.join('') + '</ul>';
	}

	if (data.selected) {
	html += '<p><strong>' + data.selected + ' is driving.</strong></p>';
	}

	return html;

	};

	// Emit a custom event
	var emitEvent = function (elem, detail) {

	// Create a new event
	var event = new CustomEvent('render', {
	bubbles: true,
	cancelable: true,
	detail: detail \|\| {}
	});

	// Dispatch the event
	elem.dispatchEvent(event);

	};

	// Render our template into the DOM
	var render = function () {
	var app = document.querySelector('#app');
	if (!app) return;
	app.innerHTML = template();
	emitEvent(app, data);
	};


	// 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();
	// Shuffle the array
	return arrClone.sort(function() {
	return Math.random() - 0.5;
	});
	};

	// Get drivers from localStorage
	var getDriversFromLocalStorage = function () {
	var drivers = localStorage.getItem('whosDriving');
	if (drivers) {
	data.drivers = JSON.parse(drivers);
	}
	};

	// Handle submit events
	var submitHandler = function (event) {

	// Make sure it was our add driver form
	if (!event.target.matches('#add-driver')) return;

	// Prevent default form behavior
	event.preventDefault();

	// Get the field
	var driver = event.target.querySelector('#potential-driver');
	if (!driver \|\| driver.value.length < 1) return;

	// Update our data and UI
	data.drivers.push(driver.value);
	render();

	// Clear the field and refocus
	driver.value = '';
	driver.focus();

	};

	// Remove a driver from the list
	var removeDriver = function (event) {
	var index = event.target.getAttribute('data-remove-driver');
	data.drivers.splice(index, 1);
	render();
	};

	// Pick a driver
	var pickDriver = function () {
	var randomize = shuffle(data.drivers);
	data.selected = randomize[0];
	render();
	};

	// Clear all drivers from the list
	var clearDrivers = function () {
	data.drivers = [];
	render();
	};

	// Handle click events
	var clickHandler = function (event) {

	if (event.target.matches('[data-remove-driver]')) {
	removeDriver(event);
	}

	if (event.target.matches('#pick-driver')) {
	pickDriver();
	}

	if (event.target.matches('#clear')) {
	clearDrivers();
	}

	};

	// Save to localStorage on render
	var renderHandler = function (event) {
	localStorage.setItem('whosDriving', JSON.stringify(event.detail.drivers));
	};


	//
	// Inits and Event Listeners

	// Event listeners
	document.addEventListener('submit', submitHandler, false);
	document.documentElement.addEventListener('click', clickHandler, false);
	document.addEventListener('render', renderHandler, false);

	// Initial render
	getDriversFromLocalStorage();
	render();

	</script>
	</body>
	</html>