JSFiddle - React, Tailwind, and code Playground

by gregbabula

HTML

<!--

    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>

CSS

body {
    color: #333;
    font: normal normal 15px/1.5em arial, sans-serif;
}

JavaScript

//
// 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...