JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

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

CSS

body {
  background: #fff;    
}

#status_app {
 width:500px;
 padding:20px;
 background: #eee; 
 margin: 20px auto 20px auto;    
}

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

    new_html += "<select id='s1' name='select1' value='sonali'> sonali <option value='stats'> stats <option value='syndication'>syndication <option value='alert'> alert </option>  </select>";

    // Text area
    new_html += "<textarea id='t1' name='text1' value='text1'>  </textarea>";

    // Status dropdown
    new_html += "<select id='s2' name='select2' value='sonali'> sonali <option value='healthy'> healthy <option value='unhealthy'>unhealthy <option value='danger'> danger </option>  </select>";
    // 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 */

   ...