Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 24, 2015 04:42
Show Gist options
  • Save anonymous/ea5322649c636dcfa46e to your computer and use it in GitHub Desktop.
Save anonymous/ea5322649c636dcfa46e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Fullscreen Coding Challenge // source https://jsbin.com/pogere
Raw
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>
Raw
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;
}
Raw
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());
}
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment