$(document).ready(function(){
var quotes = {
Mario: ["So long-a-Bowser!", "Nighty nighty. Ah spaghetti. Ah, ravioli. Ahh, mama mia.", "You know what they say: all toasters toast toast."],
Luigi: ["Let's-a go...", "Oh yeah! Who's number one now?! Luigi!", "Now, THIS is where the real action is"],
Bowser: ["Im HUUUUGE! Even scarier up close, huh?", "GAH HA HA HA! There's no WAY you're ready for a round against ME. Keep practicing, pip-squeak!"],
Peach: ['Oh, did I win?', "Go Peachy, Go Peachy, Go Peachy! Yay! Woohoo!"],
Yoshi: ['Yoshi!'],
Fox: ["This is Fox, returning to base!", "Better luck next time, Falco!"],
Falcon: ["Falcon Kick!", 'Blue Falcon!', 'Show me your moves!'],
Marth: ["Konkaiwa bokuno kachidane! (It's my victory this time!)", "Kyoumo ikinobiru kotoga dekita. (Even today I was able to survive.)",
"Bokuwa makeru wake niwa ikenainda! (There's no way I can lose!)"],
Pit: ["Three Sacred Treasures!", "It's game over for you!", "That all you got?"],
Link: ["....."],
Ike: ["Great... AETHER!", "I fight for my friends.", "You'll get no sympathy from me."],
Lucario: ["Behold, the power of Aura!", "The Aura is with me!", "Max Aura!"],
'Wii Fit Trainer': ["High energy, move that body!", "Salute the sun!", "Work hard to tone that tummy."],
Sheik: ['I\'ve been waiting for you, Hero of Time...', 'The flow of time is always cruel.'],
Ganandorf: ['Hero? ...I\'ve outlived more "heroes" than you can possibly imagine.', 'Behold! The power of the Demon King!',
'I am Ganondorf, the Demon King. Don\'t take that title lightly.'],
Mac: ["Let 'em have it, Mac!", "Way to go, Mac! You're the champ, baby!", "Nice moves, Mac. I can barely keep my eyes on you, son."],
Palutena: ["You shall be purified.", "No one can hide from the light.", "Celestial Fireworks!"],
Robin: ["The key to victory lies within.", "I'm always three steps ahead.", "It seems our fates are joined."],
Shulk: ["Now it's Shulk time!", "I can change the future!", "The future is ours to decide!"],
Sonic: ["That was almost too easy!", "Let's do that again some time!"],
Falco: ["Personally, I prefer the air!", "You aren't worth the trouble."],
Wario: ["Wa-Wa-Wa!", "Time for victory parade."],
'Toon Link': ["....."],
Lucina: ["The future is not written!", "Time to change fate!"]
}
var nameArr = ['Mario', 'Luigi', 'Bowser', 'Peach', 'Yoshi', 'Lucina', 'bowser jr', 'Wario', 'game and watch', 'donkeyk', 'diddyk', 'Link', 'Zelda',
'Sheik', 'Ganandorf', 'Toon Link', 'samus', 'zero suite samus', 'Pit', 'Palutena', 'Marth', 'Ike', 'Robin', 'kirby', 'king deedeedee', 'meta knight',
'Mac', 'placeholder', 'Fox', 'Falco', 'pikachu', 'charizard', 'Lucario', 'jigglypuff', 'Greninja', 'duck hunt', 'Rob', 'ness', 'Falcon', 'villager',
'olimar', 'Wii Fit Trainer', 'dr mario', 'dark pit', 'Lucina', 'Shulk', 'pacman', 'Megaman', 'Sonic'];
var imgurID = '0RQtP';
var key = "cfb3f86a62ab07c";
function randomFxn(){
$.ajax({
type: 'GET',
url: 'https://api.imgur.com/3/album/' + imgurID + '/images',
headers: {'Authorization': 'Client-ID '+ key},
}).done(function(data) {
showZones(data)
});
}
var lastNum = '70';
function showZones(jsonData){
var name = '';
do{
var nameNum = Math.floor(Math.random()*(Object.keys(quotes).length));
// var nameNum = 70;
console.log(nameNum);
} while (nameNum == lastNum)
console.log(lastNum);
lastNum = nameNum;
console.log(lastNum);
name = Object.keys(quotes)[nameNum];
var quoteArrLength = quotes[name].length;
var randQuoteNum = Math.floor(Math.random()*quoteArrLength)
var randQuote = '\"' + quotes[name][randQuoteNum] + '\"';
var indexMult = (nameArr.indexOf(name)*8);
var addToIndex = Math.floor(Math.random()*8);
var url = jsonData.data[(indexMult)+addToIndex].link;
var imgCss = 'url(' + url + ')';
var isReverse = Math.floor(Math.random()*2);
$('h3').text('-' + name);
$('h2').text('Hero? ...I\'ve outlived more "heroes" than you can possibly imagine.');
$('.bg').fadeOut(500, function() {
if(isReverse==1){
$(this).css({'background-image': imgCss, 'transform': 'scaleX(1)'}).fadeIn(700);
}
else{
$(this).css({'background-image': imgCss, 'transform': 'scaleX(-1)'}).fadeIn(700);
}
});
}
var num = 0;
$('.quote-btn').click(function(){
if (num == 0){
num++;
randomFxn();
setTimeout(function(){
num = 0;
}, 1200);
}
});
});
body, html{
height: 100%;
}
.bg,
.quote-btn {
background-repeat: no-repeat;
background-size: cover;
}
.bg{
background-image: url("http://i.imgur.com/sxwO4y3.jpg");
height: 100%;
background-size: 70% 100%;
}
.jumbotron{
margin-left: 16.66666667%;
margin-top: -78vh;
background-color: rgba(100, 100, 100, 0.4);
border-style: solid;
border-color: rgba(0, 0, 0, 0);
}
h2, h3{
color: white;
opacity: 1;
font-weight: 900;
}
h2{
margin-top: -3vh;
margin-left: -1.7vw;
}
h3{
float: right;
}
.quote-btn {
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
background-image: url("http://www.wtfgamersonly.com/wp-content/uploads/2015/06/Super-Smash-Bros.-img.2.jpg");
background-position: 50% 60%;
height: 45px;
width: 140px;
}
.twit-btn{
height: 45px;
width: 140px;
margin-right: 35px;
}
#whole-text{
font-weight: 800;
color: #BC1818;
font-size: 22px;
}
.btn.quote-btn:focus,
.btn.quote-btn:active:focus,
.btn.quote-btn.active:focus,
.btn.quote-btn.focus,
.btn.quote-btn:active.focus,
.btn.quote-btn.active.focus,
.btn.twit-btn:focus,
.btn.twit-btn:active:focus,
.btn.twit-btn.active:focus,
.btn.twit-btn.focus,
.btn.twit-btn:active.focus,
.btn.twit-btn.active.focus{
outline-color: none;
outline-style: none;
border-color: #5e1111 #5e1111 hsl(0, 69%, 17%);
}
.btn.quote-btn:hover{
border-style: none;
}
.btn.quote-btn:active{
background-image: url("http://www.wtfgamersonly.com/wp-content/uploads/2015/06/Super-Smash-Bros.-img.2.jpg");
opacity: .8;
}
@media only screen and (max-height: 568px){
.jumbotron{
margin-top:-89vh;
}
}
@media only screen and (min-height: 569px){
.jumbotron{
margin-top:-80vh;
}
.btn-posit {
margin-top: -42vh;
}
}
@media only screen and (min-width: 0px) and (max-width: 1199px){
.bg{
background-size: cover;
background-position: center;
}
}
/*medium*/
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.jumbotron{
margin-left: 8.33333333%;
}
}
/*small*/
@media only screen and (min-width: 768px) and (max-width: 991px){
.jumbotron{
margin-left: 4.15%;
}
}
/*xs*/
@media only screen and (min-width: 461px) and (max-width: 767px){
.jumbotron{
margin-left: 8.33333333%;
}
.btn-posit{
width: auto;
}
}
@media only screen and (min-width: 0px) and (max-width: 460px) {
h2{
font-size: 22px;
}
h3{
font-size: 18px;
}
.btn-posit{
/*padding-left: 78px; */
margin-left: 1%;
}
.jumbotron{
margin-left: 8%;
}
.twit-btn{
margin-right: 55px;
width: auto;
}
#twit-text{
display: none;
}
}
/*@media only screen and (min-width: 0px) and (max-width: 422px) {
h2{
font-size: 22px;
}
h3{
font-size: 18px;
}
.twit-btn{
width: auto;
margin-right: 10px;
}
.btn-posit{
padding-left: 15%;
}
#twit-text{
display: none;
}
}*/
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://use.fontawesome.com/5ad62430a6.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<title>AwesomeDesigns Random Quote Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="bg"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 col-sm-11 col-xs-10 jumbotron">
<h2>"Andrews Random Quote Generator. "</h2>
<h3>-Andrew Hickman</h3>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="text-center btn-posit">
<button class="btn btn-primary twit-btn"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"><span id="twit-Text">Tweet it</span></i></button>
<button class="btn btn-default quote-btn"><div id="whole-text">Get Quote</div></button>
</div>
</div>
</div>
</html>