JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<div id='sonali'></div>
<input type='button' name='sonali_saver' value='Save'/>
<input type='button' name='sonali_bug' value='Bug'/>
<input type='button' name='sonali_cancel' value='Cancel'/>
<input type='text' name='sonali_text' value='BlAH'/>

JavaScript

var Sonali = {};

/* Run Code */
/* Always put your immediately-executing code into an onload callback so that it doesn't run before the page finishes loading. This is a "best practice" */

$( document ).ready( function() {
  Sonali.setup();
} );

Sonali.state = {
    notes: [ { title: "foo", body: "bar", published: new Date(), modified: new Date()  },
             { title: "foo", body: "baz", modified: new Date()  }
    ],
    services: [
    { id: 'syndication',
      status: 0,
      modified: new Date(),
      notes: [ { title: "foo", body: "bar", published: new Date(), modified: new Date() } ]
    }, { id: 'stats',
      status: 0,
      modified: new Date(),
      notes: [ { title: "foo", body: "baz", published: new Date(), modified: new Date()  } ]
    } ]
};

Sonali.get_buttons = function() {
    return { 'saver': 'click', 'cancel': 'click', 'text': 'change', 'bug': 'click' };  
};

Sonali.setup = function() {
    Sonali.setup_buttons();
    Sonali.setup_listeners();
};

Sonali.set_data = function( data ) {
    if ( null === data ) { 
      throw Error( 'data cant be null' );        
    }
    console.log( data );
    Sonali.state = data;
};

Sonali.get_data = function( data ) {
    return Sonali.state;
};


Sonali.setup_listeners = function() {
    var buttons = Sonali.get_buttons();
    var x = '';
    for ( x in buttons ) {        
        $( 'input[name="sonali_' + x + '"]' ).bind( buttons[ x ], function( e ) {
    Sonali.display_text( $( e.target ).val() );
} );
    }
};

Sonali.setup_buttons = function() {
    var buttons = Sonali.get_buttons();
    console.log( 'BUTTONS', Sonali.state );
};

Sonali.display_text = function( text_to_alert ) {
    alert( text_to_alert );        
};

/* Local Store Wrapper */

/* Since the code below works with any key, and we just want the "status_data" key, we write a "wrapper" that always invokes the local store getters/setters with our key */

Sonali.getStatus = function() {
    Sonali.datastore.get( 'status_data'...