Module with Ajax and for-loop

Module with Ajax and for-loop

by Nirvanachain

HTML

<!-- Cool Site: http://youmightnotneedjquery.com/ -->

<div class="box">
    <p>One</p>
    <p>Two</p>
    <p>Three</p>
</div>

JavaScript

var Test = (function (el) {
    
    function InnerTest () {
        this.el = el;
        
        //Capital letters indicate a constant that should not change.
        this.PARA = 'p'
        
        this.init();       
    };
    
    InnerTest.prototype.init = function () {
        this
            .createChildren()
            .loopIt()
            .jax();
    };
    
    InnerTest.prototype.createChildren = function () {
        this.para = this.el.querySelectorAll(this.PARA); 
        
        return this;
    };
    
    InnerTest.prototype.loopIt = function () {
        for (var i = 0, item; item = this.para[i]; i++) {
            //test if browser supports the classList method else use className to add class.
            if (item.classList) {
                item.classList.add(item.textContent)
            }
            else {
              item.className += ' ' + item.textContent
            }
//            console.log( item );
//            console.log( item.classList );
        }
        
        return this;
    };
    
    InnerTest.prototype.jax = function () {
        var self = this;
        var request = new XMLHttpRequest();
        request.open('GET', 'https://api.github.com/users/matthewdordal', true);
        
        request.send();
        
        request.onload = function () {

            data = JSON.parse(this.response);
            console.log( data );
            for (var i = 0, item; item = self.para[i]; i++) {
                //test if browser supports the classList method and append info to <p class="Two">.
                if (item.classList) {
                    if( item.classList.contains('Two') ) {
                        console.log(item);
                        item.innerHTML = item.textContent + ' My ID = ' + data.type;
                    } 
                }
            }
        };
        
        return this;
    };
    
    return InnerTest;
    
}( document.querySelector('.box') ));

(function () {
    new...