Random Quote machine

index.html

<div id='main' class="row">
  <div id="center" class="small-8 small-centered large-centered large-10 columns">
    <h3>John Norris' quote machine</h3></br>
    <div id="quote"></div>
  <div class='fixed'><button id="btn" class="button extend" data-url="/">Get a quote</button></div>
  
<div class="twitter"><a href="https://twitter.com/share"  class="twitter-share-button" data-via="rokkapi" data-size="large" data-dnt="true">Tweet</a></div>
  
  </div>
</div>

 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

random-quote-machine.markdown

Random Quote machine

A Pen by ANDREY KOLYBELNIKOV on CodePen.

License.

script.js

var quoteContainer = document.getElementById("quote");
var btn = document.getElementById("btn");

function reqListener () {
   var ourData = JSON.parse(ourRequest.responseText);
   quoteContainer.innerHTML = "<p>" + ourData.value.joke + "</p>";
}

btn.addEventListener("click", function () {
  var btnRequest = new XMLHttpRequest();
  btnRequest.open('GET', 'http://api.icndb.com/jokes/random?firstName=John&amp;lastName=Norris');
  btnRequest.onload = function() {
    if (btnRequest.status >= 200 && btnRequest.status < 400) {
      var ourData = JSON.parse(btnRequest.responseText);
      quoteContainer.innerHTML = "<p>" + ourData.value.joke + "</p>";
    } else {
      console.log("We connected to the server, but it returned an error.");
    }
  };
  btnRequest.onerror = function() {
    console.log("Connection error");
  };
  btnRequest.send();
});

var ourRequest = new XMLHttpRequest();
ourRequest.addEventListener("load", reqListener);
ourRequest.open('GET', 'http://api.icndb.com/jokes/random?firstName=John&amp;lastName=Norris');
ourRequest.send();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

body {
  text-align: center;
}
#main {
  margin: 50px 0;
}
#center {
  background-color: #FFBB7F;
  border-radius: 10px;
  color: #B20854;
  font-size: 1.4em;
  height: 340px;
  position: relative;
  font-weight: lighter;
}

.fixed {
  position: absolute;
  top: 80%;
  left: 45%;
}

button {
  margin: 20px;
  background-color: #046380 !important;
  color: #FFBB7F !important;
  border: none;
  padding: 10px 15px;
  border-radius: 4px !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 #034154;
}

h3 {
  margin: 10px;
  font-size: 1.6em;
  font-weight: normal;
  display: inline-block;
  color: #147899;
}

#quote {
  position: absolute;
  width: 75%;
  top: 25%;
  left: 13%;
}

.twitter {
  position: absolute;
  right: 1.5%;
  bottom: 1.5%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />