JSFiddle - React, Tailwind, and code Playground

by taiansu

HTML

<select id="sel">
    <option value="">add appt</option>
    <option value="cut">cut</option>
    <option value="block">block</option>
</select>
<div class="mask">lalalala</div>
<div id="log"></div>

CSS

.blue{
    background-color: blue;
}
.green{
    background-color: green;
}
.red{
    background-color: red;
}

JavaScript

function log() {
    $('#log').append([].join.call(arguments, ', ') + '<br/>');
}


$(function() {
    $('div.mask').on('action.addAppt', function(e) {
        e.preventDefault();
        log('blue');
        $(this).addClass('blue');
    });

    $('div.mask').on('action.cut', function(e) {
        e.preventDefault();
        log('green');
        $(this).addClass('green');
    });

    $('div.mask').on('action.addBlock', function(e) {
        e.preventDefault();
        log('red');
        $(this).addClass('red');
    });

    $('div.mask').on('click', function(e) {
        e.preventDefault();

        if ($('div.mask').hasClass('cut')) {
            $(this).trigger('action.cut');
        } else if ($('div.mask').hasClass('block')) {
            $(this).trigger('action.addBlock');
        } else {
            $(this).trigger('action.addAppt');
        }
    });


    $('#sel').change(function() {
        $('div.mask').attr('class', 'mask').addClass($(this).val()).text('lalala class: ' + $('div.mask').attr('class'));
    });

});