Exercise - jQuery

Selectors

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<div id="container">
    
    <h1>Selector time</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>Other Details</h2>
                
            <input type="date" name="birthdate" />
            
            <input type="submit" value="submit" />
            
        </fieldset>
        
    </form>
    
    <p></p>
    
    <table>
        <thead>
            <tr><th>First</th>
                <th>Second</th>
                <th>Third</th></tr>
        </thead>
        <tbody>
            <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>
        </tbody>
    </table>
    
    <div class="footer">
        <p>copyright</p>
        <ul>
            <li>Contact <p>Me</p></li>
            <li>Info
                <ul>
                    <li>Your info</li>
                    <li>My info</li>
                </ul>
            </li>
            <li>Junk</li>
        </ul>
    </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

$("#container").css("backgroundColor", "pink");// Selector 
$("tr th:first").css("color","purple");
$("tr th:nth-child(2)").css("color","green");
$("tr th:last").css("color","blue");
$("ul li:first").css("color", "yellow");

//
// Use jQuery to select the element 
// You can style the selected element to visually confirm
// your selection. Use the following jQuery methods to style:
// 
// $("selector").css("backgroundColor", "red"); // for background
// $("selector").css("color", "red"); // for text color
//
// Or log to the console
// 

// 1) the container div
//$(insert your selector).css("backgroundColor", "red");

// 2) the heading (h1)

// 3) the form

// 4) the #container div (div with the id container)

// 5) all fieldsets

// 6) Just the first fieldset

// 7) the username input field

// 8) the email input field

// 9) the second fieldset only

// 10) all input fields

// 11) all inputs in the second fieldset

// 12) all paragraphs in the footer

// 13) the table header row

// 14) the first cell in the first row of the table body

// 15) the third cell in the second row of the table

// 16) the second column in the table (hint:you will use "nth-child()")

// 17) all odd rows in the table

// 18) all unordered lists within an unordered list

// 19) only paragraphs that are a direct child of the footer div

// 20) the last list item of the inner unordered list ("My Info")

// Bonus) all hidden inputs
//$(insert your selector).attr('type', 'text').css("backgroundColor", "red");