SIAL Front End Developer Test

by Nabaraj Saha

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--
INSTRUCTIONS:
1) Fork this Fiddle
2) Recreate the provided wireframe using HTML, CSS, and Jquery per instructions
3) Run & Update
3) Submit the finished URL to https://docs.google.com/forms/d/1cMAKfbX6qsX-9WmdqfRru4JBUGJc2sjUZUZmkTjDGsc/viewform
 -->

<body>
    <div class="container">
  <div class="row">
    <div class="rightContent col-lg-10">
      <div class="chBox bg-info">
        <form>
<label for="pending">
          <input type="checkbox" value="pending" name="pending">
          Pending</label>
        <label for="Approved">
          <input type="checkbox" value="approved" name="approved">
          Approved</label>
        <label for="denied">
          <input type="checkbox" value="denied" name="denied">
          Denied</label>
</form>
      </div>
      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="dataTable table table-striped table-hover">
        <tr>
          <th>Title</th>
          <th>Status</th>
          <th>Created At</th>
          <th>Started At</th>
        </tr>
      </table>
    </div>
    <div class="sideBar jumbotron col-lg-2"></div>
  </div>
</div>
</body>

CSS

/* Add CSS rules here */
.status {
	text-transform: capitalize;
}
.dataTable th {
	border-bottom: #333 1px dashed;
	text-align: center;
}
.dataTable td {
	text-align: center;
}
.sideBar {
	height: 300px;
	
}
.chBox{
	padding:25px;
	text-align:center;
	margin-bottom:25px;
	}
.chBox label{
	margin:0 15px;
	}

JavaScript

var jsonString = '{"results":[{"title":"Request for Water","updated_at":"2014-02-15 12:27:01 -0600","created_at":"2014-02-01 12:27:01 -0600","status":"Denied"},{"title":"Query for Brian","updated_at":"2014-02-28 20:04:18 -0600","created_at":"2014-01-28 20:04:18 -0600","status":"Pending"},{"title":"Request for Water","updated_at":"2014-02-09 04:41:23 -0600","created_at":"2014-01-03 04:41:23 -0600","status":"Approved"},{"title":"Request for David","updated_at":"2014-02-24 20:06:55 -0600","created_at":"2014-02-23 20:06:55 -0600","status":"Approved"},{"title":"Order for Charles","updated_at":"2014-01-24 18:24:13 -0600","created_at":"2013-12-29 18:24:13 -0600","status":"Denied"},{"title":"Order for Patrick","updated_at":"2014-02-14 15:52:20 -0600","created_at":"2014-01-22 15:52:20 -0600","status":"Denied"},{"title":"Order for Ether","updated_at":"2014-03-05 12:26:52 -0600","created_at":"2014-02-08 12:26:52 -0600","status":"Pending"},{"title":"Query for Brian","updated_at":"2014-01-19 07:58:00 -0600","created_at":"2013-12-28 07:58:00 -0600","status":"Denied"},{"title":"Request for Water","updated_at":"2014-02-21 06:13:25 -0600","created_at":"2014-01-05 06:13:25 -0600","status":"Pending"},{"title":"Order for Ether","updated_at":"2014-02-23 07:12:01 -0600","created_at":"2014-01-18 07:12:01 -0600","status":"Approved"},{"title":"Query for Ether","updated_at":"2014-01-07 10:56:50 -0600","created_at":"2013-11-23 10:56:50 -0600","status":"Pending"},{"title":"Request for Ether","updated_at":"2014-01-27 17:45:26 -0600","created_at":"2014-01-12 17:45:26 -0600","status":"Approved"},{"title":"Order for Charles","updated_at":"2014-03-01 15:06:10 -0600","created_at":"2014-02-04 15:06:10 -0600","status":"Approved"},{"title":"Order for Matt","updated_at":"2014-01-11 05:20:02 -0600","created_at":"2013-11-26 05:20:02 -0600","status":"Approved"},{"title":"Request for Patrick","updated_at":"2014-02-20 05:59:31 -0600","created_at":"2014-02-05 05:59:31 -0600","status":"Pending"}]}';

var...