JSFiddle - React, Tailwind, and code Playground

by a_robson

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<div class="container">
        <dl id="list">
        <dt>Async Strategies and Patterns in JavaScript</dt>
        <dd>Jim Cowart</dd>
        
        <dt>Exterminating Common jQuery Bugs</dt>
        <dd>Elijah Manor</dd>
    </dl>
</div>

<div id="form">
    <div>
        <label for='title'>Title</label>
        <input id="title" name='title' type='text'/>
    </div>
    <div>
        <label for='speaker'>Speaker</label>
        <input id="speaker" name='speaker' type='text' />
    </div>
    <div>
        <input type="button" class="button" id="add" value="add" disabled="disabled" />
    </div>
</div>

CSS

body {
    font-size: 1.5em;
    color: black;
    font-family: 'helvetica';
}

div {
    margin: .5em;
}

dd {
    margin-bottom: .5em;        
}

.container {
    margin-left: 4em;
    padding: .5em 1em;
    width: 20em;
    border: black .25em solid;
}

input {
    border: black .125em solid;
    font-size: .75em;
    font-family: 'helvetica';
    margin: .5em 1em .5em .5em;
}

label {
    display: inline-block;
    text-align: right;
    width: 5em;
}

.button {
    border: black .125em solid;
    padding: .25em 1em .25em 1em;
    margin: 2em 5em 6em 5.5em;
}

JavaScript

var ListWrap = function( selector ) {
    var $el = $( selector ),
        $list = $el.find( "#list" );        
    
    return {
        add: function( title, speaker ) {
            var $dt = $( "<dt>" + title + "</dt>" );
            var $dd = $( "<dd>" + speaker + "</dd>" );
            $list.append( $dt );
            $list.append( $dd );
        },
        getTitles: function() {
            return $list
                    .find( "dt" )
                    .map( function() { return $(this).text(); } )
                    .get();
        }          
    };
};

var FormWrap = function( selector ) {
    var $el = $( selector ),
        $title = $el.find( "#title" ),
        $speaker = $el.find( "#speaker" ),
        $add = $el.find( "#add" ),
        titleEvents = {},
        speakerEvents = {};
    
    return {
        clear: function() {
            $title.val( "" );
            $speaker.val( "" );           
        },
        
        getTitle: function() { return $title.val().trim(); },
        setTitle: function( value ) { $title.val( value ); },
        ignoreTitle: function( event ) {
            var handler = titleEvents[ event ];
            if( handler ) {
                $title.off( event, handler );
                delete titleEvents[ event ];
            }
        },
        whenTitle: function( event, handler ) { 
            titleEvents[ event ] = handler;
            $title.on( event, handler ) 
        },

        getSpeaker: function() { return $speaker.val().trim(); },
        setSpeaker: function( value ) { $speaker.val( value ); },
        ignoreSpeaker: function( event ) {
            var handler = speakerEvents[ event ];
            if( handler ) {
                $speaker.off( event, handler );
                delete speakerEvents[ event ];
            }
        },
        whenSpeaker: function( event, handler ) { 
            speakerEvents[ event ] = handler;
            $speaker.on( event, handler ); 
        },

       ...