Random Quote Generator (HTML, CSS, JS)

index.html

<div class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-3"></div>
		<div class="col-xs-12 col-sm-6 quotebox">
			<div class="row">
				<div class="col-xs-12">
					<blockquote>
						<i class="fa fa-quote-left quotemark"></i>
						<h2 id="quotetext"></h2>
						<footer id="quotesource"></footer>
					</blockquote>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12 col-sm-12">
					<div class="social-icons icon-rounded"><a id="tweet-quote" title="Tweet this quote!" target="_blank"><i class="fa fa-twitter"></i></a>
					</div>
					<div class="quotebutton"><button class="btn btn-primary" id="newquote">New Quote</button></div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-sm-3"></div>
	</div>
</div>

random-quote-generator-html-css-js.markdown

Random Quote Generator (HTML, CSS, JS)

An example of a Random Quote Generator, built with HTML, CSS, and JS. Background changes color with each new quote.

A Pen by Alexander Lamm on CodePen.

License.

script.js

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

		var colors = [
			'#490A3D',
			'#BD1550',
			'#E97F02',
			'#F8CA00',
			'#8A9B0F',
			'#69D2E7',
			'#FA6900',
			'#16a085',
			'#27ae60',
			'#2c3e50',
			'#f39c12',
			'#e74c3c',
			'#9b59b6',
			'#FB6964',
			'#342224',
			'#472E32',
			'#77B1A9',
			'#73A857'
		];

var quotes = [
    ["You only live once, but if you do it right, once is enough.","Mae West"],
    ["I am so clever that sometimes I don't understand a single word of what I am saying.","Oscar Wilde"],
    ["Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.","Albert Einstein"],
	["The most beautiful experience we can have is the mysterious. It is the fundamental emotion that stands at the cradle of true art and true science.","Albert Einstein"]
	["It is our choices, Harry, that show what we truly are, far more than our abilities.","J.K. Rowling, Harry Potter and the Chamber of Secrets"],
	["All men who have turned out worth anything have had the chief hand in their own education.","Walter Scott"],
	["Trust yourself. You know more than you think you do.","Benjamin Spock"],
	["No one can make you feel inferior without your consent.","Eleanor Roosevelt, This is My Story"],
	["To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.","Ralph Waldo Emerson"],
	["Twenty years from now you will be more disappointed by the things that you didn't do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.","H. Jackson Brown Jr., P.S. I Love You"]
	];


var currentQuote = "";
var currentAuthor = "";
var randomquote = "";
var randomcolor = "";

function getQuote() {
	randomquote = Math.floor(Math.random() * quotes.length);
	randomcolor = Math.floor(Math.random() * colors.length);
    currentQuote = quotes[randomquote][0];
    currentAuthor = quotes[randomquote][1];
	if (inIframe()) {
		$('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=aLamm&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
	}

	$(document).ready(function () {
	    $('html body').animate({
	        backgroundColor: colors[randomcolor],
	        color: colors[randomcolor]
	    }, 500);
	    $('#newquote, .social-icons .fa-twitter').animate({ backgroundColor: colors[randomcolor] }, 500);
			$('blockquote footer').animate({ color: colors[randomcolor] }, 500);	
	    $('blockquote').animate({ borderLeftColor: colors[randomcolor] }, 500);
	    $('#quotetext').animate({ opacity: 0 }, 500, function () {
	        $(this).animate({ opacity: 1 }, 500);
	        $(this).text(currentQuote);
	    });
	    $('#quotesource').animate({ opacity: 0 }, 500, function () {
	        $(this).animate({ opacity: 1 }, 500);
	        $(this).text(currentAuthor);
	    });
    });    
}

function openURL(url) {
    window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

getQuote();

$(document).ready(function () {
    $('#newquote').on('click', getQuote);
    $('#tweetquote').on('click', function () {
        if (!inIframe()) {
            openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
        }
    });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>

style.css

body,
h1,
h2,
h3,
h4,
h5,
h6,
p
 { font-family: 'Raleway', sans-serif;
}

h1{font-size:35px;}
h2{font-size:30px;}
h3{font-size:25px;}
p {font-size:16px;}

body {background:#490A3D;}
.quotemark {
    position: relative;
    top: -12px;
    padding-right: 10px;
}

blockquote {
  border-left: 10px solid #490A3D;
  margin: 30px 10px;
  padding: 10px 30px;
}
blockquote:before {
  color: #ccc;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote h1, h2, h3, p{
  display: inline;
}
blockquote footer {
	font-size:18px;
	text-align:right;
	color:transparent;
}

.container {
	max-height:800px;
	margin: 10% auto auto auto;
}
.quotebox {
	background:#fff;
	max-width:500px;
	min-height:100px;
	border:1px solid #222;
	border-radius:5px;
	margin:10px;
}

.quotebutton {
	display:inline-block;
	padding:6px 12px;
}
	#quotesource{margin-top:20px}

.btn {margin-bottom:10px}

.social-icons {
	padding:6px 12px;
	display:inline-block;
	
}
.social-icons .fa {
	font-size: 1.8em;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #FFF;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.social-icons.icon-rounded .fa{
	border-radius:5px;
}
.social-icons .fa:hover, .social-icons .fa:active {
	color: #FFF;
	-webkit-box-shadow: 1px 1px 3px #333;
	-moz-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333; 
}
.social-icons .fa-twitter {
	background-color:#490A3D; 
	border-color:none;} 

.btn-primary {
	width: 100px;
	height: 40px;
	border:none;
	background:#490A3D;
	}

@media only screen and (max-width: 768px){  
    #quotetext {font-size:25px; }
	.container {	margin-right:20px;}
    }
@media only screen and (max-width: 320px){  
    #quotetext {font-size:18px; }

    }

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css" rel="stylesheet" />