JSFiddle - React, Tailwind, and code Playground

by Brett Davis

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
          <h1>Interactive Food Guide</h1>
            <div id="menu">

                <div>
                    <input type="text" id="searchBox" style="width:500px;"> <br/><br/>
                </div>
                <ul id="listing"></ul>
            </div>
            <div id="log">
            <h3>Food</h3>
                <h3>Breakfast</h3>
                    <ul class="list-unstyled" id="breakfast"></ul>
                    <h3>Lunch</h3>
                <ul class="list-unstyled" id="lunch"></ul>
                    <h3>Dinner</h3>
                <ul class="list-unstyled" id="dinner"></ul>
                    <h3>Snack</h3>
                <ul class="list-unstyled" id="snack"></ul>
                                    
                <h3>Totals for the day:</h3>
                
                <p id="totalcal"><strong>Total Calories:</strong>  <span>0</span></p>
                <p id="totalprotein"><strong>Total Protein:</strong>  <span>0</span></p>
                <p id="totalcarb"><strong>Total Carbohydrates:</strong>  <span>0</span></p>
                <p id="totalfat"><strong>Total Fat:</strong>  <span>0</span></p>
                <p id="totalfat"><strong>Total Sugar:</strong>  <span>0</span></p>
        
                
                
            ...

CSS

#log {
  float:right;
}

#menu {
  float:left;
}


#history {
  float:left;
    width: 100%;
}



.modal-body {
    padding:25px;
}

JavaScript

$(function(){
    var Food = Backbone.Model.extend({
    defaults: {
        title: 0,
        meal: 'all',
        brand: 0,
        calories: 0,
        fat: 0,
        carbs: 0,
        protein: 0,
        sugar: 0,
        html: ''
    },
        
    initialize: function() {
      /*if (!this.get("title")) {
        this.set({"title": this.defaults().title});
      }*/
    }
});


var AllFoods = Backbone.Collection.extend({
    model: Food,
    localStorage: new Backbone.LocalStorage("allfoods")
});
    
var FoodJournalDay = Backbone.Collection.extend({
    model: Food,
    localStorage: new Backbone.LocalStorage("foodjournal")
});
    
var SearchList = Backbone.Collection.extend({

    initialize: function(){
        this.bind("reset", function(model, options){
        });
    },
    //** 1. Function "parse" is a Backbone function to parse the response properly
    parse:function(response){
        //** return the array inside response, when returning the array
        //** we left to Backone populate this collection
        return response.hits;
    }

});
    
var totalcal = 0;
var totalprotein = 0;
var totalcarb = 0;
var totalfat = 0;
var totalsugar = 0;

    
// The main view of the application
var App = Backbone.View.extend({

    el: 'body',    

    events: {
        "input #searchBox" : "prepCollection",
        "click #listing li" : "track",
        "click #save": "saveClicked",
        "click #savefoodday": "savefoodClicked",        
        "click .destroy": "destroy"
    },

    initialize: function () {        
        this.model = new SearchList();
        this.foods = new AllFoods();
        this.journal = new FoodJournalDay();
        this.prepCollection = _.debounce(this.prepCollection, 1000);
        this.$totalcal = $('#totalcal span');
        this.$totalcalfat = $('#totalcalfat span');
        this.$totalprotein = $('#totalprotein span');
        this.$totalcarb = $('#totalcarb span');
        this.$totalfat = $('#totalfat span');
     ...