Delivery Truck

CSS

body{
    background:#000;
}

/* OBJECTS */
.delivery-truck{
    position:absolute;
    top: 25px;
    left: 0px;
    z-index: 3;
    width: 30px;
    height: 30px;
    background: red;
    border: 1px solid black;
    border-radius: 6px;
    box-sizing: border-box;
}
.parcel {
    display: block;
    width: 10px; 
    height: 10px;
    background: white;
    border: 1px solid black;
    border-radius: 3px;
    box-sizing: border-box;
}
.delivery-truck .parcel {
    position: absolute;
    left: 35px;
    bottom: 3px;
    display: none;
}

/* LOCATION CONTROLS */
.controls {
    position: absolute;
    top: 100%;
    left: -3px;
    width: 150px;
    margin-top: 8px;
    color: #CCC;
    font-size: 8pt;
    font-family: arial, sans-serif;
}
.controls div {
    float: left;
    margin-top: 5px;
    margin-right: 10px;
}
.controls a {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: red;
    color: #CCC;
    text-decoration: none;
}
.controls a:hover {
    background: darkred;
}
.controls a.disabled,
.controls a.disabled:hover {
    background: lightgrey;
    color: darkgrey;
}

/* LOCATIONS */
.location {
    position: absolute;
    z-index: 2;
    border: 2px dotted yellow;
    box-sizing: border-box;
}
#town {
    top: 50%;
    left: 50%;
    width: 600px;
    height: 500px;
    margin-left: -300px;
    margin-top: -250px;
    border: none;
}
#mainDepot {
    top: 100px;
    left: 90px;
    width: 170px;
    height: 170px;
    background: darkgrey;
    border: 2px dotted dimgrey;
}
#office {
    top: 25px;
    left: 440px;
    width: 80px;
    height: 150px;
    background: darkorange;
}
#house {
    top: 250px;
    left: 440px;
    width: 50px;
    height: 50px;
    background: darkgreen;
}
#factory {
    top: 375px;
    left: 440px;
    width: 160px;
    height: 60px;
    background: darkblue;
}
#mainRoad {
    top: 0px;
    left: 35px;
    width: 400px;
    height: 500px;
    background-color: black;
    border: 50px...

CoffeeScript

###
The Taskok

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).
    -> Click Disptach Truck

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.
    -> Used CoffeeScript and jQuery

6. Any DOM movement should be animated.
7. Allow for more than one truck to be present on the page at any time.
    -> After clicking Dispatch Truck, click any of the Request Parcel buttons then click Disptach Truck again.

8. Remove the need for placeholder mark-up in the index file.
    -> All markup was removed from index file.

9. Minimise the likelihood of clashes with other scripts that may be used in the page.
    -> All code is enclosed in an anonymous function with no global variables created.

###

# Local Shipping Service
LSS = {}

# GPS --------------------------------------------------------------------------
LSS.GPS = 
    Region: 
        town: { top: '0px' }
        
    Route:
        mainRoad: 
            north: { top: '10px' }
            south: { top: '460px' }
            east:  { left: '395px' }
            west:  { left: '45px' }
            
    Depot:
        mainDepot: { top: '110px' }
        
 ...