js-samplez.js

/**
 * Consider this function the place where you go through and customize things
 * after an external script has created some defaults, but you need to customize
 * things. Everything has to occur w/in this function. If there are things you
 * would change entirely to make it more understandable, do so. Also, assume you
 * can use the latest ECMA script standards (no shitty IE8 support, or 9 for
 * that matter).
 */
runtime.initialize(function( $, markupData ){

    /**
     * Disable animation on the accordion (it slides up and down by default; it
     * should immediately snap open). Easiest route being to select the DOM element
     * and use jQueryUI's API to just disable it. Put a comment for future people
     * who maintain this code as to why it might be confusing.
     */
    // --- code here ---

    /** SOLUTION ***************************************************************
     * Its confusing b/c there are two jQuery's included; but only one (and not
     * the one passed as the $ var into this function) has the jQuery UI accordion
     * bound to its .data() method, where we can properly access and turn off the
     * animate setting via jQueryUI's API.
     **************************************************************************/
    jQuery('aside').accordion("option","animate", false);

    /**
     * Callback hell; we run into this all_the_time. Try giving this a refactor;
     * with the goal being to a) remove nesting of callbacks, and b) that when
     * you console log _value, it should have {valIs:12}. Key thing is that it
     * has to return a _consistent_ result; as you never know the timing in which
     * method1,2,3 will execute unless they're nested like this.
     */
    // var input = 4;
    // this.method1(input, function( _input ){
    //     this.method2(_input, function( _input2 ){
    //         this.method3(_input2, function( _input3 ){
    //             console.log(_input3);
    //         });
    //     });
    // });

    function inOrder(callable){
        return function(_value){
            var df = $.Deferred();
            callable(_value, function( newVal ){
                df.resolve(newVal);
            });
            return df.promise();
        };
    }

    var input = 4;
    inOrder(this.method1)(input).
        then(inOrder(this.method2)).
        then(inOrder(this.method3)).
        done(function(result){
            console.log('result: ', result);
        });

    /**
     * The variable `markupData` contains a large array of objects (9999 to be
     * specific) like so:
     * [{classes: 'alpha beta gamma', content: 'lorem ipsum ...'}, ..., ...]
     * -------------------------------------------------------------------------
     * Task is to loop through all the objects in the array and generate DOM
     * markup inside the <main> element, *after* the <h4></h4> tag, like:
     *   <div class="alpha beta gamma" data-index="{index}">
     *     <span>lorem ipsum</span>
     *   </div>
     * WITHOUT using jQuery. {index} is the 0-based index of the item you're
     * looping through.
     * -------------------------------------------------------------------------
     * IMPORTANT: performance matters. Beyond just not using jQuery, the real
     * criteria for this is doing it in the fastest/most-performant way possible.
     * Obviously 9999 is a somewhat arbitrarily large number; the key is
     * generating code that runs FAST in the browser. So - write the solution
     * wrapped inside the trackTime method, which will use chrome devtools'
     * console.time() method to do a rough benchmark of its performance (you'll
     * see the time logged to the console). I believe Firefox supports
     * console.time() as well, but not sure, so best bet is to use Chrome for
     * working on this.
     */
    this.trackTime(function(){
        var frag = document.createDocumentFragment();
        for( var key in markupData ){
            var div  = document.createElement('div'),
                span = document.createElement('span');
            div.className = markupData[key].classes;
            div.setAttribute('data-index', key);
            span.innerText = markupData[key].content;
            div.appendChild(span);
            frag.appendChild(div);
        }
        document.querySelector('main').appendChild(frag);
    });

    /**
     * Lastly, again w/out jQuery, bind click listeners that fire *once*
     * and console.log() the value stored in the data-index attribute whenever one
     * of the <div>s just created gets clicked, _but_ do not use an external
     * variable to track the state of whether something has already been
     * clicked or not. i.e.: no doing:
     *   var isClicked = false;
     *   ... <code> ...
     *     if(clicked === false){
     *       <code>;
     *       isClicked = true;
     *     }
     */
    // --- code here ---
    var nodeList  = document.querySelectorAll('main > div'),
        nodeArray = Array.prototype.slice.call(nodeList),
        onClick   = function(){
            console.log(this.getAttribute('data-index'));
            this.removeEventListener('click', onClick);
        };

    for(var i = 0, l = nodeArray.length; i < l; i++){
        nodeArray[i].addEventListener('click', onClick);
    }
});