From d5a85ccf2e6be9efce964f58d58db3f56cfc131e Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Sun, 28 Feb 2016 23:09:28 -0500 Subject: [PATCH 1/5] Mashup Homework 1st Version. Needs lots of refactoring and styling too. --- index.html | 15 +++-- mashup.css | 21 +++++++ mashup.js | 162 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 193 insertions(+), 5 deletions(-) create mode 100644 mashup.css create mode 100644 mashup.js diff --git a/index.html b/index.html index 6524157..7ed2ce1 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,13 @@ - - Mashup - - - + + Mashup + + + + + +

Animal News

+

Are you an animal lover? Do you like to read about all things animal? Below are the latest articles about mammals, birds, reptiles, and so much more courtesy of The Guardian. Pick a category and read away!

+ diff --git a/mashup.css b/mashup.css new file mode 100644 index 0000000..91c3340 --- /dev/null +++ b/mashup.css @@ -0,0 +1,21 @@ +h1 { + color: #000066; +} +p { + color: #0000CC; +} +div.category { + height: 20px; + width: 60%; + border: 2px solid #000066; +} +div.category span { + display: inline-block; +} +div.category span.close { + visibility: hidden; + float: right; +} +#mammalnews,#birdnews,#reptilenews,#fishnews,#amphibiannews,#insectnews { + display: none; +} \ No newline at end of file diff --git a/mashup.js b/mashup.js new file mode 100644 index 0000000..96c2ba9 --- /dev/null +++ b/mashup.js @@ -0,0 +1,162 @@ +var Category = function(data) { + this.title = data.title; + this.elementId = data.elementId; + this.selectorId = '#' + data.elementId; + this.closeElementId = data.closeElementId; + this.closeSelectorId = data.closeSelectorId; + this.newsElementId = data.newsElementId; + this.newsSelectorId = data.newsSelectorId; +}; + +Category.prototype.genHtml = function() { + var htmlString = '
'; + htmlString += '' + this.title + ''; + htmlString += 'X
'; + htmlString +='
'; + return htmlString; +}; + +var genCategories = function() { + var categories = []; + var mammal = new Category({ + title: 'Mammal', + elementId: 'mammal', + closeElementId: 'mammalclose', + closeSelectorId: '#mammalclose', + newsElementId: 'mammalnews', + newsSelectorId: '#mammalnews' + }); + categories.push(mammal); + var bird = new Category({ + title: 'Bird', + elementId: 'bird', + closeElementId: 'birdclose', + closeSelectorId: '#birdclose', + newsElementId: 'birdnews', + newsSelectorId: '#birdnews' + }); + categories.push(bird); + var reptile = new Category({ + title: 'Reptile', + elementId: 'reptile', + closeElementId: 'reptileclose', + closeSelectorId: '#reptileclose', + newsElementId: 'reptilenews', + newsSelectorId: '#reptilenews' + }); + categories.push(reptile); + var fish = new Category({ + title: 'Fish', + elementId: 'fish', + closeElementId: 'fishclose', + closeSelectorId: '#fishclose', + newsElementId: 'fishnews', + newsSelectorId: '#fishnews' + }); + categories.push(fish); + var amphibian = new Category({ + title: 'Amphibian', + elementId: 'amphibian', + closeElementId: 'amphibianclose', + closeSelectorId: '#amphibianclose', + newsElementId: 'amphibiannews', + newsSelectorId: '#amphibiannews' + }); + categories.push(amphibian); + var insect = new Category({ + title: 'Insect', + elementId: 'insect', + closeElementId: 'insectclose', + closeSelectorId: '#insectclose', + newsElementId: 'insectnews', + newsSelectorId: '#insectnews' + }); + categories.push(insect); + return categories; +}; + +var setUp = function() { + var categories = genCategories(); + for (var i = 0; i < categories.length; i++) { + var category = categories[i]; + $('body').append(category.genHtml()); + $(category.closeSelectorId).click({newsSelectorId: category.newsSelectorId}, function(event) { + var newsSelectorId = event.data.newsSelectorId; + $(this).css('visibility','hidden'); + $(newsSelectorId).slideUp('slow'); + $(newsSelectorId).empty(); + }); + $(category.selectorId).click({ + title: category.title, + closeSelectorId: category.closeSelectorId, + newsSelectorId: category.newsSelectorId + }, function(event) { + var title = event.data.title; + var closeSelectorId = event.data.closeSelectorId; + var newsSelectorId = event.data.newsSelectorId; + if ( $(newsSelectorId).css('display') === 'none' ) { + $.ajax({ + url: "http://content.guardianapis.com/search?q=" + title + "&order-by=relevance&page-size=50&show-fields=thumbnail%2Cbyline&show-blocks=body&api-key=2700505f-b667-4f0a-adc0-b024f02abe57", + success: function(data) { + if (data.response.status !== "ok") { + $('body').append('

*** Issue with response from Guardian ***

'); + } else { + for (var i = 0; i < data.response.results.length && i < 10; i++ ) { + var result = data.response.results[i]; + if ( result.type === 'article') { + var thumbnail = result.fields.thumbnail; + $(newsSelectorId).append(''); + var title = result.webTitle; + $(newsSelectorId).append('

' + title + '

'); + var byLine = result.fields.byline; + $(newsSelectorId).append('

' + byLine + '

'); + var summary = result.blocks.body[0].bodyTextSummary.substring(0,400); + $(newsSelectorId).append('

' + summary + ' ...

'); + var articleUrl = result.webUrl; + $(newsSelectorId).append('Full Article'); + } + } + $(newsSelectorId).css('display','block'); + $(closeSelectorId).css('visibility','visible'); + } + } + }); + } + }); + } +}; + +$(document).ready(function() { + setUp(); + // $('.category').click(function() { + // var display = $('#mammalnews').css('display'); + // if ( display === 'none' ) { + // $.ajax({ + // url: "http://content.guardianapis.com/search?q=mammal&order-by=relevance&page-size=50&show-fields=thumbnail%2Cbyline&show-blocks=body&api-key=2700505f-b667-4f0a-adc0-b024f02abe57", + // success: function(data) { + // if (data.response.status !== "ok") { + // $('body').append('

*** Issue with response from Guardian ***

'); + // } else { + // for (var i = 0; i < data.response.results.length && i < 10; i++ ) { + // var result = data.response.results[i]; + // if ( result.type === 'article') { + // var thumbnail = result.fields.thumbnail; + // $('#mammalnews').append(''); + // var title = result.webTitle; + // $('#mammalnews').append('

' + title + '

'); + // var byLine = result.fields.byline; + // $('#mammalnews').append('

' + byLine + '

'); + // var summary = result.blocks.body[0].bodyTextSummary.substring(0,400); + // $('#mammalnews').append('

' + summary + ' ...

'); + // var articleUrl = result.webUrl; + // $('#mammalnews').append('Full Article'); + // } + // } + // $('#mammalnews').css('display','block'); + // $('#mammalclose').css('visibility','visible'); + // } + // } + // }); + // } + // }); +}); \ No newline at end of file From c3b09bf83606ab1b5bbae28d9544d4c3a8b2b1bc Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 1 Mar 2016 11:51:13 -0500 Subject: [PATCH 2/5] Mashup Homework Refactored. Still needs more refactoring. --- mashup.js | 181 ++++++++++++++++++++++++------------------------------ 1 file changed, 79 insertions(+), 102 deletions(-) diff --git a/mashup.js b/mashup.js index 96c2ba9..5e24c1e 100644 --- a/mashup.js +++ b/mashup.js @@ -1,11 +1,32 @@ -var Category = function(data) { - this.title = data.title; - this.elementId = data.elementId; - this.selectorId = '#' + data.elementId; - this.closeElementId = data.closeElementId; - this.closeSelectorId = data.closeSelectorId; - this.newsElementId = data.newsElementId; - this.newsSelectorId = data.newsSelectorId; +// Leave this in so, I can cut and past the URL to the browse +// http://content.guardianapis.com/search?q=Mammal&order-by=relevance&page-size=50&show-fields=thumbnail%2Cbyline&show-blocks=body&api-key=2700505f-b667-4f0a-adc0-b024f02abe57 + +var Url = function(title) { + this.endpoint = 'http://content.guardianapis.com/search'; + this.query = 'q=' + title; + this.orderBy = 'order-by=relevance'; + this.pageSize = 'page-size=50'; + this.showFields = 'show-fields=' + escape('thumbnail,byline'); + this.showBlocks = 'show-blocks=body'; + this.apiKey = 'api-key=2700505f-b667-4f0a-adc0-b024f02abe57'; +}; + +Url.prototype.fullUrl = function() { + var url = this.endpoint + '?' + this.query + '&' + this.orderBy + '&' + this.pageSize; + url += '&' + this.showFields + '&' + this.showBlocks + '&' + this.apiKey; + return url; +}; + +var Category = function(title) { + this.title = title; + this.elementId = title.toLowerCase(); + this.selectorId = '#' + this.elementId; + this.newsElementId = this.elementId + 'news'; + this.newsSelectorId = '#' + this.newsElementId; + this.closeElementId = this.elementId + 'close'; + this.closeSelectorId = '#' + this.closeElementId; + var url = new Url(title); + this.url = url.fullUrl(); }; Category.prototype.genHtml = function() { @@ -18,111 +39,67 @@ Category.prototype.genHtml = function() { var genCategories = function() { var categories = []; - var mammal = new Category({ - title: 'Mammal', - elementId: 'mammal', - closeElementId: 'mammalclose', - closeSelectorId: '#mammalclose', - newsElementId: 'mammalnews', - newsSelectorId: '#mammalnews' - }); - categories.push(mammal); - var bird = new Category({ - title: 'Bird', - elementId: 'bird', - closeElementId: 'birdclose', - closeSelectorId: '#birdclose', - newsElementId: 'birdnews', - newsSelectorId: '#birdnews' - }); - categories.push(bird); - var reptile = new Category({ - title: 'Reptile', - elementId: 'reptile', - closeElementId: 'reptileclose', - closeSelectorId: '#reptileclose', - newsElementId: 'reptilenews', - newsSelectorId: '#reptilenews' - }); - categories.push(reptile); - var fish = new Category({ - title: 'Fish', - elementId: 'fish', - closeElementId: 'fishclose', - closeSelectorId: '#fishclose', - newsElementId: 'fishnews', - newsSelectorId: '#fishnews' - }); - categories.push(fish); - var amphibian = new Category({ - title: 'Amphibian', - elementId: 'amphibian', - closeElementId: 'amphibianclose', - closeSelectorId: '#amphibianclose', - newsElementId: 'amphibiannews', - newsSelectorId: '#amphibiannews' - }); - categories.push(amphibian); - var insect = new Category({ - title: 'Insect', - elementId: 'insect', - closeElementId: 'insectclose', - closeSelectorId: '#insectclose', - newsElementId: 'insectnews', - newsSelectorId: '#insectnews' - }); - categories.push(insect); + categories.push(new Category('Mammal')); + categories.push(new Category('Bird')); + categories.push(new Category('Reptile')); + categories.push(new Category('Fish')); + categories.push(new Category('Amphibian')); + categories.push(new Category('Insect')); return categories; }; +var closeAction = function(event) { + $(this).css('visibility','hidden'); + $(event.data.newsSelectorId).slideUp('slow').empty(); +}; + +var getNewsAction = function(event) { + var newsSelectorId = event.data.newsSelectorId; + var closeSelectorId = event.data.closeSelectorId; + var fullUrl = event.data.url; + if ( $(newsSelectorId).css('display') === 'none' ) { + $.ajax({ + url: fullUrl, + success: function(data) { + if (data.response.status !== "ok") { + $('body').append('

*** Issue with response ***

'); + } else { + for (var i = 0; i < data.response.results.length && i < 10; i++ ) { + var result = data.response.results[i]; + if ( result.type === 'article' && result.fields !== undefined && result.fields.thumbnail !== undefined) { + var thumbnail = result.fields.thumbnail; + $(newsSelectorId).append(''); + var articleTitle = result.webTitle; + $(newsSelectorId).append('

' + articleTitle + '

'); + var byLine = result.fields.byline; + $(newsSelectorId).append('

' + byLine + '

'); + var summary = result.blocks.body[0].bodyTextSummary.substring(0,400); + $(newsSelectorId).append('

' + summary + ' ...

'); + var articleUrl = result.webUrl; + $(newsSelectorId).append('Full Article'); + } + } + $(newsSelectorId).css('display','block'); + $(closeSelectorId).css('visibility','visible'); + } + } + }); + } +}; + var setUp = function() { var categories = genCategories(); for (var i = 0; i < categories.length; i++) { var category = categories[i]; $('body').append(category.genHtml()); - $(category.closeSelectorId).click({newsSelectorId: category.newsSelectorId}, function(event) { - var newsSelectorId = event.data.newsSelectorId; - $(this).css('visibility','hidden'); - $(newsSelectorId).slideUp('slow'); - $(newsSelectorId).empty(); - }); $(category.selectorId).click({ - title: category.title, + newsSelectorId: category.newsSelectorId, closeSelectorId: category.closeSelectorId, + url: category.url + },getNewsAction); + $(category.closeSelectorId).click({ newsSelectorId: category.newsSelectorId - }, function(event) { - var title = event.data.title; - var closeSelectorId = event.data.closeSelectorId; - var newsSelectorId = event.data.newsSelectorId; - if ( $(newsSelectorId).css('display') === 'none' ) { - $.ajax({ - url: "http://content.guardianapis.com/search?q=" + title + "&order-by=relevance&page-size=50&show-fields=thumbnail%2Cbyline&show-blocks=body&api-key=2700505f-b667-4f0a-adc0-b024f02abe57", - success: function(data) { - if (data.response.status !== "ok") { - $('body').append('

*** Issue with response from Guardian ***

'); - } else { - for (var i = 0; i < data.response.results.length && i < 10; i++ ) { - var result = data.response.results[i]; - if ( result.type === 'article') { - var thumbnail = result.fields.thumbnail; - $(newsSelectorId).append(''); - var title = result.webTitle; - $(newsSelectorId).append('

' + title + '

'); - var byLine = result.fields.byline; - $(newsSelectorId).append('

' + byLine + '

'); - var summary = result.blocks.body[0].bodyTextSummary.substring(0,400); - $(newsSelectorId).append('

' + summary + ' ...

'); - var articleUrl = result.webUrl; - $(newsSelectorId).append('Full Article'); - } - } - $(newsSelectorId).css('display','block'); - $(closeSelectorId).css('visibility','visible'); - } - } - }); - } - }); + },closeAction); } }; From 91545e6f47110a86e19c7b3a175093ac7d152688 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 1 Mar 2016 12:57:35 -0500 Subject: [PATCH 3/5] Mashup Homework Refactored. Still needs more refactoring. --- mashup.js | 94 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 49 insertions(+), 45 deletions(-) diff --git a/mashup.js b/mashup.js index 5e24c1e..4b7b0a6 100644 --- a/mashup.js +++ b/mashup.js @@ -37,69 +37,73 @@ Category.prototype.genHtml = function() { return htmlString; }; -var genCategories = function() { - var categories = []; - categories.push(new Category('Mammal')); - categories.push(new Category('Bird')); - categories.push(new Category('Reptile')); - categories.push(new Category('Fish')); - categories.push(new Category('Amphibian')); - categories.push(new Category('Insect')); - return categories; +var displayErrMsg = function() { + $('#msg').remove(); + $('body').append('

*** Issue with response ***

'); }; -var closeAction = function(event) { - $(this).css('visibility','hidden'); - $(event.data.newsSelectorId).slideUp('slow').empty(); +var validArticle = function(article) { + return (article.fields !== undefined && article.fields.thumbnail !== undefined); }; -var getNewsAction = function(event) { +var displayArticle = function(event,article) { var newsSelectorId = event.data.newsSelectorId; - var closeSelectorId = event.data.closeSelectorId; - var fullUrl = event.data.url; - if ( $(newsSelectorId).css('display') === 'none' ) { + var thumbnail = article.fields.thumbnail; + $(newsSelectorId).append(''); + var articleTitle = article.webTitle; + $(newsSelectorId).append('

' + articleTitle + '

'); + var byLine = article.fields.byline; + $(newsSelectorId).append('

' + byLine + '

'); + var summary = article.blocks.body[0].bodyTextSummary.substring(0,400); + $(newsSelectorId).append('

' + summary + ' ...

'); + var articleUrl = article.webUrl; + $(newsSelectorId).append('Full Article'); +}; + +var displayNews = function(event,data) { + var count = 0; + for (var i = 0; i < data.response.results.length && count < 10; i++ ) { + switch (data.response.results[i].type) { + case 'article': + if ( validArticle(data.response.results[i]) ) { + count++; + displayArticle(event,data.response.results[i]); + } + break; + // add cases for other types + } + } + $(event.data.newsSelectorId).css('display','block'); + $(event.data.closeSelectorId).css('visibility','visible'); +}; + +var openHandler = function(event) { + if ( $(event.data.newsSelectorId).css('display') === 'none' ) { $.ajax({ - url: fullUrl, + url: event.data.url, success: function(data) { if (data.response.status !== "ok") { - $('body').append('

*** Issue with response ***

'); + displayErrMsg(); } else { - for (var i = 0; i < data.response.results.length && i < 10; i++ ) { - var result = data.response.results[i]; - if ( result.type === 'article' && result.fields !== undefined && result.fields.thumbnail !== undefined) { - var thumbnail = result.fields.thumbnail; - $(newsSelectorId).append(''); - var articleTitle = result.webTitle; - $(newsSelectorId).append('

' + articleTitle + '

'); - var byLine = result.fields.byline; - $(newsSelectorId).append('

' + byLine + '

'); - var summary = result.blocks.body[0].bodyTextSummary.substring(0,400); - $(newsSelectorId).append('

' + summary + ' ...

'); - var articleUrl = result.webUrl; - $(newsSelectorId).append('Full Article'); - } - } - $(newsSelectorId).css('display','block'); - $(closeSelectorId).css('visibility','visible'); + displayNews(event,data); } } }); } }; +var closeHandler = function(event) { + $(this).css('visibility','hidden'); + $(event.data.newsSelectorId).slideUp('slow').empty(); +}; + var setUp = function() { - var categories = genCategories(); + var categories = ['Mammal','Bird','Reptile','Fish','Amphibian','Insect']; for (var i = 0; i < categories.length; i++) { - var category = categories[i]; + var category = new Category(categories[i]); $('body').append(category.genHtml()); - $(category.selectorId).click({ - newsSelectorId: category.newsSelectorId, - closeSelectorId: category.closeSelectorId, - url: category.url - },getNewsAction); - $(category.closeSelectorId).click({ - newsSelectorId: category.newsSelectorId - },closeAction); + $(category.selectorId).click(category,openHandler); + $(category.closeSelectorId).click(category,closeHandler); } }; From 3fc8bdf1964627df667aa989bb19538844025fd0 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 1 Mar 2016 21:21:19 -0500 Subject: [PATCH 4/5] Mashup Homework Styled and refactored for now. --- index.html | 14 ++++++- mashup.css | 81 ++++++++++++++++++++++++++++++++---- mashup.js | 119 +++++++++++++++++++++++++++-------------------------- 3 files changed, 146 insertions(+), 68 deletions(-) diff --git a/index.html b/index.html index 7ed2ce1..9afa8f5 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,23 @@ - + + Mashup + + +

Animal News

-

Are you an animal lover? Do you like to read about all things animal? Below are the latest articles about mammals, birds, reptiles, and so much more courtesy of The Guardian. Pick a category and read away!

+

Are you an animal lover?

+

Do you like to read about all things animal?

+

Behind each category is a list of articles courtesy of The Guardian.

+

Click on a category and read away!

+
+
+
diff --git a/mashup.css b/mashup.css index 91c3340..5abaeab 100644 --- a/mashup.css +++ b/mashup.css @@ -1,21 +1,88 @@ -h1 { +body { + font-family: Frutiger,"Frutiger Linotype",Univers,Calibri,"Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif; color: #000066; } p { color: #0000CC; } +header { + padding-bottom: 20px; +} +header h1 { + font-family: 'Lobster', cursive; + font-size: 50px; + text-align: center; +} +header p { + width: 90%; + margin: 0 auto; + font-size: 18px; + text-align: center; +} div.category { - height: 20px; - width: 60%; - border: 2px solid #000066; + width: 90%; + margin: 0 auto; + font-size: 30px; + border: 1px solid #000066; + background-color: #ffffb3; +} +div.category span.open { + padding-left: 10px; + cursor: pointer; } -div.category span { - display: inline-block; +div.category span.open:hover { + letter-spacing: 10px; } div.category span.close { + font-family: 'PT Sans', sans-serif; + padding-right: 10px; visibility: hidden; float: right; + cursor: pointer; } -#mammalnews,#birdnews,#reptilenews,#fishnews,#amphibiannews,#insectnews { +section[id*="news"] { + width: 90%; + margin: 0 auto; display: none; + position:relative; +} +section[id*="news"] article { + margin-top: 20px; + margin-bottom: 20px; +} +section[id*="news"] h2 { + margin-bottom: 10px; +} +section[id*="news"] h3 { + color: #0000b3; + margin-top: 4px; + margin-bottom: 4px; +} +section[id*="news"] div.separator { + width: 50%; + border-bottom: 1px solid #000066; +} +section[id*="news"] img { + border: #e1e1ea solid 5px; + box-shadow: 4px 4px 5px #999999; + margin: 16px; + float:left; +} +section[id*="news"] a { + padding-left: 10px; + padding-right: 10px; + color: #3d3d5c; + text-decoration: none; +} +section[id*="news"] a:hover { + border-radius: 6px; + color: #ffffff; + background-color: #3d3d5c; +} +.clear:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; } \ No newline at end of file diff --git a/mashup.js b/mashup.js index 4b7b0a6..7c0175e 100644 --- a/mashup.js +++ b/mashup.js @@ -30,34 +30,58 @@ var Category = function(title) { }; Category.prototype.genHtml = function() { - var htmlString = '
'; - htmlString += '' + this.title + ''; + var htmlString = '
'; + htmlString += '' + this.title + ''; htmlString += 'X
'; - htmlString +='
'; + htmlString +='
'; return htmlString; }; -var displayErrMsg = function() { - $('#msg').remove(); - $('body').append('

*** Issue with response ***

'); +var ArticleDate = function(dateString) { + this.date = new Date(dateString) +}; + +ArticleDate.prototype.toArticleDateString = function() { + return((this.date.getMonth() + 1) + '/' + this.date.getDate() + '/' + this.date.getFullYear()); +}; + +var Article = function(article) { + this.article = article; +}; + +Article.prototype.valid = function() { + return (this.article.fields !== undefined && this.article.fields.thumbnail !== undefined); +}; + +Article.prototype.byLine = function() { + var byLine = this.article.fields.byline; + if ( byLine === undefined ) { + byLine = 'theguardian.com'; + } + return byLine; }; -var validArticle = function(article) { - return (article.fields !== undefined && article.fields.thumbnail !== undefined); +Article.prototype.articleDate = function() { + var articleDate = new ArticleDate(this.article.webPublicationDate); + return articleDate.toArticleDateString(); }; -var displayArticle = function(event,article) { - var newsSelectorId = event.data.newsSelectorId; - var thumbnail = article.fields.thumbnail; - $(newsSelectorId).append(''); - var articleTitle = article.webTitle; - $(newsSelectorId).append('

' + articleTitle + '

'); - var byLine = article.fields.byline; - $(newsSelectorId).append('

' + byLine + '

'); - var summary = article.blocks.body[0].bodyTextSummary.substring(0,400); - $(newsSelectorId).append('

' + summary + ' ...

'); - var articleUrl = article.webUrl; - $(newsSelectorId).append('Full Article'); +Article.prototype.summary = function() { + var summary = this.article.blocks.body[0].bodyTextSummary.substring(0,415); + // assumes there is a blank + return summary.substring(0,summary.lastIndexOf(' ')); +}; + +Article.prototype.genHtml = function() { + var htmlString = '
'; + htmlString += '

' + this.article.webTitle + '

'; + htmlString += '

' + this.byLine() + '

'; + htmlString += '

' + this.articleDate() + '

'; + htmlString += '
'; + htmlString += '

' + this.summary() + ' ...'; + htmlString += 'Read the full article

'; + htmlString += '
'; + return htmlString; }; var displayNews = function(event,data) { @@ -65,9 +89,10 @@ var displayNews = function(event,data) { for (var i = 0; i < data.response.results.length && count < 10; i++ ) { switch (data.response.results[i].type) { case 'article': - if ( validArticle(data.response.results[i]) ) { + var article = new Article(data.response.results[i]); + if ( article.valid() ) { count++; - displayArticle(event,data.response.results[i]); + $(event.data.newsSelectorId).append(article.genHtml()); } break; // add cases for other types @@ -77,15 +102,20 @@ var displayNews = function(event,data) { $(event.data.closeSelectorId).css('visibility','visible'); }; +var displayErrMsg = function() { + $('#msg').remove(); + $('body').append('

*** Issue with response ***

'); +}; + var openHandler = function(event) { if ( $(event.data.newsSelectorId).css('display') === 'none' ) { $.ajax({ url: event.data.url, success: function(data) { - if (data.response.status !== "ok") { - displayErrMsg(); - } else { + if (data.response.status === "ok") { displayNews(event,data); + } else { + displayErrMsg(); } } }); @@ -98,10 +128,12 @@ var closeHandler = function(event) { }; var setUp = function() { - var categories = ['Mammal','Bird','Reptile','Fish','Amphibian','Insect']; + var categories = [ + 'Mammal','Bird','Reptile','Fish','Amphibian','Insect','Worm','Crustacean','Coral','Protozoan','Dinosaur' + ]; for (var i = 0; i < categories.length; i++) { var category = new Category(categories[i]); - $('body').append(category.genHtml()); + $('main').append(category.genHtml()); $(category.selectorId).click(category,openHandler); $(category.closeSelectorId).click(category,closeHandler); } @@ -109,35 +141,4 @@ var setUp = function() { $(document).ready(function() { setUp(); - // $('.category').click(function() { - // var display = $('#mammalnews').css('display'); - // if ( display === 'none' ) { - // $.ajax({ - // url: "http://content.guardianapis.com/search?q=mammal&order-by=relevance&page-size=50&show-fields=thumbnail%2Cbyline&show-blocks=body&api-key=2700505f-b667-4f0a-adc0-b024f02abe57", - // success: function(data) { - // if (data.response.status !== "ok") { - // $('body').append('

*** Issue with response from Guardian ***

'); - // } else { - // for (var i = 0; i < data.response.results.length && i < 10; i++ ) { - // var result = data.response.results[i]; - // if ( result.type === 'article') { - // var thumbnail = result.fields.thumbnail; - // $('#mammalnews').append(''); - // var title = result.webTitle; - // $('#mammalnews').append('

' + title + '

'); - // var byLine = result.fields.byline; - // $('#mammalnews').append('

' + byLine + '

'); - // var summary = result.blocks.body[0].bodyTextSummary.substring(0,400); - // $('#mammalnews').append('

' + summary + ' ...

'); - // var articleUrl = result.webUrl; - // $('#mammalnews').append('Full Article'); - // } - // } - // $('#mammalnews').css('display','block'); - // $('#mammalclose').css('visibility','visible'); - // } - // } - // }); - // } - // }); -}); \ No newline at end of file +}); From 9f63e512b5890c7f524b97c984135624b043b988 Mon Sep 17 00:00:00 2001 From: bluemittens505 Date: Tue, 1 Mar 2016 21:33:02 -0500 Subject: [PATCH 5/5] Update README.md --- README.md | 48 +++++------------------------------------------- 1 file changed, 5 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index ee2d41b..5ecae89 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,7 @@ # Mashup project -This project is open-ended! Requirements: - -* Build a site that uses data from at least one external API in an interesting, interactive way. -* Replace this README with a description of the project. -* You are welcome to use any 3rd-party libraries/frameworks – just load them from a CDN (e.g. [cdnjs](http://cdnjs.com)), or put them under the [`vendor/`](vendor/) folder. -* **Do not commit the `client_secret` (or anything else from an API that says "token" or "secret")**, as a hacker could use this to make requests on behalf of you. - -The JS code should be **non-trivial**. That being said... start simple! (Just get the data to show up on the page.) No server-side coding is required, but feel free to create a backend in whatever language if you like, if you need one. - -* [AJAX demos](https://github.com/advanced-js/deck/tree/gh-pages/demos/ajax) -* [inspiration?](http://www.programmableweb.com/mashups) - -## Finding an API - -A couple things to look for in an API (or at least the endpoints you're using) for this project: - -* Make sure it doesn't require authentication (e.g. [OAuth](http://oauth.net/)). - * You need a server to do this. -* If the API doesn't support cross-domain requests (JSONP or CORS), you will need to use [JSONProxy](https://jsonp.afeld.me/). - -Here is a [list of API suggestions](https://gist.github.com/afeld/4952991). - -## V1 - -Get the data to show up on the page. - -## V2 - -First pass. Get your main feature working in the simplest way possible. - -## V3 - -Iterate! - -* Refactor -* Add a new feature - -## Bonus points - -* build in an object-oriented way -* automated tests - * [Sinon.js fakeServer](http://sinonjs.org/docs/#fakeServer) may be helpful -* fancy interactivity/animations +This project uses the API from theguardian.com to create a page containing a list of categories related to animals. +A click on a category reveals a list of articles each with a headline, byline, date, picture, summary, and link to +full article on theguardian.com. +Each time you click on a category, a new list of articles is retrieved. +The article list is emptied when you click on the X and close the category.