JSFiddle - React, Tailwind, and code Playground

by AndrewZhang

HTML

<div id="main">
    <div id="inner">
        <h4 class="inside">h4 inside 1</h4>
        <h4 class="inside">h4 inside 2</h4>
        <ul class="nodelist">
            <li>list item one</li>
            <li>list item two</li>
            <li>list itme three</li>
        </ul>
    </div>
    <div id="outter">
      <h4 class="outside">h4 outside 1</h4>
      <h4 class="outside">h4 outside 2</h4>
    </div>
<div id="log"></div>

CSS

#log {
    font-size: 10px;
}

JavaScript

(function(global) {
    global.doc = document;
    global.body = doc.getElementsByTagName('body')[0];
    global.$ = function(id) {
        return doc.getElementById(id);
    }
        
    global.Logger = function(id) {
        this.logElem = $(id);
        this.logArr = [];    
    };
    global.Logger.prototype = {
        constructor: global.logger,
        
        append: function(comment) {
            this.logArr.push('<p>' + comment + '</p>');
        },
        
        flush: function() {
            this.logElem.innerHTML = this.logArr.join('');
        },
        
        clear: function() {
            this.logElem.innerHTML = '';
            this.logArr = [];
        }
    };
})(this);

(function() {
    var logger = new Logger('log');
    
    var items = $('inner').querySelectorAll('#main h4.inside');
    logger.append(items.length);
    
    for(var i = 0, len = items.length; i < len; i++) {
        logger.append(items[i].innerHTML);
    }
    
    logger.flush();
})();