JSFiddle - React, Tailwind, and code Playground

by Aubrey Taylor

HTML

<h1>Open the console with CMD + SHIFT + I</h1>

CSS

body {
  font-family: sans-serif;
}

JavaScript

window.ProjectNamespace = window.ProjectNamespace || {};

(function(window, exports){

CAR_DIRECTION_FORWARD = "forward";
CAR_DIRECTION_REVERSE = "reverse";

// this is a constructor function because we intend that someone will use "new" when running it
// the convention to let us know that is a capital first letter

/**
 * constructs a Car type
 * @param options {Object} {color: String, doors: Number}
 * @example 
 * var sedan = new Car({
 *   color: "red",
 *   doors: 4
 * })
 */
function Car(options) {
  // though it's not obvious, initialize will be available
  // when this function runs because we assign it to the prototype below
  this.initialize(options);
}

// javascript doesn't have traditional "Class Based" inheritance
// in this case Car is a subtype of Function
// to add a methond into the prototype chain, we simply access it via Car.prototype.Foo and assign a value
// Any method added to the prototype will be available after the constructor is run

Car.prototype.initialize = function(options) {
  // set option values "or" default values
  // this pattern [value || defaultValue] is a bit of a hack that leverages the fact that
  // the second part of a logical OR only evaluates if the first part is False
  // it's important putting something like "options.color" in a logical statement like this 
  // leverages Javascript's implicit type conversion to convert something like a 
  // String into a Boolean value.
  // basically, this reads: if options.color is Undefined this.color is = "black"
  this.color = options.color || "black",
  this.doors = options.doors || 2
  this.speed = 0;
}

Car.prototype.drive = function(direction) {
  // this pattern is idential to the one used above for options
  // but allows us to have a sort of pseudo-optional param
  // in most other languages you can do this:
  // function foo(requiredParam, optionalParam="defaultValue")
  direction = direction || CAR_DIRECTION_FORWARD;
  
  if(direction == CAR_DIRECTION_FORWARD)...