My interview!

campaign-viewer.css

#campaignViewer{
	width: 100%;
	height: 100%;
	margin-top: 20px;
}

th{
	text-align: center;
}

td{
	vertical-align: middle;
}

.vcenter{
	text-align: center;
}

#campaignsSection{
	width: 70%;
	float: right;
	height: 100%;
	margin-right: 20px;
}

#dropdownChoose{
	width: 25%;
	height: 200px;
	float: left;
}

.dropdownHeader{
	float: left;
	height: 50px;
	font-size: 17px;
	font-size: 17px;
	width: 30%;
	text-align: center;
	padding-top: 5px;
}

.dropdown{
	float: right;
}

.dropdownrow{
	width: 100%;
	height: 30%;
}

.button{
	color: #fff;
	background-color: #428bca;
	border-color: #357ebd;
}

.saveButton{
	float: right;
}

.campaignID{
	display:none;
}

campaign-viewer.js

! function ($) {
    'use strict';

    //api_token
    var api_token = '866045072c359813239ac2d3c6b750cddb4c701b',
        savedSuccess = false,
        savedFailed = false,

        //Get all of the agencies and populate the agencies drop down
        GetAgencies = function () {
            var url = 'http://challenge.mediamath.com/api/agencies?api_token=' + api_token;
            $.get(url, function (data) {
                for (var i = 0; i < data.agencies.length; i++)
                    $("#agencySelect").append("<option value='" + data.agencies[i].name + "' id='" + data.agencies[i]._id + "'>" + data.agencies[i].name + "</option>");

                $('.selectpicker').selectpicker('refresh');
                $("#agencySelect").change(function () {
                    var id = $("#agencySelect option:selected").attr('id');
                    GetAdvertisers(id);
                });
            });
        },

        //Gets all of the advertisers and populates the advertisers drop down
        GetAdvertisers = function (id) {
            var url = 'http://challenge.mediamath.com/api/advertisers?api_token=' + api_token + '&agency_id=' + id;
            $.get(url, function (data) {
                $('#advertiserSelect')
                    .find('option')
                    .remove()
                    .end()
                    .append('<option value="defaultOption">Choose an advertiser...</option>');

                for (var i = 0; i < data.advertisers.length; i++)
                    $("#advertiserSelect").append("<option value='" + data.advertisers[i].name + "' id='" + data.advertisers[i]._id + "'>" + data.advertisers[i].name + "</option>");

                $('.selectpicker').selectpicker('refresh');
            });
        },

        //Gets all of the campaigns and uses the table template to populate the tables
        GetCampaigns = function (adId) {
            var url = 'http://challenge.mediamath.com/api/campaigns?api_token=' + api_token + '&advertiser_id=' + adId;
            $.get(url, function (data) {
                $("#campaignsTableSection").html("");
                $(".datepicker").remove();

                var campaignsTemplate = _.template($("#campaignsTableTemplate").text());
                var html = campaignsTemplate({
                    'campaigns': data.campaigns
                });
                $("#campaignsTableSection").html(html);
                $("#campaignsSection").show();
                $(".selectpicker").selectpicker();
                $(".datepicker").datepicker();
                BindOverallCheckButton();
            });
        },

        //Set up the first checkbox
        //If user checks this, all of the checkboxes in the data rows will be checked
        //If user unchecks this, all of the checkboxes in the data rows will be unchecked
        BindOverallCheckButton = function () {
            $("#overallCheckBox").click(function () {
                if ($("#overallCheckBox")[0].checked == true) {
                    $('#campaignsTable tr').each(function (i, row) {
                        if (i > 0) {
                            var $row = $(row),
                                $checkBox = $row.find(".vcenter");
                            $checkBox.find(".selectBox")[0].checked = true;
                        }
                    });
                } else {
                    $('#campaignsTable tr').each(function (i, row) {
                        if (i > 0) {
                            var $row = $(row),
                                $checkBox = $row.find(".vcenter");
                            $checkBox.find(".selectBox")[0].checked = false;
                        }
                    });
                }
            });
        },

        //Check for the rows that are checked by the user
        //Get the data values of the cells in each row
        //Post the data back to the API
        //Alert user for success or failure
        SaveCampaigns = function () {
            savedSuccess = false;
            savedFailed = false;
            var data = "", 
                savedRows = false;
            $('#campaignsTable tr').each(function (i, row) {
                if (i > 0) {
                    if ($(this).find(".modifyItem")[0].checked == true) {
                        savedRows = true;
                        var id = $(this).find(".campaignID").text(),
                            name = $(this).find(".campaignName").val(),
                            status = 'false',
                            budget = $(this).find(".campaignBudget").val(),
                            startDate = $(this).find(".campaignStartDate").val(),
                            endDate = $(this).find(".campaignEndDate").val(),
                            url = "http://challenge.mediamath.com/api/campaigns/" + id + "?&api_token=" + api_token;
                        
						if ($(this).find(".campaignStatus").val() == "Active")
                            status = 'true';
                        
						var data = {
                            "name": name,
                            "budget": budget,
                            "end_date": endDate,
                            "start_date": startDate,
                            "status": status
                        };

                        $.post(url, data).done(function (result) {
                            if (result.status == 'ok')
                                SuccessAlert();
                            else
                                FailedAlert();
                        });

                    }
                }
            });

            if (!savedRows)
                NoRowsSelected();
        },

        //Custom alert function for success
        SuccessAlert = function () {
            if (!savedSuccess) {
                bootbox.dialog({
                    message: "All selected creatives have been successfully updated!",
                    title: "Success!",
                    buttons: {
                        success: {
                            label: "Ok",
                            className: "btn-success",
                            callback: function () {
                                var adId = $("#advertiserSelect option:selected").attr('id');
                                GetCampaigns(adId);
                            }
                        }
                    }
                });
                savedSuccess = true;
            }
        },

        //Custom alert function for failure
        FailedAlert = function () {
            if (!savedFailed) {
                bootbox.dialog({
                    message: "There was an error saving your campaigns!",
                    title: "Error!",
                    buttons: {
                        success: {
                            label: "Ok",
                            className: "btn-danger"
                        }
                    }
                });
                savedFailed = true;
            }
        },

        //Custom alert function for no agencies selected in the dropdown
        NoAgencyChosen = function () {
            bootbox.dialog({
                message: "Please choose an Agency and an Advertiser!",
                title: "Error!",
                buttons: {
                    success: {
                        label: "Ok",
                        className: "btn-danger"
                    }
                }
            });
        },

        //Custom alert function for no rows checked in the campaigns table
        NoRowsSelected = function () {
            bootbox.dialog({
                message: "Please check the campaign for you to save any changes!",
                title: "Warning!",
                buttons: {
                    success: {
                        label: "Ok",
                        className: "btn-danger"
                    }
                }
            });
        };

    //bind the button events and initialize the dropdowns
    $(function () {
        $("#campaignsSection").hide();
        GetAgencies();
        $(".selectpicker").selectpicker();
        $("#getCampaigns").click(function () {
            var adId = $("#advertiserSelect option:selected").attr('id'),
                agId = $("#agencySelect option:selected").attr("id");
            if (adId == null || agId == null)
                NoAgencyChosen();
            else
                GetCampaigns(adId);
        });
        $("#saveCampaigns").click(function () {
            SaveCampaigns();
        });
    })

}(window.jQuery);

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Campaign Viewer</title>
        <!-- 3rd party libraries -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/third-party/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/third-party/bootstrap-select.js"></script>
        <script type="text/javascript" src="js/third-party/bootstrap-datepicker.js"></script>
        <script type="text/javascript" src="js/third-party/underscore-min.js"></script>
        <script type="text/javascript" src="js/third-party/bootbox.min.js"></script>
        <link href="css/third-party/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/third-party/bootstrap-select.css">
        <link rel="stylesheet" type="text/css" href="css/third-party/datepicker.css">
        <!-- my own -->
        <script type="text/javascript" src="js/campaign-viewer.js"></script>
        <link rel="stylesheet" type="text/css" href="css/campaign-viewer.css">
        <script id="campaignsTableTemplate" type="text/html">
            <table id="campaignsTable" class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr id="headerRow">
                        <th style="width: 5%;"><input type="checkbox" class="selectBox" id="overallCheckBox"></th>
                        <th style="width: 25%;">Campaign Name</th>
                        <th style="width: 15%">Status</th>
                        <th style="width: 15%">Budget</th>
                        <th style="width: 20%">Start Date</th>
                        <th style="width: 20%">End Date</th>
                    </tr>
                </thead>
                <tbody class="campaigns-table-body">
                    <% for (var i = 0; i < campaigns.length; i++){ %>
                    <% var campaign = campaigns[i]; %>
                    <tr>
                        <td class="campaignID"><%= campaign._id %></td>
                        <td class="vcenter"><input type="checkbox" class="selectBox modifyItem"/></td>
                        <td><input type="text" class="form-control campaignName" value="<%= campaign.name %>"></td>
                        <td >
                            <select class="selectpicker campaignStatus" class="campaignSelect">
                                <% if (campaign.status == true){ %>
                                    <option value="Active" selected>Active</option>
                                    <option value="Inactive">Inactive</option>
                                <%} else{ %>
                                    <option value="Active">Active</option>
                                    <option value="Inactive" selected>Inactive</option>
                                <% } %>
                            </select>
                        </td>
                        <td><input type="text" class="form-control campaignBudget" value="<%= campaign.budget %>"></td>
                        <% var startDate = new Date(campaign.start_date); %>
                        <% finalStartDate = new Date(startDate.getTime() + startDate.getTimezoneOffset()*60000); %>
                        <% var formattedStartDate = (finalStartDate.getMonth() + 1) + "/" + finalStartDate.getDate() + "/" +  startDate.getFullYear(); %>
                        <td><input type="text" class="form-control datepicker campaignStartDate" value="<%= formattedStartDate %>"></td>
                        <% var endDate = new Date(campaign.end_date); %>
                        <% finalEndDate = new Date(endDate.getTime() + endDate.getTimezoneOffset()*60000); %>
                        <% var formattedEndDate = (finalEndDate.getMonth() + 1) + "/" + finalEndDate.getDate() + "/" +  endDate.getFullYear(); %>
                        <td><input type="text" class="form-control datepicker campaignEndDate" value="<%= formattedEndDate %>"></td>
                    </tr>
                    <% } %>
                </tbody>
            </table>
        </script>
    </head>
    <body>
        <div id="campaignViewer">
            <div id="dropdownChoose">
                <div class="dropdownrow">
                    <div class="dropdownHeader">Agency</div>
                    <div class="dropdown">
                        <select class="selectpicker" id="agencySelect">
                            <option value="defaultOption">Choose an agency...</option>
                        </select>
                    </div>
                </div>
                <div class="dropdownrow">
                    <div class="dropdownHeader">Advertiser</div>
                    <div class="dropdown">
                        <select class="selectpicker" id="advertiserSelect">
                            <option value="defaultOption">Choose an advertiser...</option>
                        </select>
                        <br>
                    </div>
                </div>
                <div class="dropdown">
                    <button type="button" class="button btn" id="getCampaigns">Get Campaigns</button>
                </div>
            </div>
            <div id="campaignsSection">
                <div id="campaignsTableSection"></div>
                <button type="button" class="button btn saveButton" id="saveCampaigns">Save</button>
            </div>
        </div>
    </body>
</html>