CSC 223 — Authoring for the Web

Selecting Elements

Overview

In this assignment you'll use JavaScript to select and modify elements on a page.

Assignment

1. Create a new HTML page.

2. Add content to the page to display a list of your favorite songs, books, or movies. Give each list item a class of "favorite-item".

3. Add two buttons to the page. Give the first button an id of "filter". Give the second button an id of "highlight".

4. Create a new JavaScript file and link it to that page using a <script> tag.

5. In your JavaScript file, use the appropriate methods of the document object to get a reference to the filter button. Add a function to the onclick event of that button (see below for a hint on this step). Have that function get all of the elements with a class of "favorite-item" and delete the first one from the list.

6. In your JavaScript file, use the appropriate methods of the document object to get a reference to the highlight button. Add a function to the onclick event of that button (see below for a hint on this step). Have that function get all of the elements with a class of "favorite-item" and change the styling of the first list item to make it appear highlighted.

7. Update the table of contents link on your index page if necessary.

8. Submit the url to your github pages site to MySVU. (This should be something like https://USERNAME.github.io/REPOSITORYNAME).

Hints

• Steps 5 and 6 are almost identical. The only difference is what you're doing to the selected element. Break the problem down into small steps and solve one step at a time.

• Once you have a reference to a button, you can add a function to its onclick handler like this:

var myButton = // Use some code here to get a reference to the button
myButton.onclick = function() {
    // What code should execute when the button is clicked
};