JSFiddle - React, Tailwind, and code Playground

by Jennifer Piccione

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

$("#container");
//all tags with id=container

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

$(".basic :input");
// all form inputs withing tags with class=basic

$("div:last");
// just the last div tag

$(".footer");
//all tags with type=footer

$("td:nth-child(3)");
//the third td tags

$("tr:odd td");
//all odd numbered td tags within a tr tag

$("#user-registration h2");
//all h2 tags within any tag with id=user-registration

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

$("select option[value='blue']");
//all option tags that have value=blue within any select tags

// gear shift


$("input", "fieldset");
//all input tags inside all fieldset tags

$("p", ".footer");
//all p tags inside tags that have class=footer

var form = $("form");
form.find("fieldset");
//finds all fieldset tags within all form tag

var inputs = $("input");
inputs.filter("[type='text']");
//selecting all tags inside all input tags EXCEPT those with type=text
//filter removes those with that attribute

$("fieldset.basic").filter("h2");
//selects all tags in fieldset tags with class=basic EXCEPT the h2 tag