harshitanand/Random Quote Machine.markdown

## index.html
<html ng-app="myapp">
<body ng-controller="btnclick">
  <div class="jumbotron">
    <h1>Random Quote Machine</h1>
  </div>
  <p>
    As a user, You can click a button to get a new random quote.
  </p>
  <br>
  <button class="btn btn-success" ng-click="btn()" ng-init="btn()">
  Generate Quote
  </button>
  <br>
  <br>
  <blockquote>
    <p>{{res}}</p>
    <small><cite title="Source Title">{{author}}</cite></small>
  </blockquote>
</body>
<html>

## Random Quote Machine.markdown

      
    Raw
  

              Random Quote Machine.markdown
            
          
    Random Quote Machine

A Pen by Harshit Anand on CodePen.
License.

  
## script.js
angular.module("myapp", [])
  .controller("btnclick", function btnclick($scope,$http){
    $scope.btn = function(){
      $http.jsonp("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=JSON_CALLBACK")
        .success(function(data){
          $scope.res = data.quoteText;
          $scope.author = data.quoteAuthor;
        })
        .error(function(data){
          $scope.res = data;
      })
    }
  })

/*
-----------JQuery Way ------------------
$(document).ready(function() {
  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=myJsonMethod&?callback=?")
});
function myJsonMethod(response){
  if (response)
    $('.quote').html(response.quoteText);
}

/* You can just do it using

      $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=myJsonMethod&?callback=?")

   and the rest myJsonMethod is same
*/

## scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

## style.css
@import url('http://fonts.googleapis.com/css?family=Cardo:400,400italic|Radley|Tangerine');
body {
  text-align: center;
  width: 800px;
  margin: 0px auto;
  background-color: #cdcdcd;
  font-family: 'Tangerine', serif;
  background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/symphony.png);
}

.jumbotron h1{
    text-align:center;
    text-shadow: 10px 10px 10px #aaa;
    margin: 10px auto;
    font-size: 8em;
    color: #333;
}

p {
  font-family: 'Radley', serif;
  font-size: 25px;
  text-align: center;
  width:800px;
}

.quote {
  font-family: 'Cardo', serif;
  font-size: 1.5em;
  width: 800px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255,255,255,0.9);;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100,100,100,.8);;
}

.author {
  font-style: italic;
}

.btn{
  font-family: 'Tangerine', serif;
  margin: 20px auto;
  color: rgba(0,0,0,1);
  background-color: rgba(160,200,160,.8);
  text-align: center;
  font-size: 50px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100,100,100,.8);;
}

a {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: sans-serif;
  font-size: 12pt;
}
cite{
  font-size:45px;
}

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://www.google.com/fonts#UsePlace:use/Collection:Radley:400italic" rel="stylesheet" />
	<html ng-app="myapp">
	<body ng-controller="btnclick">
	<div class="jumbotron">
	<h1>Random Quote Machine</h1>
	</div>
	<p>
	As a user, You can click a button to get a new random quote.
	</p>
	<br>
	<button class="btn btn-success" ng-click="btn()" ng-init="btn()">
	Generate Quote
	</button>
	<br>
	<br>
	<blockquote>
	<p>{{res}}</p>
	<small><cite title="Source Title">{{author}}</cite></small>
	</blockquote>
	</body>
	<html>
	angular.module("myapp", [])
	.controller("btnclick", function btnclick($scope,$http){
	$scope.btn = function(){
	$http.jsonp("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=JSON_CALLBACK")
	.success(function(data){
	$scope.res = data.quoteText;
	$scope.author = data.quoteAuthor;
	})
	.error(function(data){
	$scope.res = data;
	})
	}
	})

	/*
	-----------JQuery Way ------------------
	$(document).ready(function() {
	$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=myJsonMethod&?callback=?")
	});
	function myJsonMethod(response){
	if (response)
	$('.quote').html(response.quoteText);
	}

	/* You can just do it using

	$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=myJsonMethod&?callback=?")

	and the rest myJsonMethod is same
	*/
	@import url('http://fonts.googleapis.com/css?family=Cardo:400,400italic\|Radley\|Tangerine');
	body {
	text-align: center;
	width: 800px;
	margin: 0px auto;
	background-color: #cdcdcd;
	font-family: 'Tangerine', serif;
	background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/symphony.png);
	}

	.jumbotron h1{
	text-align:center;
	text-shadow: 10px 10px 10px #aaa;
	margin: 10px auto;
	font-size: 8em;
	color: #333;
	}

	p {
	font-family: 'Radley', serif;
	font-size: 25px;
	text-align: center;
	width:800px;
	}

	.quote {
	font-family: 'Cardo', serif;
	font-size: 1.5em;
	width: 800px;
	height: auto;
	margin: 0 auto;
	background-color: #efefef;
	padding: 20px;
	background-color: rgba(255,255,255,0.9);;
	border-radius: 20px;
	color: #000;
	box-shadow: -10px 10px 20px rgba(100,100,100,.8);;
	}

	.author {
	font-style: italic;
	}

	.btn{
	font-family: 'Tangerine', serif;
	margin: 20px auto;
	color: rgba(0,0,0,1);
	background-color: rgba(160,200,160,.8);
	text-align: center;
	font-size: 50px;
	border-radius: 15px;
	box-shadow: -5px 5px 10px rgba(100,100,100,.8);;
	}

	a {
	position: absolute;
	bottom: 0;
	left: 0;
	font-family: sans-serif;
	font-size: 12pt;
	}
	cite{
	font-size:45px;
	}
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
	<link href="https://www.google.com/fonts#UsePlace:use/Collection:Radley:400italic" rel="stylesheet" />