wdi-sg · thamjieying · Oct 10, 2017 · Oct 10, 2017 · Oct 10, 2017
diff --git a/fetch101/index.html b/fetch101/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>News</title>
+  </head>
+  <body>
+    <h1>Newzies</h1>
+    <h2>My Article List</h2>
+    <select>
+      <option value="techcrunch">techcrunch</option>
+      <option value="fortune">fortune</option>
+    </select>
+    <ul>
+
+    </ul>
+    <script
+  src="https://code.jquery.com/jquery-3.2.1.min.js"
+  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+  crossorigin="anonymous"></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/fetch101/script.js b/fetch101/script.js
@@ -0,0 +1,56 @@
+
+$('select').change(function(){
+
+
+  var source = $('select option:selected').text()
+  var url = 'https://newsapi.org/v1/articles?source=' + source +'&apiKey=43e72e768c96496a9d0d20b68ce97391';
+  $('ul').empty()
+
+
+  var apiCall =  fetch(url)
+  console.log('api Call')
+  console.log(apiCall)
+
+apiCall
+.then((response)=>{//when we get response back
+  console.log('response received')
+  // console.log(response.json())
+  return response.json()
+})
+.then(writeLiEveryArticle)
+.catch((err)=>{
+  console.log(err)
+})
+
+function writeLiEveryArticle(data){
+  //loop the data.article
+  var articles = data.articles
+  var $ul =$('ul')
+  var $button = $('<button>')
+
+console.log(articles)
+
+  articles.map((article) => {
+    var $title = $('<h3>')
+    $title.text(article.title)
+    var $content = $('<p>')
+    $content.text(article.description)
+    var $img = $('<img>')
+    $img.attr('src',article.urlToImage )
+
+    var $li = $('<li>')
+    $li.append($title, $content, $img)
+    $ul.append($li)
+
+  })
+
+
+
+  // articles.forEach(function(article){
+  //   $('ul').append("<li><h2>" + article.title)
+  //   $('ul').append("<p>" + article.description)
+  //   $('ul').append("<img src=" +article.urlToImage +">")
+  // })
+
+}
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Random Quotes Generator</title>
+  </head>
+  <body>
+      <h1>Random Quotes </h1>
+      <button>Generate Quote</button>
+      <h2></h2>
+      <script
+src="https://code.jquery.com/jquery-3.2.1.min.js"
+integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+crossorigin="anonymous"></script>
+      <script src="script.js">
+      </script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,31 @@
+
+
+$('button').on('click',function(){
+
+  var apiCall = fetch('https://andruxnet-random-famous-quotes.p.mashape.com/', {
+    method: "POST",
+    headers: {"X-Mashape-Key": 'tCaKCH3PLNmshllrY4Js9pw14VyXp12WHT1jsnO7Jq1NoEket8',
+    "Content-Type": 'application/x-www-form-urlencoded',
+    'Accept': 'application/json'},
+  });
+
+apiCall
+.then((response)=>{//when we get response back
+  console.log('response received')
+  // console.log(response.json())
+  return response.json()
+})
+.then(randomQuote)
+.catch((err)=>{
+  console.log(err)
+})
+
+function randomQuote(data){
+  console.log(data)
+
+  quote = data.quote
+  console.log(quote)
+  $('h2').text(quote)
+}
+
+})