Random Quote Machine

In this example below you will see how to do a Random Quote Machine with some HTML / CSS and Javascript

freeCodeCamp objective: Random Quote Machine

Thumbnail
This awesome code was written by THEK7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright THEK7 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Random Quote Machine</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.6/css/all.css'>

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

  
</head>

<body>

  <html>
  <body class="container-fluid">
    <div class="fixed-top bg-success">
      <h1 class="text-center">Random Quote Machine</h1>
    </div>
    <div class="container">
      <div id="outPopUp">
        <span><i class="fas fa-quote-left"></i>
        </span><h1><blockquote class="blockquote" id="quote">Keep calm and code on!</blockquote></h1><span class="float-right"><i class="fas fa-quote-right"></i>
        </span>
        <br>
        <footer class="blockquote-footer text-right"><cite id="cite">Kristijan Kelić</cite></footer>
        <hr>
        <button class="btn btn-outline-success" id="getQuote">New Quote</button>
        <button class="btn btn-outline-primary float-right" id="tweet"><i class="fab fa-twitter"></i>
        </button>
        <hr>
        <small class="text-center"><em>Author: Kristijan Kelić</em></small>
      </div>
    </div>
    
  </body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/THEK7/random-quote-machine-MQQwNN */
html, body{
  min-height: 100%;
  background-color: white;
}

h1 { color: white; font-family: 'Droid serif', serif; font-size: 36px; font-weight: 400; font-style: italic; line-height: 44px; text-align: center; line-height: normal;  }

#outPopUp {
  position:relative;
  margin:8% auto auto auto;
  width:450px;
  padding:40px 50px;
  display:table;
  border: 2px solid green;
  border-radius: 20%;
}

#outPopUp h1 {
  color: black;
}



/*Downloaded from https://www.codeseek.co/THEK7/random-quote-machine-MQQwNN */
$(document).ready(function() {
  $("#getQuote").on('click', function() {
    $.ajax({
      headers: {
      "X-Mashape-Key": "DpcLmP605dmsh9eWqvxUd2YeIE15p1f1D4njsnhXrZC8llJDuF",
      "Accept": "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com',
      success: function(response) {
        quote = response.quote;
        author = response.author;
        $("#quote").hide(10);
        $("#quote").text(quote);
        $("#quote").show(2000);
        $("#cite").hide(10);
        $("#cite").text(author);
        $("#cite").show(2000);
      },
      error: function(err){
       $("#quote").text = err.message;
      }
    });
  });
  
  $("#tweet").on("click", function(){
          var quote = $("#quote").text();
          var author = $("#cite").text();
          window.open("https://twitter.com/intent/tweet?text="+"\""+quote+"\""+" -"+cite);
        });
});

Comments