startup-systems · osawill · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016 · Sep 26, 2016
diff --git a/README.md b/README.md
@@ -1,3 +1,6 @@
+# Reddit Tiles
+Many posts on the funny reddit group are just pictures.  This mashup takes the posts and displays them in an image tile-layout so images are easier to preview and browse through.
+
 # Mashup project
 
 This project is open-ended!

diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,7 @@
+.headermessage {
+  margin: 19px;
+  color: black;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: bold;
+}
diff --git a/image/reddit.jpg b/image/reddit.jpg
diff --git a/index.html b/index.html
@@ -1,8 +1,56 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Mashup</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <!---Bootstrap-->
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+    <!--Angular
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script-->
+    <title>Reddit Tiles</title>
+    <!-- Custom-->
+    <link href="css/style.css" rel="stylesheet"/>
+<!--    <script src="js/app.js"></script>-->
+    <script>
+      $.ajax('https://www.reddit.com/r/funny/new/.json', {
+        success: function(data) {
+          console.log('Got:', data);
+          $(data.data.children).each(function(idx, val){
+            //val.title
+            //val.url
+            //'//reddit.com' + val.permalink
+            elm = "<div class='col-lg-3 col-md-4 col-xs-6 thumb'>" +
+                   "<a class='thumbnail' href='" + val.data.url + "'>" +
+                        "<img class='img-responsive' src='" + val.data.thumbnail + "' alt='No Image'>" +
+                    "</a>" +
+                  "<p>" + val.data.title + "</p>" +
+                "</div>";
+            $("#list").append(elm);
+          });
+        },
+        error: function(err) {
+          console.log('Got:', err);
+        }
+    });
+    </script>
   </head>
   <body>
+    <div>
+
+
+    <div class="container-fluid">
+        <div class="row text-center">
+            <h2 class="headermessage">Funny Reddit Posts</h2>
+        </div>
+        <div class="row" id="list">
+        </div>
+    </div>        
+
+    </div>
   </body>
 </html>
+<!--
+Source:
+http://www.prepbootstrap.com/bootstrap-template/responsive-image-tiles
+-->
diff --git a/js/app.js b/js/app.js