highsmithcodes/Sweet, Sweet Quote Machine.markdown

## index.html
<html lang="en">
<head>
	  <meta charset="UTF-8">
	  <title>Quote Machine</title>
	  <link rel="stylesheet" href="quote.css">
  	<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
  <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
</head>
  <body>
	    <div id="container">
    		  <h2>Quote Machine</h2>
      			<div id="quoteContainer">
				      <p>.  .  .</p>
				      <p id="quoteGenius"></p>
			    </div><!--end quoteContainer-->

			    <div id="buttonContainer">
  				    <a href="#" id="quoteButton">Generate</a>
		    </div><!--end buttonContainer-->
    <div id="buttonContainer2">
        <a href="https://twitter.com/intent/tweet?url=&original_referer="><img src="https://g.twimg.com/Twitter_logo_blue.png" height="40" width="50"></a>

    </div><!--end buttonContainer-->

	   </div><!--end container-->
  </body>
</html>

## script.js
	$(document).ready(function(){

		var quoteSource=[
		{
			quote: "A shit in a suit still stinks",
			name:"Unknown"
	    },
	    {
	    	quote:"When a person tells you that you hurt them, you don’t get to decide that you didn’t.",
	    	name:"Louis C.K"
	    },
	    {
	    	quote:"I'm sorry, Wilson! Wilson, I'm sorry!",
	    	name:"Confucius"
	    },
	    {
	    	quote:"Let's kick some ice.",
	    	name:"Thomas A. Edison"
	    },
	    {
	    	quote:"You sack of wine!",
	    	name:"Gandhi"
	    },
	    {
	    	quote:"A dingo ate my baby!",
	    	name:"Aym Rand"
	    },
	    {
	    	quote:"I'm just a girl, standing in front of a boy, asking him to love her.",
	    	name:"Dr. Martin Luther King Jr."
	    },
	    {
	    	quote:"For Narnia!",
	    	name:"Orson Welles"
	    },
	    {
	    	quote:"I don't like sand. It's coarse and rough and irritating and it gets everywhere.",
	    	name:"Alfred A. Montapert"
	    },
	    {
	    	quote:"This is your wakeup call I AM AN F... B... I AGENT!",
	    	name:"Malala Yousafzai"
	    },
	    {
	    	quote:"Get to the choppa.",
	    	name:"Eleanor Roosevelt"
	    },
	    {
	    	quote:"Everybody knows, when you make an assumption, you make an ass out of you and umption.",
	    	name:"Oscar Wilde"
	    },
	    {
	    	quote:"We're gonna need a bigger boat.",
	    	name:"Albert Einstein"
	    },
	    {
	    	quote:"If you're a bird, I'm a bird.",
	    	name:"Margaret Mead"
	    },
	    {
	    	quote:"It's a pressure valve. It won't open unless there's tremendous pressure.",
	    	name:"Winston Churchill"
	    },
	    {
	    	quote:"It's clobbering time!",
	    	name:"Oprah Winfrey"
	    },
	    {
	    	quote:"It's not a tumor!",
	    	name:"Mark Twain"
	    },
	    {
	    	quote:"We're going to live on! We're going to survive! Today we celebrate our Independence Day.",
	    	name:"Albert Einstein"
	    },
	];


		$('#quoteButton').click(function(evt){
			//define the containers of the info we target
			var quote = $('#quoteContainer p').text();
			var quoteGenius = $('#quoteGenius').text();
			//prevent browser's default action
			evt.preventDefault();
			//getting a new random number to attach to a quote and setting a limit
			var sourceLength = quoteSource.length;
			var randomNumber= Math.floor(Math.random()*sourceLength);
			//set a new quote
			for(i=0;i<=sourceLength;i+=1){
			var newQuoteText = quoteSource[randomNumber].quote;
			var newQuoteGenius = quoteSource[randomNumber].name;
			//console.log(newQuoteText,newQuoteGenius);
      var timeAnimation = 500;
      var quoteContainer = $('#quoteContainer');
      //fade out animation with callback
      quoteContainer.fadeOut(timeAnimation, function(){
        quoteContainer.html('');
				quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'-								'+newQuoteGenius+'</p>');

        //fadein animation.
        quoteContainer.fadeIn(timeAnimation);
      });

			break;
		};//end for loop

	});//end quoteButton function


});//end document ready


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

## style.css
body {
	font-family: 'Roboto', sans-serif;
	color: #000;
}

#container {
	width:800px;
	margin:50px auto;
	padding: 20px;
	width:50%;
}

#container h2 {
	text-align: center;
	color: black;
  font-size: 25px;
  padding: 60px;
  letter-spacing: 3px;
  border: 1px solid black;
}

#quoteContainer{
	width:75%;
	background: #fff;
	padding:10px;
	margin:30px auto;
	text-align: center;
  height:70px;
}
#buttonContainer{
	width: 100%;
	text-align: center;
}

#buttonContainer2{
	width: 100%;
	text-align: center;
  padding-top: 50px;
}

#quoteButton{
	width: 100px;
	margin-top: 10px;
	border: 1px solid black;
	color: black;
	font-family: inherit;
	font-weight: bold;
	padding:5px;
	text-decoration: none;
	text-align: center;
}

#webButton {
  width: 100px;
	color: black;
	font-family: inherit;
	font-weight: bold;
	margin: 30px;
  text-decoration: none;
	text-align: center;
}

#quoteButton:hover{
	cursor:pointer;
	background:#346E75;/* teal */
	color: #fff;
}
#quoteButton:active{
	cursor: pointer;
}
#quoteButton{
	display: inline-block;
}
#quoteGenius{
	font-style: italic;
	font-weight: 600;
	text-align: center;
}


/*MEDIA QUERIES*/
@media screen and(max-width:760px){
	#quoteButton,#addNew{
		display: block;
	}
}

## Sweet, Sweet Quote Machine.markdown

      
    Raw
  

              Sweet, Sweet Quote Machine.markdown
            
          
    Sweet, Sweet Quote Machine

A Pen by Veronica Highsmith on CodePen.
License.
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Quote Machine</title>
	<link rel="stylesheet" href="quote.css">
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
	<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="container">
	<h2>Quote Machine</h2>
	<div id="quoteContainer">
	<p>. . .</p>
	<p id="quoteGenius"></p>
	</div><!--end quoteContainer-->

	<div id="buttonContainer">
	<a href="#" id="quoteButton">Generate</a>
	</div><!--end buttonContainer-->
	<div id="buttonContainer2">
	<a href="https://twitter.com/intent/tweet?url=&original_referer="><img src="https://g.twimg.com/Twitter_logo_blue.png" height="40" width="50"></a>

	</div><!--end buttonContainer-->

	</div><!--end container-->
	</body>
	</html>
	$(document).ready(function(){

	var quoteSource=[
	{
	quote: "A shit in a suit still stinks",
	name:"Unknown"
	},
	{
	quote:"When a person tells you that you hurt them, you don’t get to decide that you didn’t.",
	name:"Louis C.K"
	},
	{
	quote:"I'm sorry, Wilson! Wilson, I'm sorry!",
	name:"Confucius"
	},
	{
	quote:"Let's kick some ice.",
	name:"Thomas A. Edison"
	},
	{
	quote:"You sack of wine!",
	name:"Gandhi"
	},
	{
	quote:"A dingo ate my baby!",
	name:"Aym Rand"
	},
	{
	quote:"I'm just a girl, standing in front of a boy, asking him to love her.",
	name:"Dr. Martin Luther King Jr."
	},
	{
	quote:"For Narnia!",
	name:"Orson Welles"
	},
	{
	quote:"I don't like sand. It's coarse and rough and irritating and it gets everywhere.",
	name:"Alfred A. Montapert"
	},
	{
	quote:"This is your wakeup call I AM AN F... B... I AGENT!",
	name:"Malala Yousafzai"
	},
	{
	quote:"Get to the choppa.",
	name:"Eleanor Roosevelt"
	},
	{
	quote:"Everybody knows, when you make an assumption, you make an ass out of you and umption.",
	name:"Oscar Wilde"
	},
	{
	quote:"We're gonna need a bigger boat.",
	name:"Albert Einstein"
	},
	{
	quote:"If you're a bird, I'm a bird.",
	name:"Margaret Mead"
	},
	{
	quote:"It's a pressure valve. It won't open unless there's tremendous pressure.",
	name:"Winston Churchill"
	},
	{
	quote:"It's clobbering time!",
	name:"Oprah Winfrey"
	},
	{
	quote:"It's not a tumor!",
	name:"Mark Twain"
	},
	{
	quote:"We're going to live on! We're going to survive! Today we celebrate our Independence Day.",
	name:"Albert Einstein"
	},
	];


	$('#quoteButton').click(function(evt){
	//define the containers of the info we target
	var quote = $('#quoteContainer p').text();
	var quoteGenius = $('#quoteGenius').text();
	//prevent browser's default action
	evt.preventDefault();
	//getting a new random number to attach to a quote and setting a limit
	var sourceLength = quoteSource.length;
	var randomNumber= Math.floor(Math.random()*sourceLength);
	//set a new quote
	for(i=0;i<=sourceLength;i+=1){
	var newQuoteText = quoteSource[randomNumber].quote;
	var newQuoteGenius = quoteSource[randomNumber].name;
	//console.log(newQuoteText,newQuoteGenius);
	var timeAnimation = 500;
	var quoteContainer = $('#quoteContainer');
	//fade out animation with callback
	quoteContainer.fadeOut(timeAnimation, function(){
	quoteContainer.html('');
	quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'- '+newQuoteGenius+'</p>');

	//fadein animation.
	quoteContainer.fadeIn(timeAnimation);
	});

	break;
	};//end for loop

	});//end quoteButton function


	});//end document ready
	body {
	font-family: 'Roboto', sans-serif;
	color: #000;
	}

	#container {
	width:800px;
	margin:50px auto;
	padding: 20px;
	width:50%;
	}

	#container h2 {
	text-align: center;
	color: black;
	font-size: 25px;
	padding: 60px;
	letter-spacing: 3px;
	border: 1px solid black;
	}

	#quoteContainer{
	width:75%;
	background: #fff;
	padding:10px;
	margin:30px auto;
	text-align: center;
	height:70px;
	}
	#buttonContainer{
	width: 100%;
	text-align: center;
	}

	#buttonContainer2{
	width: 100%;
	text-align: center;
	padding-top: 50px;
	}

	#quoteButton{
	width: 100px;
	margin-top: 10px;
	border: 1px solid black;
	color: black;
	font-family: inherit;
	font-weight: bold;
	padding:5px;
	text-decoration: none;
	text-align: center;
	}

	#webButton {
	width: 100px;
	color: black;
	font-family: inherit;
	font-weight: bold;
	margin: 30px;
	text-decoration: none;
	text-align: center;
	}

	#quoteButton:hover{
	cursor:pointer;
	background:#346E75;/* teal */
	color: #fff;
	}
	#quoteButton:active{
	cursor: pointer;
	}
	#quoteButton{
	display: inline-block;
	}
	#quoteGenius{
	font-style: italic;
	font-weight: 600;
	text-align: center;
	}


	/MEDIA QUERIES/
	@media screen and(max-width:760px){
	#quoteButton,#addNew{
	display: block;
	}
	}