RANGER Front-End Test - Pt. 4

by lasha

HTML

<div class="item">
    Name: Customer Name<br>
    Email: [email protected]<br>
    etc...
</div>

CSS

.item {
    border: 1px solid #000;
}

JavaScript

/*
Using the array of objects containing customer info below, parse through each item and generate some sort of a "cards" UI where each card is floated, or displayed in separate rows. Choose a few keys from each customer, such as name, company, email, balance, and so forth to be included in each customer's card/row. Use any library or tool you deem necessary for the task.
-- Get as create as you'd like with the design, as well as UI/interactions, etc.
*/

var customerData = [
    {
        "id": 0,
        "guid": "3a758a72-97fe-496d-8e75-23cf20464461",
        "isActive": false,
        "balance": "$2,363.00",
        "picture": "http://placehold.it/32x32",
        "age": 26,
        "name": "Silva Goodwin",
        "gender": "male",
        "company": "Pheast",
        "email": "[email protected]",
        "phone": "+1 (970) 452-3592",
        "address": "691 Dover Street, Sardis, Pennsylvania, 8015",
        "about": "Adipisicing duis dolor excepteur mollit enim ea sint aliquip. Amet tempor consectetur non duis voluptate. Voluptate deserunt culpa elit nisi aliquip duis consequat eiusmod deserunt irure sunt cupidatat. Dolore mollit aliqua do consectetur excepteur culpa ex nisi id nostrud velit. Non duis consectetur exercitation ea cupidatat magna. Laboris enim est excepteur fugiat do eu occaecat eiusmod consectetur nisi consequat sint proident nisi.\r\n",
        "registered": "2013-04-06T04:22:03 +04:00",
        "latitude": 32.505139,
        "longitude": -92.013133,
        "tags": [
            "eu",
            "ad",
            "proident",
            "quis",
            "proident",
            "nisi",
            "pariatur"
        ],
        "friends": [
            {
                "id": 0,
                "name": "Wilder Potts"
            },
            {
                "id": 1,
                "name": "Carey Odom"
            },
            {
                "id": 2,
                "name": "Ray Strong"
            }
        ],
       ...