JSFiddle - React, Tailwind, and code Playground

by Ryan Morris

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");
// all h1 tags
// all headers

$("#container");
// anything with id container
// the container
// the container id

$(":input");
// any form controls
// all form inputs

$("input");
// all input fields

$("input[type='checkbox']");
// All checkbox inputs


$(".basic :input");
// all form controls inside the basic class
// all form inputs (not just input types)

$("div:last");
// the last div (of the entire page)


$(".footer");
// footer class
// anything with a class of footer


$("td:nth-child(3)");
// any third (child) cell

$("tr:odd td");
// all cells in odd rows

$("#user-registration h2");
// all header 2s inside #user-registration id


$("input[name='email']");
// all inputs with name as email


$("select option[value='blue']");
// all options with a value of blue inside select lists

// gear shift

$("fieldset input");
$("input", "fieldset");
// all inputs inside fieldsets


$("p", ".footer");
// all paragraphs inside class footer


var form = $("form");
// all forms
form.find("fieldset");
// all fieldsets inside of forms


var inputs = $("input");
// all input elements
inputs.find("[type='text']");
// filter inputs for those with a type of text

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