Random Quote

In this example below you will see how to do a Random Quote with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by delynko, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright delynko ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Random Quote</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
    <div class="container-fluid" style="background-color: black">
        <div class="row" style="background-color: black">
            <div class="col-xs-4 col-lg-4"></div>
            <div class="col-xs-4 col-lg-4" id="presentation">
                <h3 style="font-family: Lucida Console" class="text-center">Random Quotes</h3>
                <div class="row">
                    <div class="col-xs-1"></div>
                    <div id="quote-box" class="col-xs-10 text-center" style="height: 100px;">
                        <p id="quote" style="overflow-wrap:break-word; font-family: Lucida Console;">The quote goes here:</p>
                    </div>
                        <div class="row">
                            <div class="col-xs-8"></div>
                            <div class="col-xs-3">
                                <p id="author" style="overflow-wrap:break-word; font-family: Lucida Console; font-size: 12px; margin-top: 5px"><em>The quoter goes here:</em></p>
                            </div>
                            <div class="col-xs-1"></div>
                        </div>
                    <div class="col-xs-1"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="background-color: black">
        <div class="row" style="background-color: black; margin-top: 25px">
            <div class="col-xs-4"></div>
            <div class="col-xs-2 text-center">
                <a href="https://twitter.com/share"><button id="twitterB" type="button" class="btn btn-default" style="font-family: Lucida Console">tweet this</button></a>
            </div>
            <div class="col-xs-2 text-center">
                <button id="change-button" type="button" class="btn btn-default" style="font-family: Lucida Console">change button</button>
            </div>
            <div class="col-xs-4"></div>
        </div>
    </div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/delynko/random-quote-aBbvwx */
body, html {
    background-color: black;
}

#presentation {
    border-radius: 5px;
    background-color: white;
    margin-top: 300px;
    height: 300px;
    min-width: 300px;
}

.myButton {
    background-color: lightgrey;
    border-radius: 5px;
    height: 35px;
}

.vcenter {
/*    display: inline-block;*/
    vertical-align: middle;
    float: none;
}

#quote-box {
    border-style: solid;
    border-width: 2px;
    border-color: black;
    padding: 20px;
    border-radius: 5px;
}

/*Downloaded from https://www.codeseek.co/delynko/random-quote-aBbvwx */
$("#change-button").on("click", function () {
    var quotes = [{quote:"I wanna help.", author:"Keaton"}, {quote:"Can you do some crown molding, please?", author:"Kristi"}, {quote:"I don't like crown molding.", author:"Eric"},
                  {quote: "bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark! bark!", author:"Neighbor's dogs"}];
    var colors = ["#CCCCCC", "#eeeeee", "#66757C", "#6A7567", "#918A70", "#879A9E"];                
    var rand = Math.floor(Math.random()*colors.length);
    var randQ = Math.floor(Math.random()*quotes.length);
    $('html').css("background-color", colors[rand]);
    $('body').css("background-color", colors[rand]);
    $('.container-fluid').css("background-color", colors[rand]);
    $('.row').css("background-color", colors[rand]);
    $('#presentation').css("background-color", colors[rand]);
    $('#twitterB').css("background-color", colors[rand]);
    $('#change-button').css("background-color", colors[rand]);
    $("#quote").html("<p>" + quotes[randQ].quote + "</p>");
    $("#author").html("<p>-" + quotes[randQ].author + "</p>");
    return quotes[randQ].quote, quotes[randQ].author;
});

Comments