NBA Front End Quiz

In this example below you will see how to do a NBA Front End Quiz with some HTML / CSS and Javascript

Quick NBA Front End Quiz demonstrated in jQuery and vanilla JS.

Thumbnail
This awesome code was written by gbabula, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gbabula ©
  • HTML
  • CSS
  • JavaScript
    <!--

    NBA Quiz by Greg Babula
    Demonstrated in both vanilla JS and jQuery

-->


<ul id="foo">
    <li class="item">a</li>
    <li class="item">b</li>
    <li class="item">c</li>
</ul>

<ul id="bar">
    <li class="item">a</li>
    <li class="item">b</li>
    <li class="item">c</li>
</ul>


/*Downloaded from https://www.codeseek.co/gbabula/nba-front-end-quiz-wxcno */
    body {
    color: #333;
    font: normal normal 15px/1.5em arial, sans-serif;
}


/*Downloaded from https://www.codeseek.co/gbabula/nba-front-end-quiz-wxcno */
    //
// 1. How would you execute a function on document ready 
// (add a document ready event listener)?
//

$(document).ready(function() {
    console.log('DOM Ready - via jQuery');
});

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM Ready - via vanilla');
}, false);



//
//2. given the following html
//
//<body>
//    <ul id="foo">
//        <li class="item">a</li>
//        <li class="item">b</li>
//        <li class="item">c</li>
//    </ul>
//
//    <ul id="bar">
//        <li class="item">a</li>
//        <li class="item">b</li>
//        <li class="item">c</li>
//    </ul>
//</body>
//
//a. select every element with the class "item"
//
//b. select elements with the class "item" that is a child of 
//the element with id="bar"
//

var item = $('.item') || document.querySelectorAll('.item'),
    bar = $('#bar') || document.querySelector('#bar'),
    barItem = bar.find(item) || bar.children;

console.log('item el', item);
console.log('bar children item els', barItem);



//
//3. given the following array 
//
// var players = [
//     { 
//         name: 'lebron james',
//         points: 33
//     },
//     {
//         name: 'kobe bryant',
//         points: 80
//     },
//     {
//         name: 'kris humphries',
//         points: 27
//     }
// ];
//
// a. write a function to sort the array by 'points'
//
// b. write a function that creates an li element for every 
// item in the array. ex: 
//
//     <li>name : lebron james<br/>points : 33</li>
//

var players = [
    { 
        name: 'lebron james',
        points: 33
    },
    {
        name: 'kobe bryant',
        points: 80
    },
    {
        name: 'kris humphries',
        points: 27
    }
];

var PlayersUtil = (function() {
    function sortByPoints(arr) {
        var sortedArr = arr.sort(function(a, b) {
            return b.points - a.points;
        });
        
        this.sorted = sortedArr;
        
        return this;
    };
    
    function createMarkup() {
        var body = document.querySelector('body'),
            data = this.sorted || players,
            list = document.createElement('ul');

        for (var i = 0; i < data.length; i++) {
            var current = data[i],
                listItem = document.createElement('li');

            listItem.innerHTML = 'name: ' + current.name + '<br />';
            listItem.innerHTML += 'points: ' + current.points + '';

            list.appendChild(listItem);
        }

        console.log('create markup', data);
        body.appendChild(list);
    };
    
    return {
        sortByPoints: sortByPoints,
        createMarkup: createMarkup
    }
}());

PlayersUtil.sortByPoints(players).createMarkup();


    
//
// 4. a. make an AJAX call to the following url: 
//
// http://data.nba.com/stats/gameid=0021200013
//
// b. create an onSuccess event handler that logs the 
// response to the console
//

var nbaUrl = 'http://data.nba.com/stats/gameid=0021200013',
    request = new XMLHttpRequest;

var requestHandler = function() {
    if (request.readyState = 4) {
        if (request.state === 200) {
            console.log('request success - via vanilla', request.responseText);
        }
    }
};

request.open('GET', nbaUrl, true);
request.onreadystatechange = requestHandler;
request.send();


$.getJSON(nbaUrl, {}).done(function(data) {
   console.log('request success- via jQuery', data); 
});



Comments