JSFiddle - React, Tailwind, and code Playground

by jamessouth

HTML

<div id="header">
        <h1>
            PeachUI Tests</h1>
    </div>
    <div id="versionTests" class="test">
        <!-- Tests the functionality of the version and jQuery properties -->
        <h2>
            Version Tests</h2>
    </div>
    <div id="browserTests" class="test">
        <!-- Tests the functionality of the browser object -->
        <h2>
            Browser Tests</h2>
    </div>
    <div id="isNumericTests" class="test">
        <!-- Tests the functionality of the isNumeric function -->
        <h2>
            isNumeric Tests</h2>
    </div>
    <div id="heightTests" class="test">
        <!-- Tests the functionality of the equalizeHeight function -->
        <h2>
            equalizeHeight Tests</h2>
        <div class="heightTest" style="height: 200px; background-color: #E99393;">
            <p>
                This div's original height was 200px</p>
        </div>
        <div class="heightTest" style="height: 50px; background-color: #6aa6cc;">
            <p>
                This div's original height was 50px</p>
        </div>
        <div class="clear">
        </div>
    </div>

CSS

body
{
    background: #fff;
    color: #333;
    font-family: 'Segoe UI' , 'Lucida Grande' ,Verdana,Arial,Helvetica,sans-serif;
    line-height: 1.6em;
    font-size: .8em;
    padding: 0 30px;
}
#header
{
    height: 75px;
}
.error
{
    background: #D85050;
}
.test
{
    margin: 15px 0;
    background: #F2F2F2;
    padding: 10px;
    -moz-box-shadow: 2px 2px 4px #C0BEBE;
    -webkit-box-shadow: 2px 2px 4px #C0BEBE;
    box-shadow: 2px 2px 4px #C0BEBE;
}

.clear
{
    clear: both;
}

.heightTest
{
    float: left;
    width: 46%;
    padding: 2%;
}

JavaScript

(function () {
    // All vars and functions are in this scope only 
    // still maintains access to all globals 

    var PeachUI = function (selector, context) {

        // The PeachUI object is actually just the init constructor 'enhanced'
        return new PeachUI.fn.init(selector, context);
    };

    PeachUI.fn = PeachUI.prototype = {

        init: function (selector, context) {
            /// <summary>
            ///     Acts as a constructor for our namespace. Used to initialize 
            ///     properties that we need straight away.
            /// </summary>

            this.browser = PeachUI.browser;

            // Handle PeachUI(""), PeachUI(null), or PeachUI(undefined)
            // TODO: jQuery can probably handle us throwing the null selector to it so we should check.            
            if (!selector) {
                this.selector = jQuery(null)
            }
            // Handles the omission of context.
            if (!context) {

                this.selector = jQuery(selector);
            }
            else {
                this.selector = jQuery(selector, context);
            }

            return this;
        },

        // The current PeachUI build.
        version: "1.0.0",

        // The current version of jQuery being used
        jquery: jQuery().jquery,

        // Start with an empty selector
        selector: "",

        // Start with an empty browser object.
        browser: "",

        stringIsNullOrEmpty: function (string) {
            /// <summary>
            ///     Checks to see if a given string is null or empty.
            /// </summary>
            ///    <param name="string" type="String">
            ///        The string check against.
            ///    </param>

            var $empty = true;

            if (string && typeof string === "string") {

                if (string.length > 0) {
                    $empty = false;
                }
            }
            return $empty;
     ...