ryanboris
4/16/2018 - 6:21 AM

Random Quote Generator Project for Freecodecamp

Random Quote Generator Project for Freecodecamp

styles
content_copyfile_download
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdn.materialdesignicons.com/2.2.43/css/materialdesignicons.min.css" rel="stylesheet" />
style.css
content_copyfile_download
@import url("https://fonts.googleapis.com/css?family=Homemade+Apple");

h1 {
  font-family: "Homemade Apple", cursive;
  font-size: 3.25em;
  background-color: lightcoral;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
  border-radius: 80px;
  border: dotted;
  border-color: black;
}

#quote-body {
  border-left: 0px;
  border-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-style: dotted;
  border-color: black;
  border-width: 2px;
  border-radius: 60px;
  background-color: white;
  font-size: 1.75em;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  color: black;
  text-align: center;
  font-family: "Homemade Apple", cursive;
}

#quote-author {
  font-size: 1.25em;
  text-align: center;
  color: lightcoral;
  font-family: "Homemade Apple", cursive;
}

body {
  background-color: lightgrey;
}

.left {
  display: block;
  position: relative;
  width: auto;
  height: auto;
  padding: 20px;
  text-align: center;
}

button {
  border-color: black;
  font-size: 15px;
  background-color: white;
}
scripts
content_copyfile_download
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
script.js
content_copyfile_download
$(document).ready(function() {
  window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));
  
  $("#getNew").on("click", function() {
    $.getJSON(
      "https://random-quote-generator.herokuapp.com/api/quotes/random",
      function(quoteObj) {
        $("#quote-body").text(quoteObj.quote);
        $("#quote-author").text(quoteObj.author);
      }
    );
  });
});
random-quote-generator-project-for-freecodecamp.markdown
content_copyfile_download
  • Rendered
  • Source

Random Quote Generator Project for Freecodecamp

A Pen by Ryan Boris on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Random Quote Machine!</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm">
        <h1>Quotes For Days!</h1>
      </div>
    </div>
    <div class="row">
      <div class='col-sm' id="quote-body">
      </div>
    </div>
    <br>
    <div class="row">
      <div class='col-sm' id='quote-author'></div>
    </div>

    <div class="row">

      <div class="col-sm left"><button id="getNew"><i class="mdi mdi-reload btn-default"></i><small>Quote!</small></button></div>

    </div>

    <div class="row">
      <div class="col-sm left">
        <a class="twitter-share-button"
  href="https://twitter.com/intent/tweet"></a>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>

  <script src="script.js"></script>
</body>

</html>