Skip to content

Instantly share code, notes, and snippets.

@Kornil
Last active April 1, 2016 19:32
Show Gist options
  • Save Kornil/b00d91bee43dea826bf0 to your computer and use it in GitHub Desktop.
Save Kornil/b00d91bee43dea826bf0 to your computer and use it in GitHub Desktop.
Cool Quote Generator
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="container">
<div class="quotebox">
</i><p id="quote" ></p>
</div>
<div class="icon">
<span><i class="fa fa-chevron-circle-right fa-3x" id="quoteGen"></i></span>
</div>
<div class="share">
<span><i class="fa fa-twitter fa-lg" id="twitter_share" title="Share this quote!"></i></span>
</div>
<footer class="navbar-fixed-bottom">
<div class="fixfooter">
<a href="https://twitter.com/FrAgno92" target="_blank"><p>by Fragno92</p></a>
</div>
</footer>
</div>
</body>
$(document).ready(function() {
var quotes = [
"Whatever the mind of man can conceive and believe, it can achieve. –Napoleon Hill", "Strive not to be a success, but rather to be of value. –Albert Einstein", "Two roads diverged in a wood, and I—I took the one less traveled by, And that has made all the difference. –Robert Frost", "I attribute my success to this: I never gave or took any excuse. –Florence Nightingale", "I attribute my success to this: I never gave or took any excuse. –Florence Nightingale", "You miss 100% of the shots you don’t take. –Wayne Gretzky", "I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. 26 times I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed. –Michael Jordan", "The most difficult thing is the decision to act, the rest is merely tenacity. –Amelia Earhart", "Every strike brings me closer to the next home run. –Babe Ruth", "Definiteness of purpose is the starting point of all achievement. –W. Clement Stone", "Life isn’t about getting and having, it’s about giving and being. –Kevin Kruse", "Life is what happens to you while you’re busy making other plans. –John Lennon", "We become what we think about. –Earl Nightingale", "Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover. –Mark Twain", "Life is 10% what happens to me and 90% of how I react to it. –Charles Swindoll", "The most common way people give up their power is by thinking they don’t have any. –Alice Walker", "The mind is everything. What you think you become. –Buddha", "The best time to plant a tree was 20 years ago. The second best time is now. –Chinese Proverb", "An unexamined life is not worth living. –Socrates", "Eighty percent of success is showing up. –Woody Allen", "Your time is limited, so don’t waste it living someone else’s life. –Steve Jobs", "Winning isn’t everything, but wanting to win is. –Vince Lombardi", " I am not a product of my circumstances. I am a product of my decisions. –Stephen Covey", "Every child is an artist. The problem is how to remain an artist once he grows up. –Pablo Picasso", "You can never cross the ocean until you have the courage to lose sight of the shore. –Christopher Columbus", "I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel. –Maya Angelou", "Either you run the day, or the day runs you. –Jim Rohn", "Whether you think you can or you think you can’t, you’re right. –Henry Ford", "The two most important days in your life are the day you are born and the day you find out why. –Mark Twain", "Whatever you can do, or dream you can, begin it. Boldness has genius, power and magic in it. –Johann Wolfgang von Goethe", "The best revenge is massive success. –Frank Sinatra", "People often say that motivation doesn’t last. Well, neither does bathing. That’s why we recommend it daily. –Zig Ziglar", "Life shrinks or expands in proportion to one’s courage. –Anais Nin", "If you hear a voice within you say “you cannot paint,” then by all means paint and that voice will be silenced. –Vincent Van Gogh", "There is only one way to avoid criticism: do nothing, say nothing, and be nothing. –Aristotle", "Ask and it will be given to you, search, and you will find, knock and the door will be opened for you. –Jesus", "The only person you are destined to become is the person you decide to be. –Ralph Waldo Emerson", "Go confidently in the direction of your dreams. Live the life you have imagined. –Henry David Thoreau", "When I stand before God at the end of my life, I would hope that I would not have a single bit of talent left and could say, I used everything you gave me. –Erma Bombeck", "Few things can help an individual more than to place responsibility on him, and to let him know that you trust him. –Booker T. Washington", "Certain things catch your eye, but pursue only those that capture the heart. – Ancient Indian Proverb", "Believe you can and you’re halfway there. –Theodore Roosevelt", "Everything you’ve ever wanted is on the other side of fear. –George Addair", "We can easily forgive a child who is afraid of the dark, the real tragedy of life is when men are afraid of the light. –Plato", "Teach thy tongue to say, “I do not know,” and thous shalt progress. –Maimonides", "Start where you are. Use what you have. Do what you can. –Arthur Ashe", "When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy’. They told me I didn’t understand the assignment, and I told them they didn’t understand life. –John Lennon", "Fall seven times and stand up eight. –Japanese Proverb", "When one door of happiness closes, another opens, but often we look so long at the closed door that we do not see the one that has been opened for us. –Helen Keller", "Everything has beauty, but not everyone can see. –Confucius", "How wonderful it is that nobody need wait a single moment before starting to improve the world. –Anne Frank"
];
/* get a random quote from above list */
function getQuote() {
return Math.floor(Math.random() * quotes.length);
}
function doStuff() {
$('#quote').text(quotes[getQuote()]); /* get a quote and put it inside #quote */
$("#twitter_share").click(function() { /* take the text FROM #quote for twitter */
var url = 'https://twitter.com/intent/tweet?url=http://www.codepen.io/Kornil/full/VeqGBj&text=%22' + document.getElementById('quote').innerHTML;
window.open(url, 'twitter');
});
}
window.onload = doStuff(); /* call doStuff on window load */
$('#quoteGen').click(doStuff); /* call doStuff on #quoteGen click */
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
body {
/* cover */
font-family: 'Open Sans', sans-serif;
background: url("https://i.ytimg.com/vi/IzcfEvV4jkU/maxresdefault.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100vw;
}
.icon {
/* need this so #quotegen doesn't stretch and is centered */
position: fixed;
left: 0;
right: 0;
bottom: 300px;
opacity: 0.6;
}
#quoteGen {
/* poor man link for a new quote */
color: #fff;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}
.share {
/* same as above, div so #twitter_share doesn't stretch */
position: fixed;
bottom: 350px;
left: 0;
right: 10%;
}
#twitter_share {
/* poor man link with hover and fit div */
cursor: pointer;
display: inline-block;
color: #fff;
}
#twitter_share:hover {
color: #1b95e0;
}
.quotebox {
/* where the magic happens */
position: fixed;
right: 0;
left: 0;
display: inline-block;
margin: 0 50px 0 50px;
padding: 15px;
opacity: 0.8;
}
#quote {
/* magic */
padding-top: 50px;
color: #fff;
font-size: 16px;
text-align: center;
font-weight: 600;
}
.container {
/* apply an opacity filter on body */
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
height: 100vh;
width: 100vw;
}
.fixfooter {
/* same fix as above */
display: inline-block;
}
footer a:link {
color: #fff;
font-size: 12px;
}
footer a:visited,
footer a:hover,
footer a:active {
color: #fff;
}
@media only screen and (max-width: 768px) {
.share {
/* same as above, div so #twitter_share doesn't stretch */
position: fixed;
bottom: 150px;
left: 0;
right: 30%;
}
.icon {
/* need this so #quotegen doesn't stretch and is centered */
position: fixed;
left: 0;
right: 0;
bottom: 100px;
opacity: 0.6;
}
.fa-twitter {
font-size: 2em !important;
}
.fa-chevron-circle-right {
font-size: 4em !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment