Skip to content

Instantly share code, notes, and snippets.

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>
<div id="display-quote-wrapper"></div>
<p>This is a front-end project from FreeCodeCamp built with Backbone.js and</p>
<script type="text/template" id="display-quote">
<h2>"<%= quoteText %>"</h2>
<b>- <%= quoteAuthor %></b>
<button class="btn btn-primary">Generate Random Quote</button>
<a href="<%= quoteLink %>">View quote here from Forismatic</a>
var quote = Backbone.Model.extend({
model: quote,
sync: function(method, model, options) {
// thanks to whoever wrote this article
options.dataType = 'jsonp';
options.url = '';
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.listenTo(this.model, 'sync', this.render);
render: function() {
this.$el.html( this.template( this.model.toJSON()) );
events: {
'click button' : 'generateQuote'
generateQuote: function(e) {
var getQuote = new displayQuote();
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
@import url(|Handlee);
body {
font-family: 'Cantarell', sans-serif;
#display-quote-wrapper h2 {
font-family: 'Handlee', cursive;
<link href="//" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment