JSFiddle - React, Tailwind, and code Playground

by pseudonumos

HTML

<body>
    <div id="content">
        <div class="alternative">
            <p id="baobab" class="tree">KLOUDLESS ROCKS!</p>
        </div>
    </div>
    <div id="kloudless-container">
        <div class="header">
            <p><span>Hello</span>
            </p>
            <ul>
                <li>Zero</li>
                <li>One</li>
                <li>Two</li>
            </ul>
        </div>
        <div>
            <p><span>World!</span>
            </p>
            <ul>
                <li>First</li>
                <li>Second</li>
                <li>Third</li>
            </ul>
        </div>
    </div>
    <div>
        <p><span>Goodbye!</span>
        </p>
        <ul>
            <li title=“Mountain”><a href=“javascript:void(0);”>Google</a>
            </li>
            <li title=“Berkeley”><a href=“javascript:void(0);”>Kloudless</a>
            </li>
            <li title=“SF”><a href=“javascript:void(0);”>Dropbox</a>
            </li>
        </ul>
    </div>
</body>

CSS

p {
    color: red;
}
body #content .alternative p {
    color: orange;
}
.tree {
    color: red;
}
#baobab {
    color: gray;
}
div p {
    color: purple;
}
p {
    color: blue;
}
div p.tree {
    color: black;
}

JavaScript

/*

    ANSWERS:
    
    1. What is the benefit of using em over pixels?
        - pixels are absolutely defined whereas em is proportional to the font-size
        - the benefit of using em is for responsive/fluid designs such that the interface doesn't have unexpected behavior when the font-size changes
        - specifically a mobile layout would just need the top level font-size to be redefined, so that the layout is changed
    
    2a. In which priority order are these CSS rules applied?
        p { color: red; }
        p { color: blue; }
        div p { color: purple; }
        .tree { color: red; }
        div p.tree { color: black; }
        #baobab { color: gray; }
        body #content .alternative p { color: orange; }
        
    2b. What is the final color of "KLOUDLESS ROCKS!"?
        ORANGE

    3. How would you select the <li> element with the word "Second" in it?
       $(.header ~ div li:nth-child(2))


    4. Code an event handler that changes "Google" to "Google Drive" when the 
        Kloudless link is clicked.  Try in jQuery and then JavaScript.

    JQUERY
    
    function doSomething(evt) {
        $('li[title="Mountain"]>a').text('Google Drive');
    }

    $(document).ready(function() {
      $('li[title="Berkeley"]>a').click(function() {
    	doSomething();
      });

      $('li[title="Berkeley"]>a').trigger('click');

    });

    Javascript

      document.querySelectorAll('li[title="Berkeley"]>a')[0].addEventListener('click', function() {
        document.querySelectorAll('li[title="Mountain"]>a')[0].innerHTML = 'Google Drive';
      });

      evt = document.createEvent("MouseEvents");
      evt.initMouseEvent("click", true, true);
      document.querySelectorAll('li[title="Berkeley"]>a')[0].dispatchEvent(evt);

*/