Random Quote

Tutorials of (Random quote) by Delynko

<!DOCTYPE html>
<html >
<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/ */
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/ */
$("#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;
});

This awesome code ( Random Quote ) is write by Delynko, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Delynko