Picture Puzzle

by amyseqmedia

HTML

<!-- This would be given -->

<div class="the-picture-frame">
    <div class="piece" data-position="20,0" data-dimensions="40,80" data-color="#ee0"></div>
    <div class="piece" data-position="10,10" data-dimensions="60,60" data-color="#ee0"></div>
    <div class="piece" data-position="0,20" data-dimensions="80,40" data-color="#ee0"></div>
    <div class="piece" data-position="20,20" data-dimensions="10,20" data-color="#000"></div>
    <div class="piece" data-position="50,20" data-dimensions="10,20" data-color="#000"></div>
    <div class="piece" data-position="20,50" data-dimensions="40,10" data-color="#000"></div>
    <div class="piece" data-position="30,60" data-dimensions="20,10" data-color="#000"></div>
</div>

CSS

/* The candidate would have to type this */

.piece {
    position: absolute;
}

/* This would be given */

.the-picture-frame {
    border: 10px solid #cec;
    background: #fff;
    position: relative;
    width: 80px;
    height: 80px;
}

JavaScript

/* The candidate would have to type this */
function decodeThis() {
    $(".piece").each(function(){
        var $piece = $(this);
        var position = $piece.data("position").split(",");
        var dimensions = $piece.data("dimensions").split(",");
        var color = $piece.data("color");
        
        $piece.css({
            left: position[0]+'px',
            top: position[1]+'px',
            width: dimensions[0],
            height: dimensions[1],
            background: color
        });
    });
}

/* This would be given */
decodeThis();