Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Zipline: Build a Random Quote Machine
<div class="container text-center">
<h3 class="text-primary">Random Quote Generator</h3>
<hr>
<div id="display-quote-wrapper"></div>
<br>
<br>
<br>
<p>This is a front-end project from FreeCodeCamp built with Backbone.js and http://forismatic.com/en/api/</p>
</div>
<script type="text/template" id="display-quote">
<h2>"<%= quoteText %>"</h2>
<b>- <%= quoteAuthor %></b>
<br>
<br>
<br>
<button class="btn btn-primary">Generate Random Quote</button>
<br>
<br>
<a href="<%= quoteLink %>">View quote here from Forismatic</a>
</script>
var quote = Backbone.Model.extend({
model: quote,
sync: function(method, model, options) {
// thanks to whoever wrote this article
// http://thinkingonthinking.com/jsonp-with-backbonejs/
options.dataType = 'jsonp';
options.url = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=processQuote';
options.jsonpCallback = "processQuote";
options.error = this.errorr;
return Backbone.sync(method, model, options);
},
parse: function(resp) {
return resp;
},
errorr:function(response,responseText) {
console.log('inside callback..: ', responseText);
}
});
var displayQuote = Backbone.View.extend({
el: '#display-quote-wrapper',
template: _.template( $('#display-quote').html() ),
model: new quote(),
initialize: function() {
this.model.fetch();
this.listenTo(this.model, 'sync', this.render);
},
render: function() {
this.$el.html( this.template( this.model.toJSON()) );
},
events: {
'click button' : 'generateQuote'
},
generateQuote: function(e) {
e.preventDefault();
this.initialize();
}
});
var getQuote = new displayQuote();
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
@import url(https://fonts.googleapis.com/css?family=Cantarell|Handlee);
body {
font-family: 'Cantarell', sans-serif;
}
#display-quote-wrapper h2 {
font-family: 'Handlee', cursive;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment