sandipsubedi/Random Quote Machine

## index.html
<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>

## Random Quote Machine
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).

## script.js
// 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] ;

}

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## style.css
#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;
}


## styles
<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" />
	<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] ;

	}
	#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" />