APIs for Librarians

Helping you to help yourself in helping your patrons. Or something.

Random Design Quote


Description

Quotes on Design is a great site that displays one quote at a time by visual and web designers. The collection is curated by Chris Coyier of CSS-Tricks and CodePen fame.

The code below will query their API and display a new quote each time the page its on is reloaded. Have fun!

Screenshots

Random Design Quote screenshot Random Design Quote screenshot

More details

The code below utilizes JSONP and should be compatible with even old Internet Explorers. You can style things however you like. The screenshot is just a simple example.

The Code

HTML

1
  <div id="design-quote"></div>

CSS

1
2
3
4
.design-quote-quote {font-family: 'Martel';line-height: 1.4rem;}
.design-quote-quote a {text-decoration: none;color: #222;}
.design-quote-person {color: #333;}
#design-quote {max-width: 480px;}

JavaScript

Notes for implementation:
The code itself:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var apis4librarians_quotesOnDesign = (function() {
  function reqListener() {
    var data = JSON.parse(this.responseText);
    var d1 = document.getElementById("design-quote");
    d1.insertAdjacentHTML(
      "beforeend",
      `<div class="design-quote-quote"><a href="${data[0].link}">${
        data[0].content
      }</a></div><div class="design-quote-person">--${data[0].title}</div>`
    );
  }
  var oReq = new XMLHttpRequest();
  oReq.addEventListener("load", reqListener);
  oReq.open(
    "GET",
    "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1"
  );
  oReq.send();
})();