Chuck Norris Facts

Chuck Norris Facts.markdown

Chuck Norris Facts

This pen generates Random True Facts about Chuck Norris.

A Pen by Brandon on CodePen.

License.

index.html

<div class="container-fluid" id="border">
  <div class="container-fluid">
    <img src="https://lh5.ggpht.com/T3q5ATuwinqACDpYmDTYhq0bK2EcEDpT48rr8yej9EEn5uTlNHGXa77WQRs2cDRfDQ=w300" id="chuck" class="img img-responsive center-block" title="Chuck Norris Pic" />
  </div> <!-- .container-fluid -->
  <div class="container-fluid center-block" id="quote-container">
    <div id="quote-content" class="text-center col-sm-6 col-sm-offset-3"></div>
  </div><!-- .container-fluid -->
  <div class="container-fluid">
    <div class="row" id="buttons">
      <div class="col-sm-6 col-xs-12">
        <a class="twitter-share-button" id="twitter-button" href="#" data-size="large" target="_blank">
          <button type="button" class="btn btn-block btn-primary">
            <i class="fa fa-twitter"></i>
            Tweet
          </button>
        </a>
      </div>
      <div class="col-sm-6 col-xs-12">
        <button type="button" id="newQuote" class="btn btn-block btn-primary">
          New Quote
        </button>
      </div>
    </div><!-- row -->
  </div> <!-- .container-fluid -->
</div><!-- container -->

script.js

var htmlURL = "http://api.icndb.com/jokes/random";
var quote;

function getQuote(URL){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", URL, true);
  xhr.send();
  xhr.addEventListener("readystatechange", processRequest, false);

  function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var response = JSON.parse(xhr.responseText);
      quote = response.value["joke"];     
      $("#quote-content").html(JSON.stringify(quote));
    }
    else {
      quote = "Chuck Norris has brought down the Internet!";
      $("#quote-content").html( quote );
    }
  }
}

$(document).ready(function(){
  getQuote(htmlURL);
});

$("#newQuote").click(function(){
  getQuote(htmlURL);
});

$("#twitter-button").click(function(){
  var expression = /"/g;
  var enc = quote.replace(expression, "%22");
  
  $("#twitter-button").attr('href', "https://twitter.com/intent/tweet?hashtags=ChuckNorris&text=" + enc);
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.css

@impor url('https://www.google.com/fonts/specimen/Open+Sans');

body {
  font-size: 100%;
  font-family: "Open sans", "Comic Sans MS", Helvetic;
}

#border {
  border: 6px solid black;
  margin: 2.5em;
}

#quote-content {
  font-size: 2.5em;
  padding: .5em;
}

#chuck {
  border-width: 6px; 
  border-style: groove;
  border-color: black;
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}

#buttons {
  margin: 2.5em auto 2.5em auto;
  display: block;
  
}

.btn {
  margin-bottom: 2.5em;
}

#newQuote {
    float: right;
  }


#newQuote:hover, #twitter-button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

#quote-container {
  background-color: white;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />