Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Random Quote Machine
<body onLoad="document.getElementById('demo').innerHTML = myFunction()"> </body>
<div id="mainPage">
<div align=center margin-top="140px" >
<div id="titleHead" class="text-primary text-center"> <b>
Random Quote Generator </b></div> </div>
<div> <h3>Some of the most inspiring quotes that I have collected.</h3>
</div>
<br>
<button class="button2" onclick="document.getElementById('demo').innerHTML = myFunction() " type="submit" value="Update" id="tweetSubmit" > Generate New Quote </button>
<br> <br> <br>
<div id="quoteId" >
<p id="demo" ><h2></h2></p>
</div>
<div id="underQuote">
<div id="tweetBtn">
<a class="twitter-share-button" href="http://twitter.com/share" data-url="@clickme_sandip" data-text="Please generate a new quote">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
Sandip Subedi Quote Machine
---------------------------
A [Pen](http://codepen.io/sandipsubedi/pen/qbrXpJ) by [Sandip Subedi](http://codepen.io/sandipsubedi) on [CodePen](http://codepen.io/).
[License](http://codepen.io/sandipsubedi/pen/qbrXpJ/license).
// twitter
$('#tweetSubmit').on('click', function(ev) {
ev.preventDefault();
// Remove existing iframe
$('#tweetBtn iframe').remove();
// Generate new markup
var tweetBtn = $('<a></a>')
.addClass('twitter-share-button')
.attr('href', 'http://twitter.com/share')
.attr('data-url', '@clickme_sandip')
.attr('data-text', $('#tweetText').val());
$('#tweetBtn').append(tweetBtn);
twttr.widgets.load();
});
function testFunction(titleText){
// this is to change the title
document.title = titleText;
}
function myFunction(){
var quotes =["Stay Hungry, Stay Foolish <br/> <i>- Steve Jobs </i>", "Where there is a will, there is a way. <br /> <i>- Unknown </i>","Winners don't do different things they do things differently <br /> <i> - Shiv Khera </i>", "Do right. Do your best. Treat others as you want to be treated. <br /> -Lou Holtz", "Life is 10% what happens to you and 90% how you react to it. <br /> <i> - Charles R. Swindoll </i>", "Failure will never overtake me if my determination to succeed is strong enough. <br /> <i>- Og Mandino </i>","In order to succeed, we must first believe that we can. <br /> <i>- Nikos Kazantzakis </i>", "What you do today can improve all your tomorrows. <br /> <i>- Ralph Marston </i>", "A creative man is motivated by the desire to achieve, not by the desire to beat others <br/> <i>- Unknown </i>" ,"he will to win, the desire to succeed, the urge to reach your full potential... these are the keys that will unlock the door to personal excellence. <br/> <i> - Confucius </i>", " Don't watch the clock; do what it does. Keep going. <br/> <i> - Sam Levenson </i>","It does not matter how slowly you go as long as you do not stop. <br/> <i>- Confucius </i>"]
// now we need to generate randonly
var randNum = Math.random()*9;
var ourNum =parseInt(randNum);
testFunction(quotes[ourNum]);
return quotes[ourNum] ;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
#mainPage{
padding-top: 30px;
height: 700px;
width: 450px;
margin: 0 auto;
}
#titleHead{
font-family: Lobster, Monospace;
font-size:50px;
color:purple;
}
#quoteId{
align: center;
padding-top: 20px;
padding-left: 30px;
padding-right: 20px;
text-align:center;
padding-bottpm: 20px;
height:auto;
width: auto;
font-size: 25px;
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
border-radius: 20px;
}
#underQuote{
display: inline-block;
padding: 15px 25px 50px 300px;
font-size: 24px;
text-align: right;
text-decoration: none;
margin-left:75px;
align:center;
}
.button2 {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
margin-left:75px;
box-shadow: 0 0 10px #07c;
}
.tweet { display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #00aced;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
box-shadow: 0 0 10px #07c;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.