Filling HTML from JavaScript & objects

Done for a colleague.

by lun471k

HTML

<header>
    <img id="companyLogo" src="" />
    <div id="companyCoordinates"></div>
    <div id="projectCoordinates"></div>
</header>

CSS

header {
    width:100%;
    height:200px;
    background-color:#EEE;
    font-family:"Open Sans", sans-serif;
    /* Bonus sexy stuff */
    box-shadow:1px 1px 5px #777;
    border-radius:6px;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    cursor:default;
}
header img {
    border-right:6px solid #CCC;
}
header > * {
    vertical-align:top;
}
header div {
    display:inline-block;
    height:98%;
    width:30%;
    margin: 0 auto;
}
#companyCoordinates {
    padding-right:5px;
    border-right:2px solid #CCC;
}
div div {
    display:block;
    height: auto;
    width:auto;
    text-align:center;
}

JavaScript

var company = {}, project = {};

    /* Get the company data through an AJAX call */

    //company.rawData = $.get('ajax-getCompanyCoordinates.php?idCompany=999',function (data){ return data;},'JSON');

    /* Process the company data within an object variable */
    /*
    for(var field in company.rawData[0]) {
        company.fields[field] = company.rawData[0][field];
    }
    */

    /* repeat the same process for the project details */

    /* Static data for the sake of this example */
    company = {
        "name": "Bravad",
        "address": "1212 boulevard rose",
        "city": "Sherbrooke",
        "logo": "http://bravad.ca/wp-content/themes/bravad/images/facebook-share.jpg"
    };

    project.name = "Projet 4";
    project.address = "123 rue des chemins";


    /* Fill the HTML template with content */
    $('#companyLogo').prop('src', company.logo);

    /* Company coordinates */
    $('#companyCoordinates').html('<span>' + company.address + ", " + company.city + '</span>');

    /* Project coordinates */
    $('#projectCoordinates').html('<div>' + project.name + '</div><div>' + project.address + '</div>');