JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js"></script>
<div>
    <a href="http://jsfiddle.net/wrumsby/sfasU/show">jQuery Example</a>
</div>
<div id="output"></div>
<div id="box"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

CSS

body {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #fff;
    color: #333;
}

#box {
    height: 300px;
    width: 300px;
    background-color: #f00;
}

#output {
    margin-left: 320px;
    float: left;
    width: 500px;
    height: 600px;
    overflow-y: scroll;
}

 #box:hover {
    background-color: blue;
}

.star {
    border: 1px solid blue;
    background-color: white;
    margin: 4px;
    height: 40px;
    width: 40px;
}

.star:hover {
    border: 1px solid white;
    background-color: blue;
}

.timestamp {
    font-size: 10px;
}

JavaScript

YUI().use('node-base', 'event-base', 'event-mouseenter', 'event-touch', function(Y) {
    'use strict';
    
    var output = Y.one('#output');
    
    function log(e) {
        var html = output.getHTML(),
            target = e.target,
            msg = e.type;
        
        target.generateID();

        html += msg + ' - ' + e.target.get('id') + ' <span class="timestamp">' + (new Date()) + '</span><br>';
        
        output.setHTML(html);
        e.halt();
    }
    
    var EVENTS = ['mouseenter', 'mouseleave', 'mouseover', 'click', 'touchstart', 'touchend'];
    
    Y.one('#box').on(EVENTS, log);
    Y.all('.star').on(EVENTS, log);
});