new branch

index.html

@@ -4,6 +4,9 @@
      <meta charset="UTF-8">
      <title>TEST JSON Server</title>
      <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
+     <link rel="stylesheet" href="styles/main.css">
+     <!-- Custom CSS for the '4 Col Portfolio' Template -->
+     <link href="css/4-col-portfolio.css" rel="stylesheet">     
      <script src='javascript/jquery.min.js'></script>
      <script src='javascript/jquery.tmpl.min.js'></script>
 </head>
@@ -19,10 +22,12 @@
 				<img class="media-object dp img-circle" src="http://lorempixel.com/100/100/" style="width: 100px;height:100px;">
             </a>
             <div class="media-body">
-                <h4 class="media-heading">${subject}</h4>
+                <h4 class="media-heading"> ${subject} </h4>
+
                 <h5>${date}</h5>
+                <button id="subject" data-id="${id}" class="btn btn-danger">Read More</button>
                 <hr style="margin:8px auto">
-
+                
                 <span class="label label-default">HTML5/CSS3</span>
                 <span class="label label-default">jQuery</span>
                 <span class="label label-info">CakePHP</span>

javascript/main.js

@@ -1,14 +1,30 @@
-(function($){
+(function($) {
     $.ajax({
-     dataType: 'json',
-     header: {'Content-Type': 'application/json'},
-     crossDomain: true,
-     url: 'http://booklog.io/1/post',
-     success: function(response){
-                  $('#postTemplate')
-                        .tmpl(response.posts)
-                        .appendTo('#content');
+        dataType: 'json',
+        url: 'http://booklog.io/1/post',
+        success: function(response, jqXHR, textStatus) {
+            $('#postTemplate')
+                .tmpl(response.posts)
+                .appendTo('#content');
+        },
+        complete: function(jqXHR, textStatus) {
+            $('[id=subject]').each(function(index) {
+                var me = $(this);
+
+                me.on('click', function() {
+                    var id = me.data('id');
+
+                    $.ajax({
+                        dataType: 'json',
+                        url: 'http://booklog.io/1/post/' + id,
+                        success: function(response, jqXHR, textStatus) {
+                            $('#content').html('<h2>' 
+                                + response.post.content 
+                                + '</h2>');
+                        },
+                    });
+                });
+            });
         }
     });
-
- }) ($);
+}) ($);

javascript/mainbad.cs

@@ -0,0 +1,30 @@
+(function($) {
+    $.ajax({
+        dataType: 'json',
+        url: 'http://booklog.io/1/post',
+        success: function(response, jqXHR, textStatus) {
+            $('#postTemplate')
+                .tmpl(response.posts)
+                .appendTo('#content');
+        },
+        complete: function(jqXHR, textStatus) {
+            $('[id=subject]').each(function(index) {
+                var me = $(this);
+
+                me.on('click', function() {
+                    var id = me.data('id');
+
+                    $.ajax({
+                        dataType: 'json',
+                        url: 'http://booklog.io/1/post/' + id,
+                        success: function(response, jqXHR, textStatus) {
+                            $('#content').html('<h2>' 
+                                + response.post.content 
+                                + '</h2>');
+                        },
+                    });
+                });
+            });
+        }
+    });
+}) ($);

stylesheets/4-col-portfolio.css

@@ -0,0 +1,11 @@
+body {
+	margin-top: 50px; /* 50px is the height of the navbar - change this if the navbarn height changes */
+}
+
+.portfolio-item {
+	margin-bottom: 25px;
+}
+
+footer {
+	margin: 50px 0;
+}