Zipline: Build a Random Quote Machine

index.html

<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>

script.js

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();

scripts

<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>

style.css

@import url(https://fonts.googleapis.com/css?family=Cantarell|Handlee);

body {
  font-family: 'Cantarell', sans-serif;
}
#display-quote-wrapper h2 {
  font-family: 'Handlee', cursive;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

Zipline: Build a Random Quote Machine.markdown

Zipline: Build a Random Quote Machine

A Pen by rlynjb on CodePen.

License.