JSFiddle - React, Tailwind, and code Playground

by Charlie Winfrey

HTML

<div id="container">
    
    <h1>Forms</h1>
    
    <form id="user-registration">
        
        <input type="hidden" value="1" name="id" />
        
        <fieldset>
            
            <h2>Basic Details</h2>
                
            <input type="text" name="username" placeholder="username" />
            
            <input type="text" name="email" placeholder="email address" id="email-field" />
            
            <select name="favorite">
                <option value="red">Red</option>
                <option value="blue">Blue</option>
            </select>

        </fieldset>
        
        <fieldset class="basic">
            
            <h2>Basic Details</h2>
                
            <input type="date" name="birthdate" />
            
            <input type="submit" value="submit" />
            
        </fieldset>
        
    </form>
    
    <table>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
        <tr><td>one</td><td>two</td><td>three</td></tr>
    </table>
    
    <div class="footer">
        <p>copyright</p>
    </div>
    
</div>

CSS

table{
    border:1px solid #666;
}
th{
    background-color:#666;
    color:#fff;
}
td {
    background-color:#f9f9f9;
    padding:2px;
}

#container{
    border:1px solid #ccc;
    padding:5px;
    border-radius:5px;
}

fieldset{
    outline:none;
    border:1px solid #666;
    border-radius:5px;
    padding:5px;
    margin:0 0 5px 0;
}

.footer ul p{
    display:inline;
}

.footer > p{
    text-align:center;
    font-size:10px;
    color:#999;
}

td:nth-child(2) {
    font-style:italic;
}

JavaScript

// What element(s) will this selection fetch?
//
// Write in, in plain english, what element(s) will match
//
// For example:
//
// $("p");
// // All paragraphs
//
// We'll go through them together to check our answers

$("h1");


$("#container");


$(":input");


$(".basic :input");


$("div:last");


$(".footer");


$("td:nth-child(3)");


$("tr:odd td");


$("#user-registration h2");


$("input[name='email']");


$("select option[value='blue']");


// gear shift


$("input", "fieldset");


$("p", ".footer");


var form = $("form");
form.find("fieldset");


var inputs = $("input");
inputs.filter("[type='text']");


$("fieldset.basic").filter("h2");