JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<h1>Binding / Delegation Tests</h1>
<h2>Paragraphs</h2>
<p> content content content content content content content content
    content content content content content.</p>
<p> content content content content content content content content
    content content content content content.</p>
<p> content content content content content content content content
    content content content content content.</p>
<h2>Unordered lists</h2>
<ul>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>bam</li>
</ul>
<h2>Ordered lists</h2>
<ol>
    <li>foo</li>
    <li>bar</li>
    <li>baz</li>
    <li>bam</li>
</ol>
<h2>Definition lists</h2>
<dl>
    <dt>Doe</dt>
    <dd>A deer. A female deer.</dd>
    <dt>Ray</dt>
    <dd>A drop of golden sun.</dd>
    <dt>Me</dt>
    <dd>A name I call myself</dd>
</dl>
<h2>Images</h2>
<img src="http://www.mapds.com.au/newsletters/0807/iphone_home.gif" />
<hr/>
<div id="output">
    <p>Logs</p>
    <button>Clear</button>
    <div id="log"></div>
</div>

CSS

.highlight { 
    background-color: yellow; }

* { 
    padding: 10px; }

#output { 
    width: 250px; 
    position: fixed;
    background: #ccc;
    top: 0; right: 0; }

JavaScript

var button          = document.getElementsByTagName('button')[0],
    logs            = document.getElementById('log'),
    highlight_class = 'highlight',
    supports_touch  = (function (a){
        return "ontouchstart" in a || a.setAttribute && a.setAttribute("ontouchstart","void(0)") || false;
    })(document.createElement('a')),
    click_or_touch  = supports_touch ? 'touchstart' : 'click'
    ;

document.addEventListener(click_or_touch, logClick, false);
button.addEventListener('click', clearLogs, false);

function logClick(e)
{   
    var target = (e.target.nodeType == 3) ? e.target.parentNode : e.target;
        message = '<p>The click was on '+ target.nodeName + '</p>';
    
    target.className = highlight_class;
    logs.innerHTML += message;
}

function clearLogs(e)
{
    e.stopPropagation();

    var els = document.getElementsByClassName(highlight_class);    
    while (els.length){ els[0].className = ''; }
    
    logs.innerHTML = ' ';
}