JSFiddle - React, Tailwind, and code Playground

by ephekt

HTML

<html>
    <body>
    <div class="delivery-truck"></div>

    <div class="depot"></div>


    <div id="house" class="delivery-address"></div>

    <div id="office" class="delivery-address"></div>

    <div id="factory" class="delivery-address"></div>
   </body>
</html>

CSS

body
{
    background: #000;
}
.delivery-truck
{
    background:#cccccc;
    height: 30px;
    position: absolute;
    width: 30px;
}
.depot
{
    background: #ccc;
    border: 3px dashed #666;
    height: 150px;
    left: 300px;
    position: absolute;
    top: 200px;
    width: 150px;
}
.delivery-address
{
    border: 3px dashed yellow;
    position: absolute;
}
.parcel
{
    background: white;
    border: 2px solid red;
    display: block;
    height: 5px;
    width: 5px;
}
#house
{
    background: #663300;
    height: 50px;
    left: 700px;
    top: 340px;
    width: 50px;
}
#office
{
    background: white;
    height: 150px;
    left: 650px;
    top: 100px;
    width: 80px;
}
#factory
{
    background: grey;
    height: 60px;
    left: 600px;
    top: 500px;
    width: 160px;
}

JavaScript

/*
    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. 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.

    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.

    * Minimize the likelihood of clashes with other scripts that may be used in the page.
    */