Merge pull request #358 from Sapna2001/quote

tejan-singh · web-flow · commit f974de28d408 · 2020-11-13T13:14:51.000+05:30
Random Quote Generator using JS
diff --git a/JavaScript/Random_Quote_Generator/Readme.md b/JavaScript/Random_Quote_Generator/Readme.md
@@ -0,0 +1,8 @@
+# Random Quote Generator
+This script is used to generate random quotes using the api - https://forismatic.com/.
+
+## How to use
+Open index.html in any browser and click on the generate quote button.
+
+## Screenshot
+![demo](https://user-images.githubusercontent.com/56690856/99040560-56c22280-25af-11eb-85cf-4db94c459302.png)
diff --git a/JavaScript/Random_Quote_Generator/index.html b/JavaScript/Random_Quote_Generator/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Random Quote Generator</title>
+		<link rel="stylesheet" href="style.css">
+		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+	</head>
+	<body>
+		<div class="container">
+			<p class="quote"></p>
+            <p class="author"></p>
+        </div>
+        <button id="generate">GENERATE QUOTE</button>
+        <script src="index.js"></script>
+	</body>
+</html>
diff --git a/JavaScript/Random_Quote_Generator/index.js b/JavaScript/Random_Quote_Generator/index.js
@@ -0,0 +1,20 @@
+const quote = document.querySelector(".quote");
+const author = document.querySelector(".author");
+const btn = document.querySelector("button");
+url ="https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
+
+$('#generate').click(function() {
+	$.getJSON(url)
+	.done(update)
+	.fail(handleError);
+});
+
+update = (response) => {
+	quote.innerHTML=`${response.quoteText}`;
+	author.innerHTML=`- ${response.quoteAuthor}`;
+}
+
+handleError = (jqxhr, textStatus, err) => {
+	console.log("Request Failed: " + textStatus + ", " + err);
+}
+	  
diff --git a/JavaScript/Random_Quote_Generator/style.css b/JavaScript/Random_Quote_Generator/style.css
@@ -0,0 +1,36 @@
+body {
+    background-color: #fddb3a;
+    text-align: center;
+}
+
+.container {
+    background-color: #222831;
+    color: white;
+    margin: 10% 20% 3% 20%;
+    padding: 2%;
+    font-size: 35px;
+    border-radius: 50px 0 50px 0;
+}
+
+button {
+      background-color: turquoise;
+      border-color: black;
+      color: black;
+      padding: 15px 32px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 24px;
+      margin: 4px 2px;
+      cursor: pointer;
+      border-radius: 5px;
+      font-weight: 500;
+  }
+
+  .quote {
+      text-align: center;
+  }
+
+  .author {
+      text-align: end;
+  }
