JSFiddle - React, Tailwind, and code Playground

by Rob Lardy

HTML

<div id="container">
    
    <h1 id="header">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" />

        </fieldset>
        
        <fieldset>
            
            <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>
    </table>
    
    <div class="footer">
        <p>copyright</p>
    </div>
    
</div>

CSS

td {
    
border: 1px solid #f90;
}

JavaScript

// Practice forming your selectors for jquery
// Working together, lets determine what 
// selector is most appropriate to grab each
// item throughout the document

// the container

var el=$("#container").css({
    "background-color" : "#ff9901"}
);




// the header

var el=$("#header").css({
    "background-color" : "Red"}
);




// the form


var el=$("#user-registration").css({
    "background-color" : "Blue"}
);


// the hidden input

//var el=$("var el=$("#hidden").css({
//    "background-color" : "black"}
//);").css({


// the fieldsets

// the username field


var el=$("username").css({
    "background-color" : "Red"}
);


var el=$("fieldset").css({
    "background-color" : "Blue"}
);


// the email field

var el=$("#email-field").css({
    "background-color" : "Green"}
);




// the second fieldset only
//$(":focus")

var el=$(":hover").css({
    "background-color" : "Red"}
);


// all inputs



// all inputs in the second fieldset

// the table

var el=$("table").css({
    "background-color" : "Green"}
);


// the first cell in the first row of the table

var el=$("table tr:first-child td:first-child").css({
    "background-color" : "Blue"}
);




// the third cell in the second row of the table
//
//var el=$("table tr:nth-child(2) td:nth-child(3)").css({
//    "background-color" : "yellow"}
//);



// the second column in the table (hint:2n+0)

var el=$("table td:nth-child(2)").css({
    "background-color" : "Indigo"}
);