JSFiddle - React, Tailwind, and code Playground

by Vinod Chandru

HTML

<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=“Google”><a href=“javascript:void(0);”>Google</a></li>
        <li title=“Kloudless”><a href=“javascript:void(0);”>Kloudless</a></li>
        <li title=“Dropbox”><a href=“javascript:void(0);”>Dropbox</a></li>
    </ul>
</div>

CSS

/**
 *    2a. In which priority order are these CSS rules applied?
 *
 *    2b. What is the final color of "KLOUDLESS ROCKS!"?
 *
 *    <body>
 *        <div id="content">
 *            <div class="alternative">
 *                <p id="baobab" class="tree">KLOUDLESS ROCKS!</p>
 *            </div>
 *        </div>
 *    </body>
 *
 **/
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

/**
 *    1. What is the benefit of using em over pixels?
 *
 *
 *
 *
 *
 **/

/**
 *    2. See CSS =>
 **/

/**
 *    3. How would you select the <li> element with the word "Second" in it?
 **/






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







/**
 *    5. How would you test your JS code’s performance or profile it?
 *
 *
 *
 *
 *
 **/