Random Quote Machine

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Random Quote Machine</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <div class="quote-box">
  <div class="quote-text">
    <i class="fa fa-quote-left"> </i><span id="text"></span>
  </div>
  <div class="quote-author">
     <span id="author"></span>
  </div>
  <div class="buttons">
    <a class="button" id="twitter-quote" title="Tweet this quote" target="_blank">
      <i class="fa fa-twitter"></i>
    </a>
    <button class="button" id="new-quote" onclick="getQuote();">New quote</button>
  </div>
</div>
<div class="footer"> An app by <a href="https://www.freecodecamp.com/charlesmarlow" target="_blank">Charles Marlow</a></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/--Gordon--/random-quote-machine-mmgZxE */
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
* {
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}
div {
  position: relative;
  z-index: 2;
}

body {
  background-color: #333;
  color: #333;
  font-family: 'Amatic SC, cursive', sans-serif;
  font-weight: 400;
}
.footer {
  width: 450px;
  text-align: center;
  display: block;
  margin: 15px auto 30px auto;
  font-size: 16px;
  color: #fff;
}
.quote-box {
  border-radius: 3px;
  position: relative;
  margin: 8% auto auto auto;
  width: 450px;
  padding: 40px 50px;
  display: table;
  background-color: #fff;
  border: 2px solid black;
}

  .quote-text {
    i{
      font-size: 16px;
      margin-right: 7px;
    }
    text-align: center;
    width: 450px;
    height: auto;
    clear: both;
    font-weight: 500;
    font-size: 28px;
  }
  .quote-author {
    width: 450px;
    height: auto;
    clear: both;
    padding-top: 20px;
    font-size: 16px; 
    text-align: right;
  }
  .buttons {
    width: 450px;
    margin: auto;
    display: block;
}

.button {
	height: 38px;
	border: none;
	border-radius: 3px; 
	color: #fff;
	background-color: #333; 
	outline: none;
	font-size: 18px; 
	padding: 8px 18px 6px 18px;
    margin-top: 30px;
    opacity: 1;
    cursor: pointer;	
}

.button:hover {
	opacity: 0.8;
}

#twitter-quote {
	float: left;
	padding: 0px;
	padding-top: 8px;
	text-align: center; 
	font-size: 19px;
	margin-right: 5px; 
	height: 30px; 
	width: 40px; 
}
#new-quote {
    float:right;
}

a {
	color: white;
	text-decoration: none;
}

/*Downloaded from https://www.codeseek.co/--Gordon--/random-quote-machine-mmgZxE */
/* This programme delivers random quotes upon request. Have fun! */


function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }

var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
var currentQuote = '';
var currentAuthor = '';
function openURL(url){
  window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}
function getQuote() {
  $.ajax({
    headers: {
      "X-Mashape-Key": "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V",
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous',
    success: function(r) {
      if (typeof r === 'string') {
       r = JSON.parse(r); 
      }
      currentQuote = r.quote;
      currentAuthor = + r.author;
      if(inIframe())
      {
        $('#twitter-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
      }
      $(".quote-text").animate({
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          $('#text').text(r.quote);
        });

      $(".quote-author").animate({
          opacity: 0
        }, 500,
        function() {
          $(this).animate({
            opacity: 1
          }, 500);
          $('#author').html(r.author);
        });

      var color = Math.floor(Math.random() * colors.length);
      $("html body").animate({
        backgroundColor: colors[color],
        color: colors[color]
      }, 1000);
      $(".button").animate({
        backgroundColor: colors[color]
      }, 1000);
    }
  });
}
$(document).ready(function() {
  getQuote();
  $('#new-quote').on('click', getQuote);
  $('#twitter-quote').on('click', function() {
    if(!inIframe()) {
      openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
    }
  });
});

Comments