Random Quotes Button

index.html

<link href="http://fonts.googleapis.com/css?family=Cardo:400,400italic|Radley|Tangerine" rel="stylesheet">


<h1>Random Quotes Rewritten</h1>
<p>These are some of my favorite quotes I had collected during medical school I recently rediscovered via the wayback machine.  I hope you enjoy them!</p> 
<button class=button>New Quote</button>
<div class="quote"><span class = "saying"></span><br><span class = "author"></span></div>

Random Quotes Button.markdown

Random Quotes Button

This is a smiple project using javascript arrays, random number generator, string methods, and a jquery event handler.

Background jpg from http://subtlepatterns.com/ Fonts from Google Fonts

Forked from Suzanne Atkinson's Pen Random Quotes Button.

A Pen by Razafindrakoto on CodePen.

License.

script.js

$( document ).ready(function() {
	generate();

  function generate(){
    var quotes = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
];
    
    
		randomQuote = quotes[Math.floor(Math.random()*quotes.length)];
    quoteAuthor=randomQuote.split("@");
		$('.saying').text(quoteAuthor[0]);
    $('.author').text(quoteAuthor[1]);
  }
  
  
$(".button").on( "click", function() {
    generate();
});  
  
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  text-align: center;
  width: 600px; 
  margin: 0px auto;
  background-color: #cdcdcd;
  font-family: 'Tangerine', serif;
  background: url(http://subtlepatterns.com/patterns/symphony.png);

}

h1{
    text-shadow: 4px 4px 4px #aaa;
    margin: 10px auto;
    font-size: 4em;
    color: #333;
}

p {
  font-family: 'Radley', serif;
  font-size: 1.2em;
  text-align: left;
}

.quote {
  font-family: 'Cardo', serif;
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255,255,255,0.9);;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100,100,100,.8);;
}

.author {
  font-style: italic;
}

.button {
  font-family: 'Tangerine', serif;
  height: 50px;
  width: 150px;
  margin: 20px auto;
  color: rgba(0,0,0,1);
  background-color: rgba(160,200,160,.8);;
  text-align: center; 
  font-size: 36px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100,100,100,.8);;
}

a {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: sans-serif;
  font-size: 12pt;
}