November 24, 2015 04:42 · Nov 24, 2015
diff --git a/index.html b/index.html
@@ -0,0 +1,461 @@
+<!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>
diff --git a/jsbin.pogere.css b/jsbin.pogere.css
@@ -0,0 +1,24 @@
+.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;
+}
diff --git a/jsbin.pogere.js b/jsbin.pogere.js
@@ -0,0 +1,199 @@
+// 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());
+    }
+  });
+})();