2
\$\begingroup\$

I've done a random quote machine in jQuery. Could you look at the code and propose some improvements (especially jQuery code)?

Here's the working app.

var quotes = [
    {
        "quote": "Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.",
        "author": "Albert Einstein",
        "bg-image": "img/einstein.jpg"
    }
    , {
        "quote": "The artist is nothing without the gift, but the gift is nothing without work.",
        "author": "Emile Zola",
        "bg-image": "img/zola.jpg"
    }
    , {
        "quote": "I find that the harder I work, the more luck I seem to have.",
        "author": "Thomas Jefferson",
        "bg-image": "img/jefferson.jpg"
    }
    , {
        "quote": "Whether you think that you can, or that you can't, you are usually right.",
        "author": "Henry Ford",
        "bg-image": "img/ford.jpg"
    }
    , {
        "quote": "There are no facts, only interpretations.",
        "author": "Friedrich Nietzsche",
        "bg-image": "img/nietzsche.jpg"
    }
    , {
        "quote": "Try to learn something about everything and everything about something.",
        "author": "Thomas Henry Huxley",
        "bg-image": "img/huxley.jpg"
    }
    , {
        "quote": "Never interrupt your enemy when he is making a mistake.",
        "author": "Napoleon Bonaparte",
        "bg-image": "img/einstein.jpg"
    }
  ];


$(document).ready(function() {
    var $backgroundSlider = $('#background-slider'),
        $rotatorWrapper = $('.rotator-wrapper'),
        $quoteText = $rotatorWrapper.find('.quote-text'),
        $quoteAuthor = $rotatorWrapper.find('.quote-author'),
        $randomBtn = $('#random-quote'),
        $tweetBtn = $('#tweet'),
        quotesArr = [],
        fadeTime = 300,
        prevRandom;

    quotes.forEach(function(quote) {
        var $li = $('<li class="background-slider-item" />');
        $li.css('background-image', "url(" + quote["bg-image"] + ")");
        console.log("\"" + quote["bg-image"] + "\"");
        $li.appendTo($backgroundSlider);
        quotesArr.push({
           bgImg: $li,
            quote: quote
        });
    });
    
    function randomQuote() {
        var random = Math.floor(Math.random() * quotes.length);
        while(random === prevRandom) {
            random = Math.floor(Math.random() * quotes.length);
        }
        $('blockquote').fadeOut(fadeTime,function() {
            $quoteText.text(quotes[random]["quote"]);
            $quoteAuthor.text(quotes[random]["author"]);
            $(this).fadeIn(fadeTime);
        });
        
        quotesArr[random]["bgImg"].addClass('item-under').show().siblings().filter(':visible').fadeOut(fadeTime * 2,function() {
            quotesArr[random]["bgImg"].removeClass('item-under');
        });;
        prevRandom = random;
    }
    
    function init() {
        var random = Math.floor(Math.random() * quotes.length);
        $quoteText.text(quotes[random]["quote"]);
        $quoteAuthor.text(quotes[random]["author"]);
        quotesArr[random]["bgImg"].show().siblings().hide();
        prevRandom = random;
    }
    
    $randomBtn.on('click', randomQuote);
    $tweetBtn.on('click', function() {
        var url = 'https://twitter.com/intent/tweet?text="' + quotes[prevRandom]["quote"] + '" - ' + quotes[prevRandom]["author"];
        window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0'); 
    });
    
    init();
    
});
/*=================================
\* 0. Reset
/*===============================*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*=================================
\* 1. Globals
/*===============================*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    background-color: transparent;
    padding-top: 1px;
    margin-top: -1px;
}
/*=================================
\* 2. Background slider
/*===============================*/
#background-slider:after {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: -1;
}
.background-slider-item {
    position: fixed;
    width: 100%;
    height: 100%;
    background-position: center center;
    z-index: -2;
}
.item-under {
    z-index: -99 !important;
}
/*=================================
\* 3. Quotes rotator
/*===============================*/
.rotator-wrapper {
    position: relative;
    max-width: 600px;
    background-color: #fff;
    padding: 50px 50px;
    margin: 100px auto 0;
}
.rotator-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    background-color: #39f;
    width: 100%;
}
blockquote {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 25px;
    line-height: 30px;
}
.quote-author {
    font-size: .6em;
}
.rotator-controls {
    margin: 20px auto 0;
    text-align: center;
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    border: 2px #39f solid;
    color: #39f;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quotes rotator</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   
   
    <ul id="background-slider">
       <!--
        <li class="background-slider-item"></li>
        <!-- /.background-slider-item -->
    </ul>
    <!-- /.background-slider -->
    
    
    
    <div class="rotator-wrapper">
        <div class="rotator-progress"></div>
        <!-- /.rotator-progress -->
        <div class="rotator-content">
            <blockquote>
               <p class="quote-text">Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.</p>
                <footer class="quote-author"><span>Albert Einstein</span></footer>
                <!-- /.quote-author -->
            </blockquote>
            <!-- /.quote-text -->
        </div>
        <!-- /.rotator-content -->
        <div class="rotator-controls">
            <button id="random-quote" class="btn">Random Quote</button>
            <button id="tweet" class="btn">Tweet</button>
        </div>
        <!-- /.rotator-controls -->
    </div>
    <!-- /.rotator-wrapper -->
    
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.