Design Interview 3

Using CSS and JS, have the browser render something as close as possible to the included image.

by sffriend

HTML

<!-- Open this image in a new tab/window:

https://s3.amazonaws.com/ridingtheclutch.com/images/ajax_experts.png

Given that you have jQuery available, and the HTML already in place, output the data returned from the included AJAX call and format it to appear as close as possible to the image. You cannot change the HTML. You can add CSS and Javascript (although you shouldn't need to change the $.post() that's already included). 

To submit your answer, click "Fork" above and give us the URL. -->

<!-- Included HTML starts here -->

<div id="experts"></div>
    
<script id="expert_template" type="text/template">
    <div id="expert_#{id}" class="expert">
        <img src="#{photo}">
        <h1>#{name}</h1>
        <h2>#{price}</h2>
    </div>
</script>

CSS

/* CSS here */

JavaScript

$.post('/echo/json/', {
    json:JSON.stringify({
        experts:[
            {id:1,name:"Rob Cameron",photo:"http://placekitten.com/350/350",price:100.00},
            {id:2,name:"Jeremy Thomas",photo:"http://placekitten.com/325/325",price:75.00},
            {id:3,name:"Geoff Skow",photo:"http://placekitten.com/300/300",price:50.00}
        ]
    })
}).done(function( data ) {
    $.each(data.experts, function(key, value){
      var html = $("#expert_template").html();
      html = html.replace("#{id}", value.id)
      					.replace("#{photo}", value.photo)
      					.replace("#{name}", value.name)
        				.replace("#{price}", value.price);
      $("#experts").append(html);
    });
  });