JSFiddle - React, Tailwind, and code Playground

by joehannes

HTML

<body>
<div id="nr1">1_______</div>
<div id="nr2">2______</div>
<div id="nr3" class="foo">3_____</div>
<div id="nr4" class="foo">4____</div>
<div id="nr5" class="foo">5___</div>
</body>

CSS

.foo { background-color: blue; }
div { cursor: pointer; }

CoffeeScript

container = []
events = "onFoo onGoo onZoo"
els = $('.foo')

for ev in events.split(" ")
    do(ev) ->
        container[ev] = container[ev]?.add(els) ? els

$('div').on 'onGoo', (ev, el = $(this)) ->
    el.text "goo goo goo ..."

$('div').on 'onFoo', (ev, el = $(this)) ->
    el.text "something great and wonderful is about to happen ..."
    el.css color: "red"
    
$('div').on 'onZoo', (ev, el = $(this)) ->
    el.text "well well well ..."
    el.css color: "black"
    
$('#nr1').click (ev, el = $(this)) ->
    $('#nr1').add('#nr2').trigger 'onGoo'

$('.foo').click (ev, el = $(this)) ->
    container['onFoo'].trigger 'onFoo'

$('.foo').dblclick (ev, el = $(this)) ->
    container['onZoo'].trigger 'onZoo'