tolkadot/Random Quote Machine III.markdown

## index.html
<!-- FREE CODE CAMP ZIPLINE #2 -->

<head>
  <link href='https://fonts.googleapis.com/css?family=Hind:400,600' rel='stylesheet' type='text/css'>

  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
</head>

<body>

  <div class="container-fluid">
    <!-- title -->
    <section class="h1 text-center words">
      <div id="fader">
        Don't Quote Me </div>
    </section>
    <!-- the quote -->
    <section class="words" id="theQuote">
      loading . .
    </section>
    <!-- buttons -->
    <section class="text-center">
      <div class="row">

        <div class=col-xs-6>
          <button id="genQuote" class="btn-primary btn-lg text-centre ">Get a better Quote</button>
        </div>

        <div class=col-xs-6>
          <button class="btn-primary btn-lg  text-centre "><a href="#" id="tweet" target="_blank"><i class="fa fa-twitter"></i> tweet this</button> </div>


         </div>
    </section>

</div>


</body>

## Random Quote Machine III.markdown

      
    Raw
  

              Random Quote Machine III.markdown
            
          
    Random Quote Machine III

Zipline # 2 for FreeCodeCamp
A Pen by Dee on CodePen.
License.

  
## script.js
$(document).ready(function() {

  $('#fader').hide().fadeIn(4000);

  var quoter = function() {
    var Q1 = "A quotation is a handy thing to have about, saving one the trouble of thinking for oneself, always a laborious business ― A.A. Milne, If I May";
    var Q2 = "Quotation, n: The act of repeating erroneously the words of another ― Ambrose Bierce, The Unabridged Devil's Dictionary";
    var Q3 = "He wrapped himself in quotations - as a beggar would enfold himself in the purple of Emperors ― Rudyard Kipling, Many Inventions";
    var Q4 = "A facility for quotation covers the absence of original thought - ― Dorothy L. Sayers, Gaudy Night";
    var Q5 = "Life itself is a quotation - Jorge Luis Borges";
    var Q6 = "A fine quotation is a diamond in the hand of a man of wit and a pebble in the hand of a fool - Joseph Roux";

    var arrayOfQuotes = [0, Q1, Q2, Q3, Q4, Q5, Q6];

    var randomNumber = Math.floor((Math.random() * 6) + 1);

    var newQuote = arrayOfQuotes[randomNumber];
    return newQuote;
  }

  $("#genQuote").click(function() {
    $("#theQuote").html(quoter());

  });

  $('#tweet').click(function(event) {
    var twitter = "https://twitter.com/intent/tweet?text=" + "%22" + encodeURIComponent($('#theQuote').text())
    $(this).attr("href", twitter);
  });

});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

## style.css
body {
  background-image: url(https://image.freepik.com/free-photo/blurry-blurred-blur-background-backdrop-abstract_121-17167.jpg);
  min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
  margin: 0 auto;
}
.words {
 font-family: 'Pacifico', cursive;
  font-size: 150px;
  padding: 30px;
}
.btn-primary {
  font-family: 'Hind', sans-serif;

}

#theQuote {
  font-size: 20px;
  border: 5px solid;
  margin: 30px;
  padding: 20px;
  background-color: white;
  font-family: 'Open Sans', sans-serif;
}
#tweet {
  color: white;
  text-decoration:none;
}
btn-primary {
  background-color: gray;
}

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<!-- FREE CODE CAMP ZIPLINE #2 -->

	<head>
	<link href='https://fonts.googleapis.com/css?family=Hind:400,600' rel='stylesheet' type='text/css'>

	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
	</head>

	<body>

	<div class="container-fluid">
	<!-- title -->
	<section class="h1 text-center words">
	<div id="fader">
	Don't Quote Me </div>
	</section>
	<!-- the quote -->
	<section class="words" id="theQuote">
	loading . .
	</section>
	<!-- buttons -->
	<section class="text-center">
	<div class="row">

	<div class=col-xs-6>
	<button id="genQuote" class="btn-primary btn-lg text-centre ">Get a better Quote</button>
	</div>

	<div class=col-xs-6>
	<button class="btn-primary btn-lg text-centre "><a href="#" id="tweet" target="_blank"><i class="fa fa-twitter"></i> tweet this</button> </div>



	</div>
	</section>

	</div>


	</body>
	$(document).ready(function() {

	$('#fader').hide().fadeIn(4000);

	var quoter = function() {
	var Q1 = "A quotation is a handy thing to have about, saving one the trouble of thinking for oneself, always a laborious business ― A.A. Milne, If I May";
	var Q2 = "Quotation, n: The act of repeating erroneously the words of another ― Ambrose Bierce, The Unabridged Devil's Dictionary";
	var Q3 = "He wrapped himself in quotations - as a beggar would enfold himself in the purple of Emperors ― Rudyard Kipling, Many Inventions";
	var Q4 = "A facility for quotation covers the absence of original thought - ― Dorothy L. Sayers, Gaudy Night";
	var Q5 = "Life itself is a quotation - Jorge Luis Borges";
	var Q6 = "A fine quotation is a diamond in the hand of a man of wit and a pebble in the hand of a fool - Joseph Roux";

	var arrayOfQuotes = [0, Q1, Q2, Q3, Q4, Q5, Q6];

	var randomNumber = Math.floor((Math.random() * 6) + 1);

	var newQuote = arrayOfQuotes[randomNumber];
	return newQuote;
	}

	$("#genQuote").click(function() {
	$("#theQuote").html(quoter());

	});

	$('#tweet').click(function(event) {
	var twitter = "https://twitter.com/intent/tweet?text=" + "%22" + encodeURIComponent($('#theQuote').text())
	$(this).attr("href", twitter);
	});

	});
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	body {
	background-image: url(https://image.freepik.com/free-photo/blurry-blurred-blur-background-backdrop-abstract_121-17167.jpg);
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 0 auto;
	}
	.words {
	font-family: 'Pacifico', cursive;
	font-size: 150px;
	padding: 30px;
	}
	.btn-primary {
	font-family: 'Hind', sans-serif;

	}

	#theQuote {
	font-size: 20px;
	border: 5px solid;
	margin: 30px;
	padding: 20px;
	background-color: white;
	font-family: 'Open Sans', sans-serif;
	}
	#tweet {
	color: white;
	text-decoration:none;
	}
	btn-primary {
	background-color: gray;
	}