JSFiddle - React, Tailwind, and code Playground

by fourgates

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<table class="ui-widget ui-widget-content">
                    <thead><tr class="ui-widget-header ">
                        <th>Username</th><th>User Id</th><th>Readings</th></th>
                    </tr></thead>
                    <!-- Todo: Generate table body -->
                      <tbody data-bind="foreach: users2">
                     <tr >
                        <td><input data-bind="value: name" /></td>
                        <td><strong data-bind="text: userId" /></td>
                           <td data-bind="foreach: readingsArray">
                               <span>Date:</span>
                            <span data-bind="text: date"></span> |
                            <span>Weight: </span>
                            <span data-bind="text: formattedWeight"></span> |
                            <span>Glucose:</span>
                            <span data-bind="text: glucose"></span><br />
                           
                    </tr>
                   </tbody>
                </table>

JavaScript

/*
 * Reading class
 * containts health readings
 */
function Reading(date,weight,glucose)
{
    var self = this;
    
    self.date=ko.observable(date);
    self.weight=ko.observable(weight);
    self.glucose=ko.observable(glucose);
    self.readingId=ko.observable(0);
    
      self.formattedWeight = ko.computed(function(){
        var formatted = self.weight();
        
        return formatted+" lb"
    });
}

/*
 * User class
 * contains a user name, date, and an array or readings
 */
function User(name,date,readings) {
    var self = this;
    
    self.name = name;
    self.date = date;
    self.userId = ko.observable(0);
    self.readingsArray = ko.observableArray([
        new Reading(99,22,88),new Reading(11,22,33)
    ]); 
}
// Overall viewmodel for this screen, along with initial state
function userHealthModel() {
    var self = this;
    self.inputWeight = ko.observable();
    self.inputDate = ko.observable();
    self.inputId = ko.observable();
    self.inputGlucose = ko.observable();

    self.createUsers = function(){
        self.users2 = ko.observableArray([
        new User("Oommen",2012),new User("Sue",2012)
    ]);
    }
    // Operations
    self.subscribe = function(){
        var users = this.users();
        for(var x = 0; x < users.length; x++)
        {
            self.users()[x].userId(x); 
        }
    }
    self.addUser = function(){
        self.users.push(new User("Temp",0,0,(new Reading(0,0))));
        var user = new User("Foo", 0, 0, new Reading(0, 0));
        self.subscribe();
        // chart handler
        chart.addSeries({ name: user.name, data: [180, 175, 195, 180] });
    }
    
   self.removeUser = function(userName){
    self.users.remove(userName);
    self.subscribe();}
    
     //adds a readings to the edittable array of readings (not yet the reading array in a user)
      self.addReading = function(){
          var iD = self.inputId();
          var date = self.inputDate();
          var weight =...