4freen/index.html

## index.html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Codystar|Quintessential&effect=neon' rel='stylesheet' type='text/css'>
  <title>Random Quote Machine || Afreen</title>
</head>

<body id="bodyStyle" onload="getQuote()">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1 id="pageTitle" class="font-effect-neon">  Quote Machine </h1>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-10 quote-box">
        <div id="quoteLine"></div>
        <br>
        <div id="quoteAuthor"></div>
      </div>
      <div class="col-sm-1"></div>
    </div>
    <br>
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <button id="refresh" onclick="getQuote()">
          <i class="fa fa-lg fa-refresh"></i>
        </button>
      </div>
      <div class="col-sm-4"></div>
    </div>
    <br>
    <div class="row">
      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <button id="tweet" onclick="openTweet()">
          <i class="fa fa-lg fa-retweet"></i>
        </button>
      </div>
      <div class="col-sm-4"></div>
    </div>
    <br>
    <div class="footer">
      Made by <a href="https://codepen.io/4freen/">Afreen</a>
    </div>
  </div>
</body>

## random-quote-machine.markdown

      
    Raw
  

              random-quote-machine.markdown
            
          
    Random Quote Machine

This is a random quote machine that pumps out quotes at a click of a button. Made as part of FreeCodeCamp Zipline activity for Front End Dev.
A Pen by Afreen on CodePen.
License.

  
## script.js
var quoteDet=[];
var byText = " ~ via codepen.io/4freen/full/pgKKPp/ ";
function getQuote() {
  var quote = $.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
    type: 'POST',
    data: {},
    dataType: 'json',
    success: function(data) {
     quoteDet = data; document.getElementById("quoteLine").innerHTML = data.quote;
      document.getElementById("quoteAuthor").innerHTML = data.author;
    },
    error: function(err) {
      alert(err);
    },
    beforeSend: function(xhr) {
      xhr.setRequestHeader("X-Mashape-Authorization", "U4hCfqM0ggmshAPRmLzwzIDJmUFop1JY9sWjsnx2Ykl15Lgdyr");
    }
  });
};

function openTweet(){
  window.open("https://twitter.com/intent/tweet?text="+quoteDet.quote+byText);
};

## style.css
#bodyStyle {
  background-color: #800000;
}

#pageTitle {
  font-family: 'Codystar', monospace;
  font-size: 50px;
  color: white;
  text-align: center;
}

.quote-box {
  margin: 0 auto;
  padding: 20px 20px 20px 20px;
  text-align: center;
  border: 10px solid black;
  border-radius: 20px;
  background-color: white;
  height: 50%;
  width: 80%;
  font-family: 'Quintessential', cursive;
  font-size: 20px;
}

button {
  font-size: 2em;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  border: 5px solid black;
  border-radius: 20px;
  background-color: #800000;
  height: 50px;
  width: 100%;
}

#refresh, #tweet {
  color: white;
}

#refresh:hover {
  background-color: #0E8C3A;
}

#tweet:hover {
  background-color: #55acee;
}

.footer {
  font-family: "Quintessential";
  font-size: 0.8em;
  text-align: center;
  margin-top: 5%;
  color: white;
}

a {
  color: black;
}
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Codystar\|Quintessential&effect=neon' rel='stylesheet' type='text/css'>
	<title>Random Quote Machine \|\| Afreen</title>
	</head>

	<body id="bodyStyle" onload="getQuote()">
	<div class="container-fluid">
	<div class="row">
	<div class="col-sm-12">
	<h1 id="pageTitle" class="font-effect-neon"> Quote Machine </h1>
	</div>
	</div>
	<br>
	<div class="row">
	<div class="col-sm-1"></div>
	<div class="col-sm-10 quote-box">
	<div id="quoteLine"></div>
	<br>
	<div id="quoteAuthor"></div>
	</div>
	<div class="col-sm-1"></div>
	</div>
	<br>
	<div class="row">
	<div class="col-sm-4"></div>
	<div class="col-sm-4">
	<button id="refresh" onclick="getQuote()">
	<i class="fa fa-lg fa-refresh"></i>
	</button>
	</div>
	<div class="col-sm-4"></div>
	</div>
	<br>
	<div class="row">
	<div class="col-sm-4"></div>
	<div class="col-sm-4">
	<button id="tweet" onclick="openTweet()">
	<i class="fa fa-lg fa-retweet"></i>
	</button>
	</div>
	<div class="col-sm-4"></div>
	</div>
	<br>
	<div class="footer">
	Made by <a href="https://codepen.io/4freen/">Afreen</a>
	</div>
	</div>
	</body>
	var quoteDet=[];
	var byText = " ~ via codepen.io/4freen/full/pgKKPp/ ";
	function getQuote() {
	var quote = $.ajax({
	url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
	type: 'POST',
	data: {},
	dataType: 'json',
	success: function(data) {
	quoteDet = data; document.getElementById("quoteLine").innerHTML = data.quote;
	document.getElementById("quoteAuthor").innerHTML = data.author;
	},
	error: function(err) {
	alert(err);
	},
	beforeSend: function(xhr) {
	xhr.setRequestHeader("X-Mashape-Authorization", "U4hCfqM0ggmshAPRmLzwzIDJmUFop1JY9sWjsnx2Ykl15Lgdyr");
	}
	});
	};

	function openTweet(){
	window.open("https://twitter.com/intent/tweet?text="+quoteDet.quote+byText);
	};
	#bodyStyle {
	background-color: #800000;
	}

	#pageTitle {
	font-family: 'Codystar', monospace;
	font-size: 50px;
	color: white;
	text-align: center;
	}

	.quote-box {
	margin: 0 auto;
	padding: 20px 20px 20px 20px;
	text-align: center;
	border: 10px solid black;
	border-radius: 20px;
	background-color: white;
	height: 50%;
	width: 80%;
	font-family: 'Quintessential', cursive;
	font-size: 20px;
	}

	button {
	font-size: 2em;
	-webkit-transition-duration: 0.4s;
	/* Safari */
	transition-duration: 0.4s;
	border: 5px solid black;
	border-radius: 20px;
	background-color: #800000;
	height: 50px;
	width: 100%;
	}

	#refresh, #tweet {
	color: white;
	}

	#refresh:hover {
	background-color: #0E8C3A;
	}

	#tweet:hover {
	background-color: #55acee;
	}

	.footer {
	font-family: "Quintessential";
	font-size: 0.8em;
	text-align: center;
	margin-top: 5%;
	color: white;
	}

	a {
	color: black;
	}