wdi-sg · soemn · Oct 9, 2017 · Oct 9, 2017 · Oct 9, 2017
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+    <h1>Random Quote Generator</h1>
+    <div class=""></div>
+
+    <button type="button" class="getFamous">Get another random Famous Quote</button>
+    <button type="button" class="getMovie">Get another random Movie Quote</button>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
+    <script src="script.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,47 @@
+$(function() {
+  let myKey = {
+    method: "POST",
+    headers: {
+      "X-Mashape-Key": "6qClgHZ6abmshFPEOwtnIL5Jbn7tp1bbv0Ijsn9JINTyyizALz"
+    }
+  }
+
+  const $getFamous = $(".getFamous")
+  const $getMovie = $(".getMovie")
+
+  const updateRandomQuote = data => {
+    let $h2 = $("<h2>")
+    let $author = $("<p>")
+    let $category = $("<p>")
+    $div = $("div")
+    $h2.text(data.quote)
+    $author.text("by: " + data.author)
+    $category.text("category: " + data.category)
+    $div.append($h2)
+    $div.append($author)
+    $div.append($category)
+  }
+
+  const getRandomQuote = type => {
+    let url = `https://andruxnet-random-famous-quotes.p.mashape.com/?cat=${type}&count=1`
+    let randomQuote = fetch(url, myKey)
+    randomQuote
+      .then(response => {
+        return response.json()
+      })
+      .then(updateRandomQuote)
+      .catch(err => {
+        console.log(err)
+      })
+  }
+
+  getRandomQuote("movie")
+  getRandomQuote("famous")
+
+  $getFamous.on("click", () => {
+    getRandomQuote("famous")
+  })
+  $getMovie.on("click", () => {
+    getRandomQuote("movie")
+  })
+})