#Generates a random Quotes ##Description- * This app generates a random Quotes every time button is clicked. * This app changes background color at random along with quote generation. * I made this pen for fun and learning purpose, * Anyone is free to use the code used. ##Assets- * Html5 * Css3 * Twitter Bootstrap framework * JavaScript * Jquery * FontAwesome iconset
Last active
October 10, 2016 17:47
-
-
Save stablexbt/c06fe722fdda4b163a9f4c4f5ec4d2cb to your computer and use it in GitHub Desktop.
Random Quote Generator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <div class="container quotebox"> | |
| <div id="bod"> | |
| <div id="heading"> | |
| <h2 class="text-info">Greatest Quotes by</h2> | |
| <h3 class="text-info">Tech Genuises</h3></div> | |
| </br> | |
| </br> | |
| </br> | |
| </br> | |
| <div class="quotediv"> | |
| <div class="row"> | |
| <div class="col-xs-2"> | |
| <i class="fa fa-2x fa-quote-left"></i></div> | |
| <div class="col-xs-10"> | |
| <h4 class="text-success" id="quotehere"></h4> | |
| </div> | |
| </div> | |
| <p class="text-success" id="quoteguy"></p> | |
| </div> | |
| <div class="row" id="quotebody"> | |
| <div class="col-sm-6"></div> | |
| <div class="col-sm-6"> | |
| <p class="text-info" id="twitext">-Tweet It</p> | |
| <a class="btn-social btn-outline" id="twit"><i class="fa fa-2x fa-fw fa-twitter"></i></a></div> | |
| </div> | |
| <button id="quotegen" type="button" class="btn btn-default">Get Quote</button> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <ul class="list-inline"> | |
| <li> | |
| <a href="https://www.facebook.com/profile.php?id=100007398109236" class="btn-social btn-outline"><i class="fa fa-2x fa-fw fa-facebook"></i></a> | |
| </li> | |
| <li> | |
| <a href="https://www.freecodecamp.com/abhics21" class="btn-social btn-outline"><i class="fa fa-2x fa-fw fa-fire"></i></a> | |
| </li> | |
| <li> | |
| <a href="https://github.com/abhics21" class="btn-social btn-outline"><i class="fa fa-2x fa-fw fa-github-square"></i></a> | |
| </li> | |
| <li> | |
| <a href="https://in.linkedin.com/in/abhishek-sharma-9bba36105" class="btn-social btn-outline"><i class="fa fa-2x fa-fw fa-linkedin"></i></a> | |
| </li> | |
| </ul> | |
| <p id="lastly"> | |
| <p> | |
| </div> | |
| <p class="text-warning" id="lastly">For Learning And Fun Purposes | |
| <p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| var backcolor = ["#1dd2af", "#2ecc71", "#3498db", "#9b59b6", "#16a085","#27ae60","#2980b9","#8e44ad","#f1c40f","#e67e22","#e74c3c","#95a5a6","#f39c12", | |
| "#d35400","#c0392b","#c0392b","#7f8c8d" ]; | |
| //quote object | |
| var quotes = [{ | |
| quote: "I invented the term 'Object-Oriented', and I can tell you I did not have C++ in mind.", | |
| name: "Alan Kay" | |
| }, { | |
| quote: "The use of COBOL cripples the mind; its teaching should therefore be regarded as a criminal offense.", | |
| name: "E.W. Dijkstra" | |
| }, { | |
| quote: "Beware of bugs in the above code; I have only proved it correct, not tried it.", | |
| name: "Donald Knuth" | |
| }, { | |
| quote: "Computer system analysis is like child-rearing; you can do grievous damage, but you cannot ensure success", | |
| name: "Tom DeMarco " | |
| }, { | |
| quote: "PHP is a minor evil perpetrated and created by incompetent amateurs, whereas Perl is a great and insidious evil, perpetrated by skilled but perverted professionals", | |
| name: "Jon Ribbens" | |
| }, { | |
| quote: "I'm not a real programmer. I throw together things until it works then I move on. The real programmers will say: Yeah, it works but you're leaking memory everywhere. Perhaps we should fix that. I'll just restart Apache every 10 requests", | |
| name: "Rasmus Lerdorf" | |
| }, { | |
| quote: "A programming language is low level when its programs require attention to the irrelevant.", | |
| name: "Alan J. Perlis" | |
| }, { | |
| quote: "It should be noted that no ethically-trained software engineer would ever consent to write a DestroyBaghdad procedure. Basic professional ethics would instead require him to write a DestroyCity procedure, to which Baghdad could be given as a parameter", | |
| name: "Nathaniel S. Borenstein" | |
| }, { | |
| quote: "I will not be a lemming and follow the crowd over the cliff and into the C", | |
| name: "John (Jack) Beidler" | |
| }, { | |
| quote: "C is quirky, flawed, and an enormous success", | |
| name: "Dennis MacAlistair Ritchie" | |
| }, { | |
| quote: "Fifty years of programming language research, and we end up with C++ ???", | |
| name: "Dr Richard A. O’Keefe. " | |
| }, { | |
| quote: "C++ is a horrible language. It's made more horrible by the fact that a lot of substandard programmers use it, to the point where it's much much easier to generate total and utter crap with it. Quite frankly, even if the choice of C were to do *nothing* but keep the C++ programmers out, that in itself would be a huge reason to use C", | |
| name: "Linus Benedict Torvalds" | |
| }, { | |
| quote: "In C++ it's harder to shoot yourself in the foot, but when you do, you blow off your whole leg.", | |
| name: "Bjarne Strousturp" | |
| }, ]; | |
| // | |
| $("#quotegen").click(function() { | |
| $("#quotebody").css({ | |
| "display": "inline" | |
| }); | |
| var j = Math.floor(Math.random() * backcolor.length); | |
| $("body").css({ | |
| "backgroundColor": backcolor[j], | |
| }); | |
| $(".fa-quote-left").css({ | |
| "color": backcolor[j], | |
| }); | |
| $(".text-success").css({ | |
| "color": backcolor[j], | |
| }); | |
| $("#quotegen").css({ | |
| "color": backcolor[j], | |
| }); | |
| var html1 = "", | |
| html2 = ""; | |
| var i = Math.floor((Math.random() * quotes.length)); | |
| html1 = "<p>\"" + quotes[i]["quote"] + "\"</p>"; | |
| html2 = "<p>- " + quotes[i]["name"] + "</p>"; | |
| $("#quotehere").html(html1); | |
| $("#quoteguy").html(html2); | |
| var twitext = "\"" + quotes[i]["quote"] + "\"-" + quotes[i]["name"]; | |
| $("#twit").attr("href", "https://twitter.com/intent/tweet?text=" + twitext); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: "Papyrus", Fantasy; | |
| text-align: center; | |
| background-size: 100% 100%; | |
| border: none; | |
| } | |
| #bod { | |
| height: 80%; | |
| width: 80%; | |
| margin: 40px; | |
| border-radius: 10px; | |
| z-index: 9999; | |
| background-color: #33444e; | |
| background-image: url("https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.zastavki.com%2Fpictures%2F2560x1600%2F2011%2FNature_Clouds_Above_the_Clouds_029818_.jpg&f=1"); | |
| background-size: cover; | |
| background-position: center; | |
| color: #fff; | |
| text-align: center; | |
| -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6); | |
| -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6); | |
| box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.6); | |
| top: 50%; | |
| left: 50%; | |
| border: none; | |
| } | |
| #heading { | |
| margin: 50px; | |
| } | |
| #quotebody { | |
| display: none; | |
| } | |
| .quotediv { | |
| margin: 20px | |
| } | |
| .btn-default { | |
| color: green; | |
| border: 1px solid lightgreen; | |
| margin: 20px; | |
| padding: 10px 25px 10px 25px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment