JSFiddle - React, Tailwind, and code Playground

by sonali_moholkar

HTML

<div id='status_app'>
    <div id='status_table'></div>
    <div id='status_controls'></div>
</div><
<div id='debug'></div>

JavaScript

/* Setup */

var StatusApp = {};
StatusApp.table = jQuery('#status_table');
StatusApp.controls = jQuery('#status_controls');
StatusApp.debug = jQuery( '#debug' );
StatusApp.language = 'mar';
StatusApp.host = '172.16.51.73:3000';
StatusApp.protocol = 'http';
StatusApp.text = {
    mar: {
        submit: 'Pathva'
    },
    en: {
        submit: 'Submit'

    }
};

StatusApp.i18n = function(key, lang) {
    if (null === lang || 'undefined' === typeof lang) {
        lang = 'en';
    }
    if ('undefined' === typeof StatusApp.text[lang]) {
        throw new Error('Language not supported');
    } else {
        return StatusApp.text[lang][key];
    }
};


/* Run */

StatusApp.run = function() {

    /* Add UI elements */

    // Append html with new_html += '<b>new html</b>';
    var new_html = '';

    /* Controls */

    // Text area
    // Status dropdown
    // Submit
    new_html += "<button id='" + StatusApp.i18n('submit', StatusApp.language).toLowerCase() + "' name='" + StatusApp.i18n('submit', StatusApp.language).toLowerCase() + "' value='" + StatusApp.i18n('submit', StatusApp.language).toLowerCase() + "'>" + StatusApp.i18n('submit', StatusApp.language) + "</button>";

    // Add HTML to #status_controls div        
    StatusApp.controls.html(new_html);

    /* Results */

    new_html = '';

    // Table        
    new_html += '<h1>Hello, <span id="sonali">Sonali</span></h1>';

    // Add HTML to #status_controls div        
    StatusApp.table.html(new_html);

    /* Add UI listeners */

    jQuery('#' + StatusApp.i18n('submit', StatusApp.language).toLowerCase()).bind('click', function(e) {
        alert('Save');
    });

    jQuery('#sonali').bind('click', function(e) {
        alert('');
    });

    /* Setup Ajax */

    StatusApp.read(null);

/*
    StatusApp.create('syndication', {
        status: 'healthy',
        modified: new Date().getTime()
    });
*/

};

/* Generic callback */

StatusApp.callback = function(data) {
    alert('something...