JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<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;    
}

#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(),
            msg = e.type;

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