API tools faq
paste
KinekaruFounder

Script Random quotes with Image Generator

KinekaruFounder
Dec 14th, 2018
667
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.35 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <title>Random Quotes Generator - Powered by Shiroyasha.tech</title>
  3. <METa content="github" name="author">
  4.  
  5. <head>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  7.  
  8. <script type="text/javascript">
  9.  
  10. // random quote using quotes on design api
  11. function randomQuote() {
  12. $.ajax( {
  13. url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
  14. success: function(data) {
  15. var post = data.shift(); // The data is an array of posts. Grab the first one.
  16. $('#quote-title').text(post.title);
  17. $('#quote-content').html(post.content);
  18. // use 4 longest words as keywords for getting image
  19. var keyword = post.content.replace('<p>', '').replace('</p>', '').split(' ').sort(function(a, b){
  20. return b.length - a.length;
  21. });
  22. keyword = keyword.slice(1,5).join(",")
  23. console.log(keyword)
  24. randomBackground(keyword)
  25. },
  26. cache: false
  27. });
  28. }
  29.  
  30. // random background using flickr api
  31. function randomBackground(keyword) {
  32. $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  33. {
  34. tags: keyword,
  35. tagmode: "any",
  36. format: "json"
  37. },
  38. function(data) {
  39. var rnd = Math.floor(Math.random() * data.items.length);
  40.  
  41. var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");
  42.  
  43. $('body').css('background-image', "url('" + image_src + "')");
  44. $('body').css('background-size', "cover");
  45. $('body').css('background-position', "center");
  46.  
  47. }
  48. );
  49. }
  50.  
  51. </script>
  52.  
  53. <!-- random font; courtesy of http://codepen.io/katydecorah/pen/vetCA -->
  54. <script type="text/javascript">
  55. var url ="https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDK4Jz71F7DQCrUhXYaF3xgEXoQGLDk5iE";
  56. var family = "";
  57. runFont(family);
  58. var families = [];
  59. var visited = [];
  60.  
  61. $.getJSON(url,function(json){
  62. // counts all the families
  63. var countFamilies = json.items.length;
  64. $("#count").text(countFamilies);
  65.  
  66. // pushes all the font families to an array
  67. $.each(json.items,function(i,type){
  68. families.push(type.family);
  69. });
  70. });
  71.  
  72. // Gets the font based on family name
  73. function runFont(family) {
  74. $.getJSON(url,function(json){
  75. $.each(json.items,function(i,type){
  76. if (type.family === family) {
  77. var familyPlus = family.replace(/\s/g, '+');
  78. var familyCSS = "https://fonts.googleapis.com/css?family=" + familyPlus + ":" + type.variants + "";
  79. var details = $("#variants");
  80.  
  81. // Removes previous family and style
  82. $(".style").remove();
  83. $("style").remove();
  84. details.empty();
  85.  
  86. // Grabs family details
  87. details.append("<div class='detail-title'>Variants</div><ul class='list-variant'></ul>");
  88. $(type.variants).each(function(index, item) {
  89. $(".list-variant").append(
  90. $(document.createElement('li')).text(item)
  91. );
  92. });
  93. details.append("<div class='detail-title'>Subsets</div><ul class='list-subsets'></ul>");
  94. $(type.subsets).each(function(index, item) {
  95. $(".list-subsets").append(
  96. $(document.createElement('li')).text(item)
  97. );
  98. });
  99. details.append("<div class='detail-title horizontal'>Version</div><div class='detail-data'>" + type.version + "</div>");
  100. details.append("<div class='detail-title horizontal'>Last Modified</div><div class='detail-data'>" + type.lastModified + "</div>");
  101. details.append("<div class='detail-title'>HTML</div><div class='detail-data'><pre><code class='language-markup'>&lt;link href='"+familyCSS+"' rel='stylesheet' type='text/css'&gt;</code></pre></div>");
  102. details.append("<div class='detail-title'>CSS</div><div class='detail-data'><pre><code class='language-css'>font-family: '"+family+"', sans-serif;</code></pre></div>");
  103. details.append("<a href='http://www.google.com/fonts#UsePlace:use/Collection:"+familyPlus+"' class='btn'>View on Google Fonts &rarr;</a>");
  104.  
  105. // Grabs the Google Font
  106. $("head").append("<link href='"+ familyCSS +"' rel='stylesheet' type='text/css' class='style'>");
  107. $("body").css("font-family",family);
  108.  
  109. // If family has italic or bold, allow it
  110. if(details.text().match('italic')){
  111. $("head").append("<style>.main em { font-style: italic; }");
  112. }
  113. if(details.text().match('700')){
  114. $("head").append("<style>.main strong,h1,h2,h3 { font-weight: 700; }");
  115. }
  116. else if(details.text().match('800')){
  117. $("head").append("<style>.main strong,h1,h2,h3 { font-weight: 800; }");
  118. }
  119. else if(details.text().match('900')){
  120. $("head").append("<style>.main strong,h1,h2,h3 { font-weight: 900; }");
  121. }
  122.  
  123. // Save visited families
  124. visited.push( family );
  125. var visit="";
  126. $.each(visited, function(i, val) {
  127. visit+= "<li class='link-history' data-family='"+ val +"'>" + val + "</li>";
  128. });
  129. $('#visited').html(visit);
  130.  
  131. // Creates link to view that font again
  132. $(".link-history").click(function(){
  133. var dat = $(this).attr("data-family");
  134. runFont(dat);
  135. $("#font-search").attr("placeholder",dat);
  136.  
  137. // remove first instance from array
  138. if ($.inArray(dat, visited) !== -1) {
  139. visited.splice( $.inArray(dat, visited), 1 );
  140. }
  141. });
  142.  
  143. }
  144. });
  145. });
  146. }
  147.  
  148.  
  149. // Gets a random font
  150. function randomFont() {
  151. $.getJSON(url,function(json){
  152. var count = json.items.length,
  153. random = Math.ceil(Math.random() * count);
  154. $.each(json.items,function(i,type){
  155. if(i === random){
  156. var family = type.family;
  157. $("#font-search").attr("placeholder", family);
  158. runFont(family);
  159. }
  160. });
  161. });
  162. }
  163.  
  164. // Runs to fetch random stuff
  165. $( document ).ready(function() {
  166. randomFont();
  167. randomQuote(); // calls randomBackground
  168. });
  169.  
  170. </script>
  171. </head>
  172.  
  173. <body>
  174.  
  175. <!-- center align -->
  176. <div style="position: relative; width: 100%; height: 100%;">
  177. <div style="background-color: rgba(255,255,255,0.75);
  178. padding: 30px;
  179. position: absolute;
  180. top: 50%;
  181. left: 50%;
  182. transform: translate(-50%, -50%);
  183. ">
  184. <h1>
  185. <span id="quote-content"></span>
  186. - <span id="quote-title"></span>
  187. </h1>
  188. </div>
  189.  
  190. </div>
  191. </body>
  192. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!