Skip to content

Instantly share code, notes, and snippets.

@shanemduggan

shanemduggan/Zipline: Build a Random Quote Machine.markdown

Forked from rcachero/Zipline: Build a Random Quote Machine.markdown
Created November 13, 2015 20:13
Show Gist options
  • Save shanemduggan/57001e9c10d13b8d17b1 to your computer and use it in GitHub Desktop.
Save shanemduggan/57001e9c10d13b8d17b1 to your computer and use it in GitHub Desktop.
Download ZIP
Zipline: Build a Random Quote Machine
Raw
index.html
<html ng-app="app" ng-controller="QuoteController" ng-click="generate()">
<body>
<div id="container">
<div class="row">
<div class="col-md-12">
<div id="quote">
<p>{{ quote }}</p>
<p>- {{ author }}</p>
</div>
</div>
</div>
<a href="{{ tweet }}" target="_blank">
<img class="logo" src="https://www.docspot.com/sites/docspot.com/themes/docspot2/twitter.png"></img>
</a>
</div>
</body>
</html>
Raw
script.js
var app = angular.module('app', [ ]);
var url = 'https://jsonp.afeld.me/?callback=JSON_CALLBACK&url=http%3A%2F%2Fquotes.stormconsultancy.co.uk%2Frandom.json';
app.controller("QuoteController", function ($http, $scope){
$scope.generate = function () {
$http.jsonp(url)
.success(function(data){
$scope.quote = data.quote;
$scope.author = data.author;
$scope.tweet = "https://twitter.com/intent/tweet?text="+data.quote+" - "+data.author;
})
}
$scope.generate();
});
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Sarala);
body {
background: url("http://www.wall321.com/thumbnails/detail/20120610/minimalistic%20computers%20quotes%20typography%20textures%20paranoia%201920x1080%20wallpaper_www.wall321.com_16.jpg") fixed no-repeat right bottom;
background-color: #2D2D2D;
text-align: center;
color: white;
}
*:hover {
cursor: pointer;
}
#quote {
font-size: 20px;
position:fixed;
top: 45%;
left: 50%;
width:35em;
height:9em;
margin-top: -10em;
margin-left: -16em;
padding-top: 5px;
color: white;
font-family: 'Sarala', sans-serif;
}
.logo {
position: fixed;
bottom: 0;
left: 0;
width: 50px;
height: auto;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Raw
Zipline: Build a Random Quote Machine.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment