FreeCodeCamp : Build a Random Quote Machine

What is a freecodecamp : build a random quote machine How do you make a freecodecamp : build a random quote machine? This script and codes were developed by Markku Lehmonen on 03 February 2022, Thursday.

How do I make an freecodecamp : build a random quote machine?
  1. FreeCodeCamp : Build a Random Quote Machine Previews
  2. FreeCodeCamp : Build a Random Quote Machine HTML Codes
  3. FreeCodeCamp : Build a Random Quote Machine CSS Codes
  4. FreeCodeCamp : Build a Random Quote Machine JS Codes
FreeCodeCamp : Build a Random Quote Machine Previews

FreeCodeCamp : Build a Random Quote Machine HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>FreeCodeCamp : Build a Random Quote Machine</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<div class="container-fluid centerVertically">
  <div class="quotePanel panel panel-default center-block">
    <div class="quoteContainer panel-body">
      <blockquote class="blockquote-reverse">
        <p><i id="quoteText"></i></p>
        <footer><cite id="quoteAuthor" title="Source Title"></cite></footer>
      </blockquote>
    </div>
    <div class="panel-footer">
      <button id="btnTweet" class="btn btn-default"><i class="fa fa-twitter" aria-hidden="true"></i></button>
      <button id="btnNewQuote" class="btn btn-default pull-right">New Quote</button>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

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

</body>
</html>

FreeCodeCamp : Build a Random Quote Machine CSS Codes

body {background-color:#cccccc}
.quotePanel {width:600px;border-color:#999999; }
.quoteContainer {padding:35px 35px 35px 35px;}
.fa-twitter {position:relative; left:-2px; top:0px;}
button {height:35px;}
#btnTweet {width:35px;}
.panel-footer {padding-bottom:30px; padding-left:25px; padding-right:25px;}
.centerVertically {height:100vh;display:flex;align-items:center;}

FreeCodeCamp : Build a Random Quote Machine JS Codes

$(document).ready(function() {

  getNewQuote();
  
  $("#btnTweet").on("click", tweetQuote);
  $("#btnNewQuote").on("click", getNewQuote);

});

function getNewQuote() {
  
  // Clear cache for getting a new quote every time
  $.ajaxSetup({ cache: false });
  
  // Get and set a quote from QuotesOnDesign.com
  $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
    $("#quoteText").html(a[0].content);
    $("#quoteAuthor").html(a[0].title);
  });

}

function tweetQuote() {
 
  var baseURL = "https://twitter.com/intent/tweet?text=";
  var quoteText = encodeURIComponent( '"' + $("#quoteText").text().trim() + '"' );
  var hashTags = encodeURIComponent( " #design #quote #" + $("#quoteAuthor").text().trim().replace(' ', ' #') );

  window.open(baseURL + quoteText + hashTags);
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.