quotemachine

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>quotemachine</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

  
  
</head>

<body>

  <div class="container-fluid">
  <div class = "row text-center">
    <h2>Quote finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well">
      <h2 class="message">
      Click the button to get a random quote.
      </h2>
    </div>
  </div>
    <div class = "row text-center">
    <div class="col-xs-12 tweet">
      <br>
  </div>
  </div>
  <br>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-default">
        Get Quote
      </button>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Locrin/quotemachine-wzPpAx */
var quotes = [
    '”May the force be with you.” - Captain Picard',
    "”Don't beleive everything you read on the internet” - Abraham Lincoln",
  "”Typing up quotes is not very interesting.” - Random Person",
  "“Be nice to nerds. You may end up working for them. We all could.” ― Charles J. Sykes",
  "”No one messes around with a nerd’s computer and escapes unscathed.” ― E.A. Bucchianeri",
  "”NASA scientists have discovered a new form of life, unfortunately, it won't date them either.”",
  "”Hell yeah I'm a botanist! Fear my botany powers!” ― Andy Weir, The Martian"  
];


  $(document).ready(function() {
    $("#getMessage").on("click", function(){
      var random = Math.floor(Math.random() * quotes.length);
      var quote = quotes[random];
      $(".message").html(quote);
      $(".tweet").html('<a class="btn btn-info" href="https://twitter.com/home/?status=' + quote + '" target="_blank">Tweet quote...</a>');
    });
  });

Comments