Week 11 Assignment 2 Practice Set Week 11, PS #2

by Lucille Kenney

HTML

<h4>Practice Set: Basic jQuery</h4>

<p>This assignment will give you practice with some basic jQuery capabilities. There are three tasks in this practice set. Use the jQuery API documentation as needed!  </p>
    <p>
    Your tasks are:</p>
<ol id="tasks">
    <li>Find the items in this list and add a yellow background to them (consider using the .css() method)</li>
    <li>Find the second item in this list (this one!), and print its innerHTML to the third item
        <ol>Hints:
            <li>select this using a psuedo-class selector (the ones that have a colon), or array [] notation on the collection of all these li's</li>
            <li>select the third one in a similar way</li>
            <li>use the element's innerHTML and/or the jQuery .html() method to read/write the content from #2 to #3</li>
        </ol>
    </li>
    <li>This one gets overwritten with the output of #2</li>
    <li>Make this item disappear if you click on it! (the .click() method may be helpful)</li>
</ol>

CSS

color {
    background-color: yellow;
}

JavaScript

// your solutions here
var olList = document.getElementById("tasks");
console.log( $(olList) );
$(olList).css("background-color","lightyellow")

/*$('ol#tasks span.li');
null
$('ol#tasks span');
null
$('ol#tasks li');
null
*/

/*use the '>' as part of the selector to limit the
  matches to the immediate children*/

$('ol#tasks > li:eq(2)').html($('ol#tasks > li:eq(1)').html());
console.log( $(olList) );

$('ol#tasks > li:eq(3)').click(function(){
    $(this).fadeToggle();
});