From b9d3fa13e5f7dcc2a7ddd5e52826d25130262c72 Mon Sep 17 00:00:00 2001 From: Chong Qiang Chew Date: Tue, 10 Oct 2017 13:14:28 +0800 Subject: [PATCH 1/3] commit --- index.html | 15 +++++++++++++++ script.js | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 index.html create mode 100644 script.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..31ed68b --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + +

Post Test

+

+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..01c2069 --- /dev/null +++ b/script.js @@ -0,0 +1,32 @@ +$(function() { + + $('.btnRandom').on('click', function random (){ + + var myHeaders = {"X-Mashape-Key": "b2NSuJeuRAmshGUtkeEbSCR1i2kFp1CZqkzjsnS95psHNIgRYC", + "Content-Type": "application/x-www-form-urlencoded", + "Accept": "application/json"} + + var myInit = { method: 'POST', + headers: myHeaders + }; + + var getQuote = fetch('https://andruxnet-random-famous-quotes.p.mashape.com/', myInit) + + getQuote + .then((response) => { + return response.json() + }) + + .then(randomQuotes) + + function randomQuotes(data){ + // var $quoteText = $('

') + // $quoteText.append($quotes) + var $quotes = data.quote + $('p').text($quotes) + } + + }) + + +}) From ee156cb94bf73a9cf0b1576a93d63d6ab75a19a8 Mon Sep 17 00:00:00 2001 From: Chong Qiang Chew Date: Tue, 10 Oct 2017 15:41:04 +0800 Subject: [PATCH 2/3] latest commit --- script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script.js b/script.js index 01c2069..b7f99a5 100644 --- a/script.js +++ b/script.js @@ -16,7 +16,7 @@ $(function() { .then((response) => { return response.json() }) - + .then(randomQuotes) function randomQuotes(data){ From 6804f0c45ee2bd800bf399fd653264f6a6474c9c Mon Sep 17 00:00:00 2001 From: Chong Qiang Chew Date: Tue, 10 Oct 2017 15:50:15 +0800 Subject: [PATCH 3/3] Latest commit --- index.html | 16 +++++++++++++ script.js | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 82 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 31ed68b..4a475fc 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,22 @@

Post Test

+ + +

Newzies

+ +

My Article List

+ + + diff --git a/script.js b/script.js index b7f99a5..63a7f3f 100644 --- a/script.js +++ b/script.js @@ -16,7 +16,7 @@ $(function() { .then((response) => { return response.json() }) - + .then(randomQuotes) function randomQuotes(data){ @@ -28,5 +28,70 @@ $(function() { }) + $('select').on('change', function (){ + console.log(this.value); + if(this.value === '1'){ + var url = 'https://newsapi.org/v1/articles?source=techcrunch&apiKey=233061e0313b48f0a7da344179808c62' + console.log('techcrunch chosen'); + } + if(this.value === '2'){ + var url = 'https://newsapi.org/v1/articles?source=buzzfeed&apiKey=233061e0313b48f0a7da344179808c62' + console.log('buzzfeed chosen'); + } + if(this.value === '3'){ + var url = 'https://newsapi.org/v1/articles?source=bloomberg&apiKey=233061e0313b48f0a7da344179808c62' + console.log('bloomberg chosen'); + } + +$('ul').empty() + +var apiCall = fetch(url) + +console.log('api call') +console.log(apiCall) +console.log(url); +apiCall +.then((response) => { // when we got response back + // console.log('response received') + // console.log(response.json()) + return response.json() +}) + +.then(writeLiEveryArticles) + +.catch((err) => { + console.log('error happened somewhere') + console.log(err) +}) + +//dom manipulating part +function writeLiEveryArticles(data){ + // loop the data.articles + + for (var i = 0; i < data.articles.length; i++) { + //title + var $li = $('
  • ') + var $title = data.articles[i].title + var $liTitle = $li.append($title) + var $ulTitle = $('ul').append($liTitle) + + var $getImg = data.articles[i].urlToImage + var $img = $(``) + var $imgAppend = $('ul').append($img) + + var $p = $('

    ') + var $description = data.articles[i].description + var $toParagraph = $p.append($description) + var $descriptionAppend = $('ul').append($toParagraph) + + var $getLink = data.articles[i].url + var $link = $(`${$getLink}`) + var $linkAppend = $('ul').append($link) + } + + +} +}) + })