Stack of technologies: HTML, CSS, Bootstrap, jQuery, API
Click on button to get a quote. Works with api https://forismatic.com/en/api/How it works
To fetch quotes from provided API, we add function on button click event. According to documentation on forismatic.com, all HTTP requests call on: http://api.forismatic.com/api/1.0/0. To get a random quote we need a method = getQuote. Also we need to determine a format of returned data: jsonp. So we can store our url in a variable:
var url = "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";Now we use a shorthand Ajax function $.getJSON() and on a callback we modify html content of quote and author node`s in a DOM-tree: we passing receiving data from API: data.quoteText and data.quoteAuthor respectively:
$.getJSON(url, function(data){
$(".quote").html('"'+data.quoteText+'"');
$(".author").html("- " + data.quoteAuthor);
});