From 5da5c59c672c9b56c74f8f9cf65bfdc0c4076f6d Mon Sep 17 00:00:00 2001 From: Osasu Eboh Date: Mon, 26 Sep 2016 15:15:27 -0400 Subject: [PATCH 1/5] Initial page --- image/reddit.jpg | Bin 0 -> 4917 bytes index.html | 17 ++++++++++++++++- js/app.js | 14 ++++++++++++++ 3 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 image/reddit.jpg create mode 100644 js/app.js diff --git a/image/reddit.jpg b/image/reddit.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b33e0027bf79f745342920bb71a5a26e1db0e823 GIT binary patch literal 4917 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 + + + + + Mashup + + - + +

Reddit Funny Posts

+
diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..d622b84 --- /dev/null +++ b/js/app.js @@ -0,0 +1,14 @@ +test = []; +angular.module('myApp', []) + + .controller("mainCtrl", function ($http, $scope) { + $scope.stories = []; + + $http.get('https://www.reddit.com/r/funny/new/.json') + .success(function(response) { + angular.forEach(response.data.children, function(child) { + $scope.stories.push(child.data); + }); + test = $scope.stories[0]; + }); +}); \ No newline at end of file From 853525b903c6add8a7a2152c555bdeb9f649bb68 Mon Sep 17 00:00:00 2001 From: Osasu Eboh Date: Mon, 26 Sep 2016 17:48:38 -0400 Subject: [PATCH 2/5] Reddit posts to tiles --- css/style.css | 7 +++++++ index.html | 33 +++++++++++++++++++++++++-------- js/app.js | 15 ++++++++++++++- 3 files changed, 46 insertions(+), 9 deletions(-) create mode 100644 css/style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..aad5bdd --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/index.html b/index.html index 506dc7a..1130951 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,40 @@ + + Mashup - + + -

Reddit Funny Posts

-
+
+
+ + + +

{{story.title}}

 +
+
+ + + + diff --git a/js/app.js b/js/app.js index d622b84..566ff82 100644 --- a/js/app.js +++ b/js/app.js @@ -7,8 +7,21 @@ angular.module('myApp', []) $http.get('https://www.reddit.com/r/funny/new/.json') .success(function(response) { angular.forEach(response.data.children, function(child) { + //child.data.style = {"background": "url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city1.jpg) no-repeat center top","background-size":"cover";}; $scope.stories.push(child.data); }); test = $scope.stories[0]; }); -}); \ No newline at end of file + }) + + .directive('backImg', function(){ + return function(scope, element, attrs){ + var url = attrs.backImg; + element.css({ + 'background-image': 'url(' + url +')', + 'background-size' : 'cover' + }); + }; +}) + +; \ No newline at end of file From 39df506c457743d7c0ed946dab5673dc474798b8 Mon Sep 17 00:00:00 2001 From: Osasu Eboh Date: Mon, 26 Sep 2016 18:21:22 -0400 Subject: [PATCH 3/5] Update --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1130951..26cc435 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,11 @@ - + - + Mashup From 3d31c2d51518d75afb2f622b33ff3822a05b8f5f Mon Sep 17 00:00:00 2001 From: Osasu Eboh Date: Tue, 27 Sep 2016 19:13:55 -0400 Subject: [PATCH 4/5] Switched to pure jQuery for assignment --- README.md | 3 +++ index.html | 22 ++++++++-------------- js/app.js | 47 ++++++++++++++++++++--------------------------- 3 files changed, 31 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 8501e40..8850b6d 100644 --- 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/index.html b/index.html index 26cc435..096da24 100644 --- a/index.html +++ b/index.html @@ -6,35 +6,29 @@ - - - Mashup + + Reddit Tiles - -
+ +

Funny Reddit Posts

-
-
- - - -

{{story.title}}

 -
+
- +--> diff --git a/js/app.js b/js/app.js index 566ff82..f52ba0e 100644 --- a/js/app.js +++ b/js/app.js @@ -1,27 +1,20 @@ -test = []; -angular.module('myApp', []) - - .controller("mainCtrl", function ($http, $scope) { - $scope.stories = []; - - $http.get('https://www.reddit.com/r/funny/new/.json') - .success(function(response) { - angular.forEach(response.data.children, function(child) { - //child.data.style = {"background": "url(http://www.prepbootstrap.com/Content/images/template/ResponsiveImageTiles/city1.jpg) no-repeat center top","background-size":"cover";}; - $scope.stories.push(child.data); - }); - test = $scope.stories[0]; - }); - }) - - .directive('backImg', function(){ - return function(scope, element, attrs){ - var url = attrs.backImg; - element.css({ - 'background-image': 'url(' + url +')', - 'background-size' : 'cover' - }); - }; -}) - -; \ No newline at end of file +$.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 = "
" + + "" + + "No Image" + + "" + + "

" + val.data.title + "

" + + "
"; + $("#list").append(elm); + }); + }, + error: function(err) { + console.log('Got:', err); + } +}); \ No newline at end of file From c97a2ff0bccb04f0ff024e0499bffa4cac39bcd4 Mon Sep 17 00:00:00 2001 From: Osasu Eboh Date: Tue, 27 Sep 2016 19:29:59 -0400 Subject: [PATCH 5/5] Remove external js file --- index.html | 24 +++++++++++++++++++++++- js/app.js | 20 -------------------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 096da24..0c6c3d4 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,29 @@ Reddit Tiles - + +
diff --git a/js/app.js b/js/app.js index f52ba0e..e69de29 100644 --- a/js/app.js +++ b/js/app.js @@ -1,20 +0,0 @@ -$.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 = "
" + - "" + - "No Image" + - "" + - "

" + val.data.title + "

" + - "
"; - $("#list").append(elm); - }); - }, - error: function(err) { - console.log('Got:', err); - } -}); \ No newline at end of file