quote machine

by claykaboom

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container-fluid">
    
        <div class="row">
            
            
            <div class="shadows" id="main-box">
                <div id="quote-box">
                    <div id="main-quote"></div>
                </div>
                <div class="row">
                <div class="tobottom">
                <button type="button" class="btn btn-sm sharp mas" id="random-quote"><i class="fa fa-plus fa-2x"></i></button>
                    <div class="lefties">
                <button type="button" class="btn btn-sm sharp" id="tweet"><i class="fa fa-twitter fa-2x"></i></button>
                <button type="button" class="btn btn-sm sharp" id="me"><i class="fa fa-hand-peace-o fa-2x"></i></button>
                    </div>
                </div>
                </div>
            </div>
            
        
        </div>
        

        
    

    </div>

CSS

body {
    background-repeat: no-repeat;
    background-size: cover;
}

#main-box {
    background-color:#e7e7e7;
    text-align: center;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.shadows {
    width: 35%;
    -moz-box-shadow:    0 0 5px #000003;
    -webkit-box-shadow: 0 0 5px #000003;
    box-shadow:         0 0 5px #000003;
}


.btn {
    border: 0 none;
    font-weight: 700;
    height: 3.5em;
    width: 3.5em;
    background-color: #f28484 !important;
    color: #fff3f1 !important;
}

.sharp {
    border-radius: 0;
}

.mas {
    position: fixed;
    right: 0;
    margin: 10px;
    
}

.lefties {
    position: fixed;
    left: 0;
    margin: 10px;
}

#tweet {
    
}

#me {
     
}

.tobottom {
    position: fixed;
    bottom: 60px;
}

.footerRight{ 
    position: fixed;
    text-align: right;
    bottom: 7px; 
    width: 98%;
    float: right;
    font-family: 'Open Sans', sans-serif;
    color: bisque;
} 

a:hover, a:visited, a:link, a:active {
    color: bisque !important;
    text-decoration: none !important;
}

#main-quote {
    font-family: 'Open Sans', sans-serif;
    color: #292a2a;
    font-style: italic;
    text-align: center;
    padding: 35px 10px 0px 10px;
    margin: 10px;
    font-size: 1.3em;
}

JavaScript

$(document).ready(function(){
    var quotes = [
        {"quote": "It's not the years, honey. It's the mileage.", "background": "http://i.imgur.com/BCSNa1M.png"},
        {"quote": "You see, in this world there's two kinds of people, my friend: Those with loaded guns and those who dig. You dig.", "background": "http://i.imgur.com/kJcdfpL.png"},
        {"quote": "I'll make him an offer he can't refuse.", "background": "http://i.imgur.com/VD895qk.png"},
        {"quote": "May the Force be with you.", "background": "http://i.imgur.com/48xpxWm.jpg"},
        {"quote": "We buy things we don't need with money we don't have to impress people we don't like.", "background": "http://wallpapercave.com/wp/oj4WPgT.png"},
        {"quote": "Bond, James Bond.", "background": "http://i.imgur.com/yWXaUom.png"},
        {"quote": "Heeere's Johnny!", "background": "http://i.imgur.com/qVXpIGp.png"},
        {"quote": "Hasta la vista, baby.", "background": "http://i.imgur.com/8NMZjXv.png"},
        {"quote": "Zed's dead, baby. Zed's dead.", "background": "http://i.imgur.com/MEwQEIv.png"}
        ];
    
    
    function getQuote() {
        var randomIndex = Math.floor(Math.random() * quotes.length);
        var selectedQuote = quotes[randomIndex];

        $('#main-quote').text(selectedQuote.quote);
        var selectedBG = selectedQuote.background;
        console.log(selectedBG);
        $("body").css("background-image", "url('" + selectedBG + "')");
    }
    
    $('#random-quote').click(getQuote);
    getQuote();
        
    $('#random-quote').click(function() {
    var randomIndex = Math.floor(Math.random() * quotes.length);
    var selectedQuote = quotes[randomIndex];

    $('#main-quote').text(selectedQuote.quote);
    var selectedBG = selectedQuote.background;
    console.log(selectedBG);
    $("body").css("background-image", "url('"+selectedBG+"')");
  });
    
    $('#me').click(function(){
        window.open("http://codepen.io/l-emi/full/XKgYRr/");
    });
    
   ...