/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="Fullscreen Coding Challenge">
  <title>JS Bin</title>
  <script src="https://cdn.rawgit.com/zloirock/core-js/master/client/shim.min.js"></script>
<style id="jsbin-css">
.vertical-form-group label,
.vertical-form-group select,
.vertical-form-group input,
.vertical-form-group button,
.vertical-form-group span {
  float: left;
  clear: none;
  margin-top: 0.5rem;
}
.vertical-form-group label,
.vertical-form-group button {
  clear: left;
}
.vertical-form-group label {
  margin-right: 0.5rem;
}
.vertical-form-group span {
  margin-left: 0.5rem;
  transition: opacity 0.25s;
}
.hidden {
  opacity: 0;
  transition: opacity 0.5s 1s;
}
</style>
</head>
<body>
  <secton id="main-content">
    <form id="vehicle-form" name="Create a Vehicle" action="#">
      <fieldset id="configure-vehicle" class="vertical-form-group">
        <legend>Configure Vehicle</legend>
        <label for="type-select">Vehicle Type: </label>
        <select id="type-select" required></select>

        <label for="name-input">Vehicle Name: </label>
        <input id="name-input" type="text" placeholder="random name"/>

        <button id="create-vehicle">Create Vehicle</button>
        <span id="loader" class="hidden">
          Generating random name........
        </span>
      </fieldset>
    </form>


    <h4>Vehicle List</h4>
    <ul id="vehicle-list">
      <template>
        <li>{{name}} <button>info</button></li>
      </template>
    </ul>
  </secton>

  <footer>
    A solution to the <a href="https://gist.github.com/8bitDesigner/4f6d92e00b4553f5b883" target="_blank">Fullscreen Coding Test Gist</a> by Ryan Bogle
  </footer>
<script id="jsbin-javascript">
// noprotect
'use strict';

var _get = function get(_x4, _x5, _x6) { var _again = true; _function: while (_again) { var object = _x4, property = _x5, receiver = _x6; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x4 = parent; _x5 = property; _x6 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

(function () {
  'use strict';
  // prevent form from submitting and redirecting
  document.getElementById('vehicle-form').addEventListener('submit', function (event) {
    event.preventDefault();
    event.stopPropagation();
    return false;
  });

  var createRandomVehicle,
      createVehicleLi,
      vehicleRegistry,
      liData = Symbol('vehicle data'),
      vehicleUl = document.getElementById('vehicle-list'),
      liTemplate = vehicleUl.querySelector('template'),
      nameInput = document.getElementById('name-input'),
      typeSelect = document.getElementById('type-select'),
      createBtn = document.getElementById('create-vehicle'),
      loader = document.getElementById('loader');

  // create classes

  var Vehicle = (function () {
    function Vehicle() {
      var name = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
      var wheels = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
      var seats = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];

      _classCallCheck(this, Vehicle);

      this.setName(name);
      this.wheels = wheels;
      this.seats = seats;
    }

    _createClass(Vehicle, [{
      key: 'getName',
      value: function getName() {
        return this.name;
      }
    }, {
      key: 'setName',
      value: function setName(newName) {
        return this.name = newName;
      }

      // using the classic _ for "hidden" props
      // could use an ES6 Symbol instead
    }, {
      key: 'toString',
      value: function toString() {
        return 'I am ' + this.name + ', a ' + this.type + ' with ' + this.wheels + ' wheels, and ' + this.seats + ' seats!';
      }
    }, {
      key: 'wheels',
      get: function get() {
        return this._wheels;
      },
      set: function set(newWheels) {
        return this._wheels = newWheels;
      }
    }, {
      key: 'seats',
      get: function get() {
        return this._seats;
      },
      set: function set(newSeats) {
        return this._seats = newSeats;
      }
    }, {
      key: 'type',
      get: function get() {
        return this.constructor.name;
      }
    }]);

    return Vehicle;
  })();

  var Car = (function (_Vehicle) {
    _inherits(Car, _Vehicle);

    function Car(name) {
      _classCallCheck(this, Car);

      _get(Object.getPrototypeOf(Car.prototype), 'constructor', this).call(this, name, 4, 5);
    }

    return Car;
  })(Vehicle);

  var Motorcycle = (function (_Vehicle2) {
    _inherits(Motorcycle, _Vehicle2);

    function Motorcycle(name) {
      _classCallCheck(this, Motorcycle);

      _get(Object.getPrototypeOf(Motorcycle.prototype), 'constructor', this).call(this, name, 2, 2);
    }

    // Populate Vehicle Registry
    return Motorcycle;
  })(Vehicle);

  vehicleRegistry = new Map([['vehicle', Vehicle], ['car', Car], ['motorcycle', Motorcycle]]);

  // create and populate select options
  vehicleRegistry.forEach(function (value, key) {
    var opt = document.createElement('option');

    opt.value = key;
    opt.innerHTML = value.name;

    // pre-select Car
    if (key === 'car') {
      opt.selected = true;
    }

    typeSelect.appendChild(opt);
  });

  // creates a vehicle and adds it to the UL#vehicle-list
  createVehicleLi = function (type, name) {
    var newLi,
        construct = vehicleRegistry.get(type);

    newLi = liTemplate.content.cloneNode(true).children[0];
    newLi.innerHTML = newLi.innerHTML.replace('{{name}}', name);

    // attach vehicle to li element for use later
    newLi[liData] = new construct(name);

    vehicleUl.appendChild(newLi);
  };

  // fetches a random name for the new vehicle
  createRandomVehicle = function (type) {
    try {
      loader.classList.remove('hidden');
      fetch('https://randomuser.me/api/?format=json&results=1').then(function (response) {
        return response.json();
      }).then(function (json) {
        var name = json.results[0].user.name.first;
        name = name.charAt(0).toUpperCase() + name.slice(1);
        createVehicleLi(type, name);
        loader.classList.add('hidden');
      })['catch'](function (error) {
        console.error('Something in the promise chain failed');
        console.error(error.stack || error);
        loader.classList.add('hidden');
      });
    } catch (error) {
      console.error('This browser must not support the Fetch API');
      loader.classList.add('hidden');
    }
  };

  // create vehicle button listener
  createBtn.addEventListener('click', function (event) {
    var type = typeSelect.value,
        name = nameInput.value;

    event.preventDefault();
    event.stopPropagation();

    if (name !== '') {
      createVehicleLi(type, name);
    } else {
      createRandomVehicle(type);
    }

    setImmediate(function () {
      nameInput.value = '';
    });

    return false;
  });

  // info button listener delegated to the UL containing all LIs
  vehicleUl.addEventListener('click', function (evnet) {
    var parent,
        target = event.target;

    if (target.tagName === 'BUTTON' && (parent = target.parentNode)[liData] instanceof Vehicle) {
      alert(parent[liData].toString());
    }
  });
})();
</script>


<script id="jsbin-source-css" type="text/css">
.vertical-form-group {
  label, select, input, button, span {
    float: left;
    clear: none;
    margin-top: 0.5rem;
  }
  label, button {
    clear: left;
  }
  label {
    margin-right: 0.5rem;
  }
  span {
    margin-left: 0.5rem;
    transition: opacity 0.25s;
  }
}

.hidden {
  opacity: 0;
  transition: opacity 0.5s 1s;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">// noprotect
(function() {
  'use strict';
  // prevent form from submitting and redirecting
  document.getElementById( 'vehicle-form' )
    .addEventListener( 'submit', function( event ) {
      event.preventDefault();
      event.stopPropagation();
      return false;
    });

  var
    createRandomVehicle,
    createVehicleLi,
    vehicleRegistry,
    liData = Symbol( 'vehicle data' ),
    vehicleUl = document.getElementById( 'vehicle-list' ),
    liTemplate = vehicleUl.querySelector( 'template' ),
    nameInput = document.getElementById( 'name-input' ),
    typeSelect = document.getElementById( 'type-select' ),
    createBtn = document.getElementById( 'create-vehicle' ),
    loader = document.getElementById( 'loader' );

  // create classes
  class Vehicle {
    constructor( name='', wheels=1, seats=1 ) {
      this.setName( name );
      this.wheels = wheels;
      this.seats = seats;
    }

    getName() {
      return this.name;
    }
    setName( newName ) {
      return this.name = newName;
    }

    // using the classic _ for "hidden" props
    // could use an ES6 Symbol instead
    get wheels() {
      return this._wheels;
    }
    set wheels( newWheels ) {
      return this._wheels = newWheels;
    }

    get seats() {
      return this._seats;
    }
    set seats( newSeats ) {
      return this._seats = newSeats;
    }

    get type() {
      return this.constructor.name;
    }

    toString() {
      return `I am ${this.name}, a ${this.type} with ${this.wheels} wheels, and ${this.seats} seats!`;
    }
  }

  class Car extends Vehicle {
    constructor( name ) {
      super( name, 4, 5 );
    }
  }

  class Motorcycle extends Vehicle {
    constructor( name ) {
      super( name, 2, 2 );
    }
  }

  // Populate Vehicle Registry
  vehicleRegistry = new Map([
    [ 'vehicle', Vehicle ],
    [ 'car', Car ],
    [ 'motorcycle', Motorcycle ]
  ]);

  // create and populate select options
  vehicleRegistry.forEach(function( value, key ) {
    var opt = document.createElement( 'option' );

    opt.value = key;
    opt.innerHTML = value.name;

    // pre-select Car
    if ( key === 'car' ) {
      opt.selected = true;
    }

    typeSelect.appendChild( opt );
  });

  // creates a vehicle and adds it to the UL#vehicle-list
  createVehicleLi = function( type, name ) {
    var
      newLi,
      construct = vehicleRegistry.get( type );

    newLi = liTemplate.content.cloneNode( true ).children[ 0 ];
    newLi.innerHTML = newLi.innerHTML.replace( '{{name}}', name );

    // attach vehicle to li element for use later
    newLi[ liData ] = new construct( name );

    vehicleUl.appendChild( newLi );
  };

  // fetches a random name for the new vehicle
  createRandomVehicle = function( type ) {
    try {
      loader.classList.remove( 'hidden' );
      fetch( 'https://randomuser.me/api/?format=json&results=1' )
        .then( response => response.json())
        .then(function( json ) {
          var name = json.results[0].user.name.first;
          name = name.charAt( 0 ).toUpperCase() + name.slice( 1 );
          createVehicleLi( type, name );
          loader.classList.add( 'hidden' );
        })
        .catch(function( error ) {
          console.error( 'Something in the promise chain failed' );
          console.error( error.stack || error );
          loader.classList.add( 'hidden' );
        })
    } catch ( error ) {
      console.error( 'This browser must not support the Fetch API' );
      loader.classList.add( 'hidden' );
    }
  };

  // create vehicle button listener
  createBtn.addEventListener( 'click', function( event ) {
    var
      type = typeSelect.value,
      name = nameInput.value;

    event.preventDefault();
    event.stopPropagation();

    if ( name !== '' ) {
      createVehicleLi( type, name );
    } else {
      createRandomVehicle( type );
    }

    setImmediate(function() {
      nameInput.value = '';
    });

    return false;
  });

  // info button listener delegated to the UL containing all LIs
  vehicleUl.addEventListener( 'click', function( evnet ) {
    var
      parent,
      target = event.target;

    if ( target.tagName === 'BUTTON' && (parent = target.parentNode)[ liData ] instanceof Vehicle ) {
      alert( parent[ liData ].toString());
    }
  });
})();</script></body>
</html>

## jsbin.pogere.css
.vertical-form-group label,
.vertical-form-group select,
.vertical-form-group input,
.vertical-form-group button,
.vertical-form-group span {
  float: left;
  clear: none;
  margin-top: 0.5rem;
}
.vertical-form-group label,
.vertical-form-group button {
  clear: left;
}
.vertical-form-group label {
  margin-right: 0.5rem;
}
.vertical-form-group span {
  margin-left: 0.5rem;
  transition: opacity 0.25s;
}
.hidden {
  opacity: 0;
  transition: opacity 0.5s 1s;
}

## jsbin.pogere.js
// noprotect
'use strict';

var _get = function get(_x4, _x5, _x6) { var _again = true; _function: while (_again) { var object = _x4, property = _x5, receiver = _x6; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x4 = parent; _x5 = property; _x6 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

(function () {
  'use strict';
  // prevent form from submitting and redirecting
  document.getElementById('vehicle-form').addEventListener('submit', function (event) {
    event.preventDefault();
    event.stopPropagation();
    return false;
  });

  var createRandomVehicle,
      createVehicleLi,
      vehicleRegistry,
      liData = Symbol('vehicle data'),
      vehicleUl = document.getElementById('vehicle-list'),
      liTemplate = vehicleUl.querySelector('template'),
      nameInput = document.getElementById('name-input'),
      typeSelect = document.getElementById('type-select'),
      createBtn = document.getElementById('create-vehicle'),
      loader = document.getElementById('loader');

  // create classes

  var Vehicle = (function () {
    function Vehicle() {
      var name = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0];
      var wheels = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1];
      var seats = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];

      _classCallCheck(this, Vehicle);

      this.setName(name);
      this.wheels = wheels;
      this.seats = seats;
    }

    _createClass(Vehicle, [{
      key: 'getName',
      value: function getName() {
        return this.name;
      }
    }, {
      key: 'setName',
      value: function setName(newName) {
        return this.name = newName;
      }

      // using the classic _ for "hidden" props
      // could use an ES6 Symbol instead
    }, {
      key: 'toString',
      value: function toString() {
        return 'I am ' + this.name + ', a ' + this.type + ' with ' + this.wheels + ' wheels, and ' + this.seats + ' seats!';
      }
    }, {
      key: 'wheels',
      get: function get() {
        return this._wheels;
      },
      set: function set(newWheels) {
        return this._wheels = newWheels;
      }
    }, {
      key: 'seats',
      get: function get() {
        return this._seats;
      },
      set: function set(newSeats) {
        return this._seats = newSeats;
      }
    }, {
      key: 'type',
      get: function get() {
        return this.constructor.name;
      }
    }]);

    return Vehicle;
  })();

  var Car = (function (_Vehicle) {
    _inherits(Car, _Vehicle);

    function Car(name) {
      _classCallCheck(this, Car);

      _get(Object.getPrototypeOf(Car.prototype), 'constructor', this).call(this, name, 4, 5);
    }

    return Car;
  })(Vehicle);

  var Motorcycle = (function (_Vehicle2) {
    _inherits(Motorcycle, _Vehicle2);

    function Motorcycle(name) {
      _classCallCheck(this, Motorcycle);

      _get(Object.getPrototypeOf(Motorcycle.prototype), 'constructor', this).call(this, name, 2, 2);
    }

    // Populate Vehicle Registry
    return Motorcycle;
  })(Vehicle);

  vehicleRegistry = new Map([['vehicle', Vehicle], ['car', Car], ['motorcycle', Motorcycle]]);

  // create and populate select options
  vehicleRegistry.forEach(function (value, key) {
    var opt = document.createElement('option');

    opt.value = key;
    opt.innerHTML = value.name;

    // pre-select Car
    if (key === 'car') {
      opt.selected = true;
    }

    typeSelect.appendChild(opt);
  });

  // creates a vehicle and adds it to the UL#vehicle-list
  createVehicleLi = function (type, name) {
    var newLi,
        construct = vehicleRegistry.get(type);

    newLi = liTemplate.content.cloneNode(true).children[0];
    newLi.innerHTML = newLi.innerHTML.replace('{{name}}', name);

    // attach vehicle to li element for use later
    newLi[liData] = new construct(name);

    vehicleUl.appendChild(newLi);
  };

  // fetches a random name for the new vehicle
  createRandomVehicle = function (type) {
    try {
      loader.classList.remove('hidden');
      fetch('https://randomuser.me/api/?format=json&results=1').then(function (response) {
        return response.json();
      }).then(function (json) {
        var name = json.results[0].user.name.first;
        name = name.charAt(0).toUpperCase() + name.slice(1);
        createVehicleLi(type, name);
        loader.classList.add('hidden');
      })['catch'](function (error) {
        console.error('Something in the promise chain failed');
        console.error(error.stack || error);
        loader.classList.add('hidden');
      });
    } catch (error) {
      console.error('This browser must not support the Fetch API');
      loader.classList.add('hidden');
    }
  };

  // create vehicle button listener
  createBtn.addEventListener('click', function (event) {
    var type = typeSelect.value,
        name = nameInput.value;

    event.preventDefault();
    event.stopPropagation();

    if (name !== '') {
      createVehicleLi(type, name);
    } else {
      createRandomVehicle(type);
    }

    setImmediate(function () {
      nameInput.value = '';
    });

    return false;
  });

  // info button listener delegated to the UL containing all LIs
  vehicleUl.addEventListener('click', function (evnet) {
    var parent,
        target = event.target;

    if (target.tagName === 'BUTTON' && (parent = target.parentNode)[liData] instanceof Vehicle) {
      alert(parent[liData].toString());
    }
  });
})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="description" content="Fullscreen Coding Challenge">
	<title>JS Bin</title>
	<script src="https://cdn.rawgit.com/zloirock/core-js/master/client/shim.min.js"></script>
	<style id="jsbin-css">
	.vertical-form-group label,
	.vertical-form-group select,
	.vertical-form-group input,
	.vertical-form-group button,
	.vertical-form-group span {
	float: left;
	clear: none;
	margin-top: 0.5rem;
	}
	.vertical-form-group label,
	.vertical-form-group button {
	clear: left;
	}
	.vertical-form-group label {
	margin-right: 0.5rem;
	}
	.vertical-form-group span {
	margin-left: 0.5rem;
	transition: opacity 0.25s;
	}
	.hidden {
	opacity: 0;
	transition: opacity 0.5s 1s;
	}
	</style>
	</head>
	<body>
	<secton id="main-content">
	<form id="vehicle-form" name="Create a Vehicle" action="#">
	<fieldset id="configure-vehicle" class="vertical-form-group">
	<legend>Configure Vehicle</legend>
	<label for="type-select">Vehicle Type: </label>
	<select id="type-select" required></select>

	<label for="name-input">Vehicle Name: </label>
	<input id="name-input" type="text" placeholder="random name"/>

	<button id="create-vehicle">Create Vehicle</button>
	<span id="loader" class="hidden">
	Generating random name........
	</span>
	</fieldset>
	</form>


	<h4>Vehicle List</h4>
	<ul id="vehicle-list">
	<template>
	<li>{{name}} <button>info</button></li>
	</template>
	</ul>
	</secton>

	<footer>
	A solution to the <a href="https://gist.github.com/8bitDesigner/4f6d92e00b4553f5b883" target="_blank">Fullscreen Coding Test Gist</a> by Ryan Bogle
	</footer>
	<script id="jsbin-javascript">
	// noprotect
	'use strict';

	var _get = function get(_x4, _x5, _x6) { var _again = true; _function: while (_again) { var object = _x4, property = _x5, receiver = _x6; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x4 = parent; _x5 = property; _x6 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

	function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

	(function () {
	'use strict';
	// prevent form from submitting and redirecting
	document.getElementById('vehicle-form').addEventListener('submit', function (event) {
	event.preventDefault();
	event.stopPropagation();
	return false;
	});

	var createRandomVehicle,
	createVehicleLi,
	vehicleRegistry,
	liData = Symbol('vehicle data'),
	vehicleUl = document.getElementById('vehicle-list'),
	liTemplate = vehicleUl.querySelector('template'),
	nameInput = document.getElementById('name-input'),
	typeSelect = document.getElementById('type-select'),
	createBtn = document.getElementById('create-vehicle'),
	loader = document.getElementById('loader');

	// create classes

	var Vehicle = (function () {
	function Vehicle() {
	var name = arguments.length <= 0 \|\| arguments[0] === undefined ? '' : arguments[0];
	var wheels = arguments.length <= 1 \|\| arguments[1] === undefined ? 1 : arguments[1];
	var seats = arguments.length <= 2 \|\| arguments[2] === undefined ? 1 : arguments[2];

	_classCallCheck(this, Vehicle);

	this.setName(name);
	this.wheels = wheels;
	this.seats = seats;
	}

	_createClass(Vehicle, [{
	key: 'getName',
	value: function getName() {
	return this.name;
	}
	}, {
	key: 'setName',
	value: function setName(newName) {
	return this.name = newName;
	}

	// using the classic _ for "hidden" props
	// could use an ES6 Symbol instead
	}, {
	key: 'toString',
	value: function toString() {
	return 'I am ' + this.name + ', a ' + this.type + ' with ' + this.wheels + ' wheels, and ' + this.seats + ' seats!';
	}
	}, {
	key: 'wheels',
	get: function get() {
	return this._wheels;
	},
	set: function set(newWheels) {
	return this._wheels = newWheels;
	}
	}, {
	key: 'seats',
	get: function get() {
	return this._seats;
	},
	set: function set(newSeats) {
	return this._seats = newSeats;
	}
	}, {
	key: 'type',
	get: function get() {
	return this.constructor.name;
	}
	}]);

	return Vehicle;
	})();

	var Car = (function (_Vehicle) {
	_inherits(Car, _Vehicle);

	function Car(name) {
	_classCallCheck(this, Car);

	_get(Object.getPrototypeOf(Car.prototype), 'constructor', this).call(this, name, 4, 5);
	}

	return Car;
	})(Vehicle);

	var Motorcycle = (function (_Vehicle2) {
	_inherits(Motorcycle, _Vehicle2);

	function Motorcycle(name) {
	_classCallCheck(this, Motorcycle);

	_get(Object.getPrototypeOf(Motorcycle.prototype), 'constructor', this).call(this, name, 2, 2);
	}

	// Populate Vehicle Registry
	return Motorcycle;
	})(Vehicle);

	vehicleRegistry = new Map([['vehicle', Vehicle], ['car', Car], ['motorcycle', Motorcycle]]);

	// create and populate select options
	vehicleRegistry.forEach(function (value, key) {
	var opt = document.createElement('option');

	opt.value = key;
	opt.innerHTML = value.name;

	// pre-select Car
	if (key === 'car') {
	opt.selected = true;
	}

	typeSelect.appendChild(opt);
	});

	// creates a vehicle and adds it to the UL#vehicle-list
	createVehicleLi = function (type, name) {
	var newLi,
	construct = vehicleRegistry.get(type);

	newLi = liTemplate.content.cloneNode(true).children[0];
	newLi.innerHTML = newLi.innerHTML.replace('{{name}}', name);

	// attach vehicle to li element for use later
	newLi[liData] = new construct(name);

	vehicleUl.appendChild(newLi);
	};

	// fetches a random name for the new vehicle
	createRandomVehicle = function (type) {
	try {
	loader.classList.remove('hidden');
	fetch('https://randomuser.me/api/?format=json&results=1').then(function (response) {
	return response.json();
	}).then(function (json) {
	var name = json.results[0].user.name.first;
	name = name.charAt(0).toUpperCase() + name.slice(1);
	createVehicleLi(type, name);
	loader.classList.add('hidden');
	})['catch'](function (error) {
	console.error('Something in the promise chain failed');
	console.error(error.stack \|\| error);
	loader.classList.add('hidden');
	});
	} catch (error) {
	console.error('This browser must not support the Fetch API');
	loader.classList.add('hidden');
	}
	};

	// create vehicle button listener
	createBtn.addEventListener('click', function (event) {
	var type = typeSelect.value,
	name = nameInput.value;

	event.preventDefault();
	event.stopPropagation();

	if (name !== '') {
	createVehicleLi(type, name);
	} else {
	createRandomVehicle(type);
	}

	setImmediate(function () {
	nameInput.value = '';
	});

	return false;
	});

	// info button listener delegated to the UL containing all LIs
	vehicleUl.addEventListener('click', function (evnet) {
	var parent,
	target = event.target;

	if (target.tagName === 'BUTTON' && (parent = target.parentNode)[liData] instanceof Vehicle) {
	alert(parent[liData].toString());
	}
	});
	})();
	</script>


	<script id="jsbin-source-css" type="text/css">
	.vertical-form-group {
	label, select, input, button, span {
	float: left;
	clear: none;
	margin-top: 0.5rem;
	}
	label, button {
	clear: left;
	}
	label {
	margin-right: 0.5rem;
	}
	span {
	margin-left: 0.5rem;
	transition: opacity 0.25s;
	}
	}

	.hidden {
	opacity: 0;
	transition: opacity 0.5s 1s;
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">// noprotect
	(function() {
	'use strict';
	// prevent form from submitting and redirecting
	document.getElementById( 'vehicle-form' )
	.addEventListener( 'submit', function( event ) {
	event.preventDefault();
	event.stopPropagation();
	return false;
	});

	var
	createRandomVehicle,
	createVehicleLi,
	vehicleRegistry,
	liData = Symbol( 'vehicle data' ),
	vehicleUl = document.getElementById( 'vehicle-list' ),
	liTemplate = vehicleUl.querySelector( 'template' ),
	nameInput = document.getElementById( 'name-input' ),
	typeSelect = document.getElementById( 'type-select' ),
	createBtn = document.getElementById( 'create-vehicle' ),
	loader = document.getElementById( 'loader' );

	// create classes
	class Vehicle {
	constructor( name='', wheels=1, seats=1 ) {
	this.setName( name );
	this.wheels = wheels;
	this.seats = seats;
	}

	getName() {
	return this.name;
	}
	setName( newName ) {
	return this.name = newName;
	}

	// using the classic _ for "hidden" props
	// could use an ES6 Symbol instead
	get wheels() {
	return this._wheels;
	}
	set wheels( newWheels ) {
	return this._wheels = newWheels;
	}

	get seats() {
	return this._seats;
	}
	set seats( newSeats ) {
	return this._seats = newSeats;
	}

	get type() {
	return this.constructor.name;
	}

	toString() {
	return `I am ${this.name}, a ${this.type} with ${this.wheels} wheels, and ${this.seats} seats!`;
	}
	}

	class Car extends Vehicle {
	constructor( name ) {
	super( name, 4, 5 );
	}
	}

	class Motorcycle extends Vehicle {
	constructor( name ) {
	super( name, 2, 2 );
	}
	}

	// Populate Vehicle Registry
	vehicleRegistry = new Map([
	[ 'vehicle', Vehicle ],
	[ 'car', Car ],
	[ 'motorcycle', Motorcycle ]
	]);

	// create and populate select options
	vehicleRegistry.forEach(function( value, key ) {
	var opt = document.createElement( 'option' );

	opt.value = key;
	opt.innerHTML = value.name;

	// pre-select Car
	if ( key === 'car' ) {
	opt.selected = true;
	}

	typeSelect.appendChild( opt );
	});

	// creates a vehicle and adds it to the UL#vehicle-list
	createVehicleLi = function( type, name ) {
	var
	newLi,
	construct = vehicleRegistry.get( type );

	newLi = liTemplate.content.cloneNode( true ).children[ 0 ];
	newLi.innerHTML = newLi.innerHTML.replace( '{{name}}', name );

	// attach vehicle to li element for use later
	newLi[ liData ] = new construct( name );

	vehicleUl.appendChild( newLi );
	};

	// fetches a random name for the new vehicle
	createRandomVehicle = function( type ) {
	try {
	loader.classList.remove( 'hidden' );
	fetch( 'https://randomuser.me/api/?format=json&results=1' )
	.then( response => response.json())
	.then(function( json ) {
	var name = json.results[0].user.name.first;
	name = name.charAt( 0 ).toUpperCase() + name.slice( 1 );
	createVehicleLi( type, name );
	loader.classList.add( 'hidden' );
	})
	.catch(function( error ) {
	console.error( 'Something in the promise chain failed' );
	console.error( error.stack \|\| error );
	loader.classList.add( 'hidden' );
	})
	} catch ( error ) {
	console.error( 'This browser must not support the Fetch API' );
	loader.classList.add( 'hidden' );
	}
	};

	// create vehicle button listener
	createBtn.addEventListener( 'click', function( event ) {
	var
	type = typeSelect.value,
	name = nameInput.value;

	event.preventDefault();
	event.stopPropagation();

	if ( name !== '' ) {
	createVehicleLi( type, name );
	} else {
	createRandomVehicle( type );
	}

	setImmediate(function() {
	nameInput.value = '';
	});

	return false;
	});

	// info button listener delegated to the UL containing all LIs
	vehicleUl.addEventListener( 'click', function( evnet ) {
	var
	parent,
	target = event.target;

	if ( target.tagName === 'BUTTON' && (parent = target.parentNode)[ liData ] instanceof Vehicle ) {
	alert( parent[ liData ].toString());
	}
	});
	})();</script></body>
	</html>