JSFiddle - React, Tailwind, and code Playground

by ephekt

CSS

body{
    background:#000;
}

.delivery-truck{
    background:#CC0000;
    width:30px;
    height:30px;
    position:absolute;
}

.depot{
    position:absolute;
    width:150px;
    height:150px;
    background:#ccc;
    border:3px dashed #666;
    top:200px;
    left:300px;
}

.delivery-address{
    position:absolute;
    border:3px dashed yellow;
}

.parcel{
    width:5px; 
    height:5px;
    background:white;
    display:block;
    border:2px solid red;
}

#house{
    width:50px;
    height:50px;
    top:340px;
    left:700px;
    background:#663300;
}

#office{
    width:80px;
    height:150px;
    top:100px;
    left:650px;
    background:white;
}

#factory{
    width:160px;
    height:60px;
    top:500px;
    left:600px;
    background:grey;
}

JavaScript

/* 
The Task

The DOM contains some markup which represents a "delivery truck", "depot" and three "delivery addresses".

The delivery truck should drive to the depot, load up with parcels and deliver a parcel to each of the addresses in the source code.

How you approach solving this problem is up to you but before you take the test spend some time thinking who will be reviewing the code. The developer who next looks at the test will only spend 10 or so minutes working through your solution and will not have time to examine why you have taken the approach that you did. The emphasis should be on readability, quality and re-usability.

Requirements

1. The delivery truck will drive to the depot.
2. At the depot the truck will be loaded with 3 parcels.
3. The truck will deliver a parcel to each of the "addresses" in the mark-up (house, office, factory).
4. Code structure should be Object Oriented.
5. You may use any third parties as you see fit but you should bear in mind point 4.
6. Any DOM movement should be animated.

Merit
* Allow for more than one truck to be present on the page at any time.
* Remove the need for placeholder mark-up in the index file.
* Minimise the likelihood of clashes with other scripts that may be used in the page.
*/

var DT = (function(){
	
    //Location constructor (for delivery-addresses)
	var Location = function(id, uiClass) {
		this.id = id;
		this.parcels = [];
		this.ui = new UIObject(id, uiClass);
	}
	Location.prototype = {
		addParcel:function(parcel) {
			this.parcels.push(parcel);
			this.updateUI();
		},
		getCoord:function() {
			return this.ui.getCoord(); 
		},
		updateUI:function() {
			this.ui.clear();
			var i = 0;
			for(i=0; i<this.parcels.length; i++) {
				this.ui.add("div","parcel");
			}
		}
	}
	
    //Depot constructor, inherits Location
	var Depot = function(id,uiClass) {
		Location.call(this, id, uiClass);
	}
	Depot.prototype = Location.prototype;
	Depot.prototype.getParcels = function(num) {
			var parcels =...