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

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:

You don’t have to change anything in this code for it to work. There is no special authentication necessary.

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();
})();