I came across some interesting templates that can generate random quotes and others that create random pictures.
My goal is to develop a template that generates both a random quote and a random picture, similar to this example, without any relation between the quote and the picture.
Is there a way I can modify the code below to achieve this?
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Random Quote Machine</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-4 text-center">
<h1>V for Vendetta</h1>
<div class="quoteBox">
<p class="quote">Behind this mask there is more than just flesh. Beneath this mask there is an idea... and ideas are bulletproof. </p>
<span class="hero">- Alan Moore, V for Vendetta</span>
</div>
<div class="buttons">
<a class="btn btn-danger quoteButton" id="quoteBtn"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></a>
<a class="btn btn-primary tweetButton" id="tweetBtn" href="https://twitter.com/intent/tweet?text=" target="_blank"><i class="fa fa-twitter"></i></a>
</div>
</div>
<div class="col-md-8 text-center">
<img class="img-responsive" src="http://download.1wallpaper.net/20150420/v-for-vendetta-movie-mask-black-background-1920x1200.jpg">
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
CSS
body {
background-color: black;
color: white;
font-family: Raleway;
}
.container {
margin: 0 50px;
}
h1 {
font-size: 60px;
padding: 150px 0 5px 0;
}
.quoteButton,
.tweetButton {
padding: 5px 25px 5px 25px;
}
#quoteBtn {
margin-right: 5px;
}
.quoteBox {
padding: 25px 0 30px 0;
}
.quote {
font-size: 20px;
}
span {
font-style: italic;
}
img {
padding: 50px 0 0 0;
}
JS
$(document).ready(function() {
$('#quoteBtn').on('click', function() {
var quotes = [{
'author': '- Alan Moore, V for Vendetta',
'quote': "People shouldn't be afraid of their government. Governments should be afraid of their people.",
'img': 'http://images4.alphacoders.com/634/63444.jpg'
}, {
'author': '- Alan Moore, V for Vendetta',
'quote': "Everybody is special. Everybody. Everybody is a hero, a lover, a fool, a villain. Everybody. Everybody has their story to tell.",
'img': 'http://www.wallpaperup.com/uploads/wallpapers/2014/03/24/307595/big_thumb_f38ae29be31e4c280ad5e2e9ed9fc716.jpg'
},
...(remaining array items)
}];
var randomQuote = Math.floor((Math.random() * quotes.length));
$('.quote').html(quotes[randomQuote]['quote']);
$('.hero').html(quotes[randomQuote]['author']);
$('.img-responsive').attr('src', quotes[randomQuote]['img']);
$("#tweetBtn").on('click', function() {
$("#tweetBtn").attr('href', "https://twitter.com/intent/tweet?text=" + quotes[randomQuote]['quote'] + quotes[randomQuote]['author']);
});
})
});