As Winston Churchill once said: "It is a good thing for an uneducated man to read books of quotations."
Having almost completed all the content I want for my dashboard I decided to add a little more to the title which currently just says "Gally Home Dashboard". I remember back at my old Secondary School - de Ferrers Specialist Technology College we used to have an intranet that gave a "thought of the day." So I started looking at how I can add quotes to my dashboard.
Option 1: Create a JSON file that contains quotations I like.
Option 2: Don't reinvent the wheel. Use an API.
There are several APIs we can use;
* Quotes on Design - This allows us to decide a filter on the order and the number of results.
JS:
Results can come in
Curl:
key can be set to blank which gives a random quote.
response format comes in: json, jsonp, xml, html and plain text.
Output for english, random key and different formats:
html:
My Basic Flow:
- Use request npm to match the curl command above (using json)
- Send the json response to the client
- Parse the json and format the output in the client JS
To what I believe are great results!
Any thoughts? Feel free to comment below.
Having almost completed all the content I want for my dashboard I decided to add a little more to the title which currently just says "Gally Home Dashboard". I remember back at my old Secondary School - de Ferrers Specialist Technology College we used to have an intranet that gave a "thought of the day." So I started looking at how I can add quotes to my dashboard.
 |
| Boring Title Page |
var quotes= [{We can then access these quotes by accessing a random part of the array.
"name": "Winston Churchill",
"quote": "It is a good thing for an uneducated man to read books of quotations."
},
...];
getQuote(randNo){There are two downsides to this. 1. I'd have to populate a huge JSON 2. It would be full of quotes I already know and would leave me in a "quote bubble". Not very educational to the uneducated man.
var thisQuote = JSON.parse(quotes[randNo]);
var returnString = thisQuote.name + ": " + thisQuote.quote;
return returnString;
}
Option 2: Don't reinvent the wheel. Use an API.
There are several APIs we can use;
* Quotes on Design - This allows us to decide a filter on the order and the number of results.
JS:
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
$("body").append(a[0].content + "<p>— " + a[0].title + "</p>")
});
Example from the webpage
Curl:curl -X GET "https://quotesondesign.com/wp-json/posts?filter=rand&filter=1"* Forismatic - Similar to quotes on design but also includes "expressions". Neither appears to have rate limits or need an authentication code to be used!
Results can come in
Curl:
curl -X GET "https://api.forismatic.com/api/1.0/?method=getQuote&key=&format=json&lang=enThe language can be set to english or russian (?)
key can be set to blank which gives a random quote.
response format comes in: json, jsonp, xml, html and plain text.
Output for english, random key and different formats:
html:
<blockquote><strong><cite>We are what we repeatedly do. Excellence, then, is not an act, but a habit. </cite></strong><br/><small>Aristotle <address></address></small><blockquote>json:
{"quoteText":"We know the truth, not only by the reason, but by the heart. ", "quoteAuthor":"Blaise Pascal", "senderName":"", "senderLink":"", "quoteLink":"http://forismatic.com/en/b917914ba7/"}text:
You do not become good by trying to be good, but by finding the goodness that is already within you. (Eckhart Tolle)The second comes with a bit more freedom. In the end I made it match how I was doing requests throughout the rest of the dashboard (please see my other posts) and then self formatting to how I wanted it to look on the client side.
My Basic Flow:
- Use request npm to match the curl command above (using json)
- Send the json response to the client
- Parse the json and format the output in the client JS
document.getElementById("randomQuote").innerHTML = quote.quoteAuthor + ": " + quote.quoteText;- Some responses had no author, so we attribute them to "anon"
if (quote.quoteAuthor === "") {
quote.quoteAuthor = "Anon";
}
To what I believe are great results!
Any thoughts? Feel free to comment below.
